是否有可能在android linearlayout的宽度上均匀分布按钮


247

我有一个线性布局(水平放置),其中包含3个按钮。我希望3个按钮具有固定的宽度,并在线性布局的宽度上均匀分布。

我可以通过将linearlayout的重力设置为居中,然后调整按钮的填充来管理此问题,但这对于固定宽度有效,而对于更改设备或方向无效。

<LinearLayout android:id="@+id/LinearLayout01" 
android:layout_height="wrap_content" 
android:orientation="horizontal" 
android:layout_width="fill_parent" 
android:gravity="center">

<Button 
android:id="@+id/btnOne"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:width="120dip"></Button>

<Button 
android:id="@+id/btnTwo"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:width="120dip"></Button>


<Button 
android:id="@+id/btnThree"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:width="120dip"></Button>

</LinearLayout>


Answers:


339

扩展fedj的answer,如果将设置layout_width0dp,并将layout_weight每个按钮的设置为1,则可用宽度将在按钮之间平均分配。


81
要对此进行扩展,如果您不希望按钮的宽度为屏幕的1/3,则将每个按钮包装在LinearLayout中,然后在3个LinearLayouts上设置layout_width =“ 0dp”和layout_weight =“ 1”。此外,将LinearLayouts上的重力设置为“居中”,以便按钮将在每个LinearLayout的中心对齐。
安德鲁(Andrew)2010年

这是仅适用于linearlayout的情况。任何人都可以对相对布局中的等距给出任何想法

1
就我而言,我使用layout_width =“ wrap_content”,并且只有在layout_weight =“ 1”时才有效!
StefanoM5

这是不正确的,因为OP需要解决。请参阅stoefln的答案。
MitulátBATI

228

如果您不希望按钮缩放,而是调整按钮之间的间距(所有按钮之间的间距相等),则可以使用weight =“ 1”的视图来填充按钮之间的间距:

    <Space
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1" >
    </Space>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@null"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/tars_active" />

    <Space
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1" >
    </Space>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@null"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/videos_active" />

    <Space
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1" >
    </Space>

15
这绝对是最简单,最低开销的方法(对于要缩放视图之间的空间而不是缩放视图本身的情况)。我垂直使用它,所以只交换了宽度和高度值。谢谢。
samis

7
这是一个优雅的解决方案。您可能更喜欢使用Space视图类型。使事情更具可读性。
Ryan R

2
Ryan,是的,那就是如果您使用的是API 14+(我们应该如此)。
Eduardo Naveda

老实说,我以为只有4个按钮就无法使用,但是它运行出色,没有大惊小怪和运行时测量。尊重!
阿什拉夫·阿尔沙哈威

这比目前被接受的答案要好。
DroidHeaven

25

您可以像下面这样使用它。

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"/>
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reset"/>
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="cancel"/>
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
</LinearLayout>

太甜了!Space直到现在我才听说过
某处某人

21

您可以通过给双方做ViewSA layout_width0dplayout_weight1

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

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="0dp"
        android:text="example text"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

</LinearLayout>

android layout_weight的工作方式是:

  • 首先,它查看View通常会占用的大小并保留该空间。
  • 第二,如果布局为,match_parent则它将以s 的比率除以剩余空间layout_weight。因此,如果给Views layout_weight="2"layout_weight="1",则生成的比率将为2到1,即:第一个View将获得剩余空间的2/3,另一个View将获得1/3。

这就是为什么如果您给出第一步layout_width的大小0dp没有附加含义的原因,因为两个视图都没有分配任何空间。然后只有第二个点确定每个空间View,从而View根据比率为s指定您指定的空间!

0dp通过提供一个显示相反的示例来解释为什么导致空间均等化:下面的代码将导致不同的结果,因为example text现在的宽度大于,0dp因为宽度wrap_content改为使剩余的剩余空间小于100%因为文本占用空间。结果将是它们确实获得了50%的可用空间,但是文本已经占用了一些空间,因此它们TextView将拥有总空间的50%以上

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

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:text="example text"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

</LinearLayout>

13

好吧,如果您只有3个按钮,并且外部按钮与左侧和右侧对齐是确定的(甚至是计划的),那么您可能希望尝试使用RelativeLayout,这种方法的开销较小(在许多情况下)。

您可以layout_alignParentBottom用来将所有按钮与布局的底部对齐。使用layout_alignParentLeft and Right的外部按钮和layout_centerHorizontal中按键。

这将在不同的方向和屏幕尺寸上很好地工作。


要澄清的是,如果您有三个以上的按钮,则此操作将无效。
arlomedia

究竟。您必须改用LinearLayout或RadioGroup(如果适用)。
marsbear 2014年

11

您应该看看android:layout_weight属性


1
据我了解,layout_weight属性将拉伸按钮的大小以填充布局。我想保持按钮的大小不变,只是增加按钮之间的填充。
yamspog 2010年

啊!我真的不知道最好的方法。也许将每个按钮封装在布局中。具有layout_weight属性的3个布局,并且按钮在布局中居中。但是我真的不知道这是否是最好的方法。
fedj 2010年

9

现代化的解决方案是Flexbox

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:justifyContent="space_around"> <!-- or "space_between", "space_evenly" -->

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />
</com.google.android.flexbox.FlexboxLayout>

确保导入 implementation 'com.google.android:flexbox:2.0.0'

Flexbox更强大 它是对的很好的补充ConstraintLayout这是学习更多的好资源

space_around,space_between和space_evenly之间的区别


1
感谢您让我(我们)意识到这一点。绝对有用。我用“space_around”并很好地为中心的按钮,当我有1或3的Flexbox的内可见
有人的地方

4

为了在水平线性布局中均匀隔开两个按钮,我使用了3个LinearLayout对象作为要自动调整大小的空间。我将这些LinearLayout对象定位如下:

[] Button1 [] Button2 []

([]表示用于间距的LinearLayout对象)

然后将每个[] LinearLayout对象的权重设置为1,然后得到均匀分布的按钮。

希望这可以帮助。



4

我建议您使用LinearLayout的weightSum属性。

将标记添加 android:weightSum="3"到LinearLayout的xml声明中,然后添加android:layout_weight="1"到Buttons中,将导致3个按钮均匀分布。


4

分配weight给容器内添加的每个按钮都可以实现,这对于定义水平方向非常重要:

    int buttons = 5;

    RadioGroup rgp = (RadioGroup) findViewById(R.id.radio_group);

    rgp.setOrientation(LinearLayout.HORIZONTAL);

    for (int i = 1; i <= buttons; i++) {
        RadioButton rbn = new RadioButton(this);         
        rbn.setId(1 + 1000);
        rbn.setText("RadioButton" + i);
        //Adding weight
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1f);
        rbn.setLayoutParams(params);
        rgp.addView(rbn);
    }

因此我们可以在设备中获得此结果:

在此处输入图片说明

即使我们旋转设备weight,每个按钮中定义的元素也可以沿容器均匀分布元素:

在此处输入图片说明


3

最好的方法是将TableLayout与android:layout_width =“ match_parent”一起使用,并且在列中将android:layout_weight =“ 1”用于所有列


2

上面使用layout_didn的答案对我不起作用,但是下面的答案适用。

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_weight="0.1"
    android:layout_gravity="center_horizontal"
    >

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
       />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp"
        />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp"/>

</LinearLayout>

这是它在屏幕上的样子,

在此处输入图片说明


2

最重要的答案是正确的,但在某些情况下,如果您需要可见的和不可用的功能,则此实用的方法会很好地工作

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

        <Button
            android:id="@+id/btnOne"
            android:layout_width="120dp"
            android:layout_height="match_parent"></Button>

        <Button
            android:id="@+id/btnTwo"
            android:layout_width="120dp"
            android:layout_height="match_parent"></Button>


        <Button
            android:id="@+id/btnThree"
            android:layout_width="120dp"
            android:layout_height="match_parent"></Button>
    </LinearLayout>



 float width=CommonUtills.getScreenWidth(activity);
            int cardWidth=(int)CommonUtills.convertDpToPixel (((width)/3),activity);

LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(width,
                        LinearLayout.LayoutParams.MATCH_PARENT);

btnOne.setLayoutParams(params);
btnTwo.setLayoutParams(params);
btnThree.setLayoutParams(params);

public class CommonUtills {
public static float getScreenWidth(Context context) {
        float width = (float) 360.0;
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        width = displayMetrics.widthPixels / displayMetrics.density;
        return width;
    }
}

2

体重相等的孩子

要创建每个孩子在屏幕上使用相同空间的线性布局,请将每个视图的android:layout_height设置为“ 0dp”(对于垂直布局)或将每个视图的android:layout_width设置为“ 0dp”(用于水平布局)。然后将每个视图的android:layout_weight设置为“ 1”。

为了使这项工作中LinearLayout视图组的属性值android:layout_widthandroid:layout_height必要等于"match_parent"...


多谢同伴!节省了很多时间。
Xonshiz

1
搭档没问题。
Gibran Castillo

0
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Tom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp" 
        android:layout_weight="3"/>

    <TextView
        android:text="Tim"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp"
        android:layout_weight="3"/>

    <TextView
        android:text="Todd"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp" 
        android:layout_weight="3"/>

</LinearLayout>

在圆周上,汤姆,蒂姆和托德被假定为3厘米。如果您希望它是触摸屏,则将其设为Tom和Tim假定为1厘米,这意味着他们将虚拟结合在一起,但其2D平面位于底部。这显示在屏幕上。


0
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
    android:text="Tom"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

<TextView
    android:text="Tim"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

<TextView
    android:text="Todd"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.