水平居中两个按钮

时间:2010-11-15 23:30:16

标签: android layout

我尝试将两个按钮(其上的图像工作正常)安排在彼此旁边,并将它们水平居中。这就是我到目前为止所做的:

<LinearLayout android:orientation="horizontal" android:layout_below="@id/radioGroup"
              android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:layout_gravity="center_horizontal|center">
    <Button
            android:id="@+id/allow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/radioGroup"
            android:layout_gravity="center_horizontal"
            android:drawableLeft="@drawable/accept_btn"
            android:text="Allow"/>
    <Button
            android:id="@+id/deny"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/allow"
            android:layout_below="@id/radioGroup"
            android:layout_gravity="center_horizontal"
            android:drawableLeft="@drawable/block_btn"
            android:text="Deny"/>
</LinearLayout>

不幸的是,它们仍然与左侧对齐。任何帮助表示赞赏!伊夫

修改

不幸的是,到目前为止,没有任何评论或建议有效。这就是我尝试使用RelativeLayout提供简化的完整布局的原因:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">
    <TextView android:text="@+id/TextView01" android:id="@+id/TextView01"
          android:layout_width="wrap_content" android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/allow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/TextView01"
        android:text="Allow"/>
    <Button
        android:id="@+id/deny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/allow"
        android:layout_alignTop="@id/allow"
        android:text="Deny"/>
</RelativeLayout>

我已经尝试过LinearLayout和Button元素中的所有属性组合而没有运气。还有其他想法吗?

18 个答案:

答案 0 :(得分:95)

这是我的解决方案:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <TextView
        android:text="@+id/SomeText"
        android:id="@+id/TextView01"
        android:layout_width="wrap_content" android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:background="@android:drawable/bottom_bar"
        android:paddingLeft="4.0dip"
        android:paddingTop="5.0dip"
        android:paddingRight="4.0dip"
        android:paddingBottom="1.0dip"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_below="@+id/TextView01">

        <Button
            android:id="@+id/allow"
            android:layout_width="0.0dip" android:layout_height="fill_parent"
            android:text="Allow"
            android:layout_weight="1.0" />

        <Button
            android:id="@+id/deny"
            android:layout_width="0.0dip" android:layout_height="fill_parent"
            android:text="Deny"
            android:layout_weight="1.0" />

    </LinearLayout>
</RelativeLayout>

答案 1 :(得分:30)

我知道你已经找到了解决方案,但你也可能觉得这很有用。用作中心参考的空TextView可以通过增加倾角设置加倍作为按钮之间的填充。它还可以很好地处理屏幕方向的变化。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:text="Left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/centerPoint" />

    <TextView
        android:id="@+id/centerPoint"
        android:text=""
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/button2"
        android:text="Right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/centerPoint" />

</RelativeLayout>

结果截图:

screen shot of the result

答案 2 :(得分:15)

我不知道你是否真的找到了这个问题的好答案,但我通过制作一个TableRow,将宽度设置为fill_parent并将重力设置为居中然后将两个按钮放在其中来实现。

    <TableRow android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:gravity="center">
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test" android:width="100dip"></Button>
    <Button android:layout_width="wrap_content" 
        android:text="Test" android:layout_height="wrap_content"
        android:width="100dip"></Button>
</TableRow>

答案 3 :(得分:6)

如果您正在寻找快速完全的RelativeLayout解决方案,以下方法效果很好。 虚拟View元素是不可见的并且水平居中。 两个按钮左右对齐。

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.be.android.stopwatch"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal">

<View android:id="@+id/dummy"  android:visibility="visible" android:layout_height="0dip" android:layout_width="1dip" android:background="#FFFFFF" android:layout_centerHorizontal="true"/>

<ImageButton android:id="@+id/button1" android:layout_height="25dip" android:layout_alignTop="@+id/dummy" android:layout_toLeftOf="@+id/dummy" android:layout_width="50dip"/>

<ImageButton android:id="@+id/button2" android:layout_height="25dip" android:layout_alignTop="@+id/dummy"  android:layout_toRightOf="@+id/dummy"   android:layout_width="50dip"/>

</RelativeLayout>

答案 4 :(得分:5)

我以这种方式居中两个按钮:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/one" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/two" />
    </LinearLayout>
</LinearLayout>

答案 5 :(得分:4)

名为android:layout_foo的属性是LayoutParams - View的父级的参数。尝试在android:gravity="center"而不是LinearLayout上设置android:layout_gravity。一个影响LinearLayout如何在其自身内部布置其子女,另一个影响LinearLayout父母应如何对待它。你想要前者。

答案 6 :(得分:3)

我已经包装了两个水平LinearLayout,如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:gravity="center"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

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

您的UI小部件

</LinearLayout> </LinearLayout>

答案 7 :(得分:3)

这似乎是一个非常古老的问题,但我也遇到了同样的问题。我不得不在屏幕中间(水平)将两个按钮彼此相邻。我最终将两个按钮放在线性布局中,并将线性布局放置在相对布局中,并将其重力设置为中心。


更新:我找到了一个更简单的解决方案:

<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
              android:layout_centerHorizontal="true">
    <Button android:text="status" android:layout_height="wrap_content" android:layout_width="wrap_content"/>
    <Button android:text="fly" android:layout_height="wrap_content" android:layout_width="wrap_content"/>
</LinearLayout>

这就是我之前所拥有的:

    <RelativeLayout android:layout_height="wrap_content" android:layout_width="match_parent"
                    android:id="@+id/actionButtons" android:layout_below="@id/tripInfo" android:gravity="center">

        <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content">
            <Button android:text="status" android:layout_height="wrap_content" android:layout_width="wrap_content" />
            <Button android:text="fly" android:layout_height="wrap_content" android:layout_width="wrap_content" />
        </LinearLayout>



    </RelativeLayout>

答案 8 :(得分:3)

使用Relatie Layout而不是Linear,并将重力设置为 android:gravity =&#34; center&#34;

如果运行不同大小的设备应用程序,相对布局可以提供更好的性能和更好的扩展性。

以XML和结果UI为例:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@Color/custom1"
        android:gravity="center" >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="@color/Red"
            android:gravity="center"
            android:layout_marginRight="80dp"
            android:text="Text11111" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_toRightOf="@id/tv1"
            android:background="@color/Yellow"
            android:gravity="center"
            android:text="Text22222" />
    </RelativeLayout>

enter image description here

答案 9 :(得分:2)

这就是我所做的,我用线性布局包裹了一个线性布局,其重力设置为center_horizo​​ntal。然后我将包装的线性布局宽度设置为组合按钮的像素宽度。在此示例中,按钮宽度为100px,因此我将包装的线性布局设置为200px。

示例xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal">
    <TextView android:layout_width="fill_parent"
        android:layout_height="200px"
        android:text="This is some text!"
        android:background="#ff333333" />
    <LinearLayout android:layout_height="wrap_content"
        android:id="@+id/linearLayout1"
        android:layout_width="200px">
        <Button android:id="@+id/button1"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_width="100px">
        </Button>
        <Button android:id="@+id/button2"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_width="100px">
        </Button>
    </LinearLayout>
</LinearLayout>

答案 10 :(得分:2)

这是我使用relativeLayout的解决方案:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <Button
            android:id="@+id/reject_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/reject"/>

        <Button
            android:id="@+id/accept_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/accept"
            android:layout_toRightOf="@id/reject_btn"/>
    </RelativeLayout>

答案 11 :(得分:1)

使用RelativeLayout代替LinearLayout并设置其android_layout:gravity="center_horizontal"或非常不理想的方式是设置android_padding LinearLayout的像素值对齐它在中心。

答案 12 :(得分:1)

在不引入冗余组件或视图组的情况下,最优雅的方法是使用间距。您可以在线性布局中使用带有layout_weight的空间元素来获得所需的效果:

<LinearLayout android:orientation="horizontal" android:layout_below="@id/radioGroup"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center">
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:id="@+id/allow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/radioGroup"
            android:drawableLeft="@drawable/accept_btn"
            android:text="Allow"/>
        <Button
            android:id="@+id/deny"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/allow"
            android:layout_below="@id/radioGroup"
            android:drawableLeft="@drawable/block_btn"
            android:text="Deny"/>
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

赋予两个空间元素相同的layout_weight(无论权重是多少,它只是将它们作为所有权重总和的比例)导致空间元素占用可用的额外空间。所以它强制按钮到中间,没有分配任何layout_weight,所以它们不占用任何额外的空间,只是它们被明确给出(图像的大小)。

答案 13 :(得分:1)

这对我很有用:

<RadioGroup
    android:id="@+id/ratingRadioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal">
    <RadioButton
        android:id="@+id/likeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="@string/like"
        android:paddingRight="20pt"/>
    <RadioButton
        android:id="@+id/dislikeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dislike" />
</RadioGroup>

答案 14 :(得分:1)

我感觉到你的痛苦,我不得不稍微调整一下并让这个工作起作用。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

 <Button 
     android:id="@+id/Button01"
     android:layout_alignParentLeft="true"
     android:layout_width="75dp"
     android:layout_height="40dp"
     android:layout_marginTop="15dp"
     android:layout_marginLeft="60dp"
     android:text="No" />

 <Button 
     android:id="@+id/Button02"
     android:layout_alignParentRight="true"
     android:layout_width="75dp"
     android:layout_height="40dp"
     android:layout_marginTop="15dp"
     android:layout_marginRight="60dp"
     android:text="Yes" />

 <TextView
    android:id="@+id/centerPoint"
    android:layout_toRightOf="@id/Button01"
    android:layout_toLeftOf="@id/Button02"
    android:text=""
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    />

</RelativeLayout>

答案 15 :(得分:0)

代码下方将对齐中心水平的两个按钮,不给出dp。所以这将适用于所有方向和所有屏幕。

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change password"
        android:id="@+id/change_pwd_button"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/holo_blue_dark"
        android:textColor="@android:color/white"


        android:padding="25px"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Close"
        android:id="@+id/change_pwd_close_btn"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/holo_blue_dark"
        android:textColor="@android:color/white"
        android:layout_marginLeft="20dp"
        />
</LinearLayout>

答案 16 :(得分:0)

这项工作对我而言。简单易行。

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    >
                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content">
                                <Button
                                    android:id="@+id/btn_one"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Button One"
                                    />
                                <Button
                                    android:id="@+id/btn_two"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Button Two"
                                    android:layout_toRightOf="@id/btn_one"
                                    />
                        </RelativeLayout>
                </LinearLayout>
        </RelativeLayout>

答案 17 :(得分:0)

尝试在中间放置一个高度和宽度为零的视图,并将其放在中心位置,并将两个按钮放在右侧和左侧。

看看,这是我构建的应用程序的一部分:

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

<View
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_centerInParent="true"
    android:id="@+id/view_in_middle">
</View>

<Button

    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:id="@+id/yes_button"
    android:layout_marginRight="24dp"
    android:layout_toLeftOf="@id/view_in_middle"
    android:text="Yes" />

<Button

    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:id="@+id/no_button"
    android:text="No"
    android:layout_marginLeft="24dp"
    android:layout_toRightOf="@id/view_in_middle"
  />

</RelativeLayout>