如何制作相同尺寸的按钮

时间:2020-12-01 12:44:32

this is my xml, and this is the result, but would like the 3 buttons above (together) occupy the same size of the largest button, something like that image, where should I change my layout?

这是我的xml,这是结果,但是希望上面的3个按钮(一起)占据最大按钮的相同大小,就像那个图像,我应该在哪里更改我的布局?

This is what I have:

这就是我所拥有的:

如何制作相同尺寸的按钮

And this is what I want:

这就是我想要的:

如何制作相同尺寸的按钮

My xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@android:color/transparent"
              android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#FFA500"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:background="#FFA500"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textoPoup1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                android:textColor="@android:color/white"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/nota0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0"/>

                <Button
                    android:id="@+id/nota40"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="50"/>

                <Button
                    android:id="@+id/nota80"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="90"/>
            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/nota120"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="110"/>

                <Button
                    android:id="@+id/nota160"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="170"/>

                <Button
                    android:id="@+id/nota200"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="300"/>
            </LinearLayout>

            <Button
                android:id="@+id/proxima1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Next"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

3 个解决方案

#1


5  

This can be done easily using layout_weight for each of the buttons like this:

对于每个按钮,可以使用layout_weight轻松完成此操作,如下所示:

<Button
        android:id="@+id/nota0"
        android:layout_width="0"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="0"/>

This way, each button will take exactly 1/3 of the width of it's parent, which takes up the whole screen width. You can still play with the margins and the padding to make the spacing between the buttons as you wish.

这样,每个按钮将占据其父级宽度的1/3,占据整个屏幕宽度。您仍然可以使用边距和填充来根据需要在按钮之间建立间距。

#2


2  

In the LinearLayout with 3 buttons add

在LinearLayout中添加3个按钮

android:orientation="horizontal"

Now, for all three buttons set this:

现在,对于所有三个按钮设置:

android:layout_width="0dp"
android:layout_weight="1"

Something like this:

像这样的东西:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota0"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="0"/>

            <Button
                android:id="@+id/nota40"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="50"/>

            <Button
                android:id="@+id/nota80"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="90"/>
        </LinearLayout>

Then you can add proper margins:

然后你可以添加适当的边距:

For first button only add leftMargin as xdp and rightMargin as x/2dp. For second button add both left and right margin as xdp. For third button add left margin as x/2dp and right margin as xdp.

对于第一个按钮,只将leftMargin添加为xdp,将rightMargin添加为x / 2dp。对于第二个按钮,将左右边距添加为xdp。对于第三个按钮,将左边距添加为x / 2dp,将右边距添加为xdp。

#3


2  

In linearlayout we can give layout_weight attribute which is used for weightage of size for each child element in linearlayout, if layout_width="0dp" it will calculate width of that element on basis of weight or if layout_height="0dp" it will calculate height of that element on basis of weight.

在linearlayout中,我们可以给出layout_weight属性,该属性用于linearlayout中每个子元素的大小权重,如果layout_width =“0dp”,它将根据权重计算该元素的宽度,或者如果layout_height =“0dp”,它将计算高度基于重量的那个元素。

It take average of weight of total element i.e if all element have layout_weight="1" it will assign 1/3 of the width of it's parent.

它取总元素的平均权重,即如果所有元素都具有layout_weight =“1”,则它将分配其父元素宽度的1/3。

So in your case you want equally button size so need to assign same weight to all element and layout_width="0dp"

因此,在您的情况下,您需要相同的按钮大小,因此需要为所有元素分配相同的权重和layout_width =“0dp”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@android:color/transparent"
          android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#FFA500"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="#FFA500"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textoPoup1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
            android:textColor="@android:color/white"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota0"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="0"/>

            <Button
                android:id="@+id/nota40"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="50"/>

            <Button
                android:id="@+id/nota80"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="90"/>
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota120"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="110"/>

            <Button
                android:id="@+id/nota160"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="170"/>

            <Button
                android:id="@+id/nota200"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="300"/>
        </LinearLayout>

        <Button
            android:id="@+id/proxima1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Next"/>
    </LinearLayout>
</LinearLayout>
</LinearLayout>

#1


5  

This can be done easily using layout_weight for each of the buttons like this:

对于每个按钮,可以使用layout_weight轻松完成此操作,如下所示:

<Button
        android:id="@+id/nota0"
        android:layout_width="0"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="0"/>

This way, each button will take exactly 1/3 of the width of it's parent, which takes up the whole screen width. You can still play with the margins and the padding to make the spacing between the buttons as you wish.

这样,每个按钮将占据其父级宽度的1/3,占据整个屏幕宽度。您仍然可以使用边距和填充来根据需要在按钮之间建立间距。

#2


2  

In the LinearLayout with 3 buttons add

在LinearLayout中添加3个按钮

android:orientation="horizontal"

Now, for all three buttons set this:

现在,对于所有三个按钮设置:

android:layout_width="0dp"
android:layout_weight="1"

Something like this:

像这样的东西:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota0"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="0"/>

            <Button
                android:id="@+id/nota40"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="50"/>

            <Button
                android:id="@+id/nota80"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="90"/>
        </LinearLayout>

Then you can add proper margins:

然后你可以添加适当的边距:

For first button only add leftMargin as xdp and rightMargin as x/2dp. For second button add both left and right margin as xdp. For third button add left margin as x/2dp and right margin as xdp.

对于第一个按钮,只将leftMargin添加为xdp,将rightMargin添加为x / 2dp。对于第二个按钮,将左右边距添加为xdp。对于第三个按钮,将左边距添加为x / 2dp,将右边距添加为xdp。

#3


2  

In linearlayout we can give layout_weight attribute which is used for weightage of size for each child element in linearlayout, if layout_width="0dp" it will calculate width of that element on basis of weight or if layout_height="0dp" it will calculate height of that element on basis of weight.

在linearlayout中,我们可以给出layout_weight属性,该属性用于linearlayout中每个子元素的大小权重,如果layout_width =“0dp”,它将根据权重计算该元素的宽度,或者如果layout_height =“0dp”,它将计算高度基于重量的那个元素。

It take average of weight of total element i.e if all element have layout_weight="1" it will assign 1/3 of the width of it's parent.

它取总元素的平均权重,即如果所有元素都具有layout_weight =“1”,则它将分配其父元素宽度的1/3。

So in your case you want equally button size so need to assign same weight to all element and layout_width="0dp"

因此,在您的情况下,您需要相同的按钮大小,因此需要为所有元素分配相同的权重和layout_width =“0dp”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@android:color/transparent"
          android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#FFA500"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="#FFA500"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textoPoup1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
            android:textColor="@android:color/white"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota0"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="0"/>

            <Button
                android:id="@+id/nota40"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="50"/>

            <Button
                android:id="@+id/nota80"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="90"/>
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota120"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="110"/>

            <Button
                android:id="@+id/nota160"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="170"/>

            <Button
                android:id="@+id/nota200"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="300"/>
        </LinearLayout>

        <Button
            android:id="@+id/proxima1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Next"/>
    </LinearLayout>
</LinearLayout>
</LinearLayout>