如何创建等宽的按钮？

Question

我想在屏幕中间显示三个按钮，并且三个按钮的宽度相同，尽管它们的文本标签长度不同。

只需添加三个带有不同长度文本标签的按钮，就会产生不同宽度的按钮。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center">
    <Button
        android:id="@+id/button_1"
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:text="ABCDEF" />
    <Button
        android:id="@+id/button_2"
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:text="GHI" />
    <Button
        android:id="@+id/button_3"
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:text="JKLM" />
</LinearLayout>

默认按钮宽度环绕内容：

--

将所有按钮的 layout_weight 设置为 1 并将 layout_width 设置为 0dip 会使它们均匀地拉伸以填充整个屏幕宽度。对于我想要的，这样的按钮实在是太大了，尤其是在大屏幕上。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center">
    <Button
        android:id="@+id/button_1"
        android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:text="ABCDEF" />
    <Button
        android:id="@+id/button_2"
        android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:text="GHI" />
    <Button
        android:id="@+id/button_3"
        android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:text="JKLM" />
</LinearLayout>

布局权重 1 按钮填充屏幕宽度：

--

在父LinearLayout中为weightSum设置不同的值可以用来阻止按钮填满整个屏幕，但是我不认为这是我要走的路，因为我不想让按钮占据大屏幕设备上的大部分屏幕。澄清一下，使用 weightSum，例如，我可以将三个按钮设置为共同占据屏幕宽度的一半，这在小屏幕上看起来还可以，但在大屏幕上，按钮仍然会占据屏幕宽度的一半，并且按钮只会比我想要的大得多。也许最终的解决方案是简单地为不同的屏幕设置不同的布局文件，但我宁愿不走这条路。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center"
    android:weightSum="5">
    <Button
        android:id="@+id/button_1"
        android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:text="ABCDEF" />
    <Button
        android:id="@+id/button_2"
        android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:text="GHI" />
    <Button
        android:id="@+id/button_3"
        android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:text="JKLM" />
</LinearLayout>

权重总和5小屏：

权重总和5大屏：

--

我也用 TableLayout 尝试了很多东西，但没有比只使用 LinearLayout 更好的了。

GridView 使用起来特别笨拙，我还没有尝试过。

那么，如何创建宽度相等的按钮，最好是它们的宽度仅与标签最长的按钮的内容相适应？

感谢任何建议。

（我确实搜索并发现这个问题被问和回答了很多次，但我找到的答案都没有解决我想要实现的目标。）

Answer 1

将各个按钮保留在其自己的 RelativeLayout 下。

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

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

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:text="Button1"/>
    </RelativeLayout>

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

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:text="Button2"/>
    </RelativeLayout>
</LinearLayout>

Answer 2

使用这个正确的代码会帮助你。

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

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="Get the Time"
    android:onClick="showNewDate" />
<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="Get the Time"
    android:onClick="showNewDate" />
<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="Get the Time"
    android:onClick="showNewDate" />

Answer 3

我身边还有一个额外的注释！

如果您需要设置在运行时添加的按钮（或任何其他只需更改代码的视图）的宽度（或高度），您可以使用下面的代码（它不依赖于方向） ：

public void AlignButtons(){
    llModules = (LinearLayout) findViewById(R.id.llModules);

    ViewTreeObserver viewTree = llModules.getViewTreeObserver();
    viewTree.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        public boolean onPreDraw() {

            int childcount = llModules.getChildCount();
            int maxWidth = 0; //int maxHeight = 0;

            String fontPath = "fonts/Isabella-Decor.ttf";
            Typeface tf = Typeface.createFromAsset(getAssets(), fontPath);

            for (int i = 0; i < childcount; i++) {
                LinearLayout v = (LinearLayout)llModules.getChildAt(i);
                View vv = v.getChildAt(0);
                if (vv instanceof Button) {
                    int width = vv.getMeasuredWidth();
                    maxWidth = (maxWidth > width) ? maxWidth : width;
                    //int height = vv.getMeasuredHeight();
                    //maxHeight = (maxHeight > height) ? maxHeight : height;
                }
            }
            for (int i = 0; i < childcount; i++) {
                LinearLayout v = (LinearLayout)llModules.getChildAt(i);
                View vv = v.getChildAt(0);
                if (vv instanceof Button) {
                    LayoutParams params = ((Button) vv).getLayoutParams();
                    params.width = maxWidth;
                    //params.height = maxHeight;
                    ((Button) vv).setLayoutParams(params);

                    // Applying font
                    ((Button) vv).setTypeface(tf);
                }
                vv = v.getChildAt(1);
                if (vv instanceof TextView) {
                    // Applying font
                    ((TextView) vv).setTypeface(tf);
                }
            }

            return true;
        }
    });
}

在这里，就我而言：

llModule - 一些布局包含另一个布局，我们需要对齐（@9​​87654322@）和其他（v.getChildAt(1);）。

LinearLayout v = (LinearLayout)llModules.getChildAt(i); - 获取要对齐的按钮布局。

其他部分一目了然。

这段代码中的两个周期完全相同，但我仍然无法想象如何将它们组合起来（以加快执行时间）。

Answer 4

阅读此线程，然后进行一些试验和错误，并注意到android:layout_width="180px" 是一个可接受的参数。现在就像说的那样，我只是偶然发现了这个，并没有尝试使用它来解决您的三个按钮场景。

很可能自从您最初发布后情况发生了变化。虽然我在为 1.5 版构建时尝试过这个。已经够老了... :-)

这里是完整的main.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">

    <TextView
        android:id="@+id/dateText"
        android:text="\n\nClick for Date\n\n"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button"
        android:layout_width="180px"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Get the Time"
        android:onClick="showNewDate" />

</LinearLayout>

Answer 5

如果您事先知道最宽的按钮文本是什么，您可以使用android:ems 属性将您的按钮设置为该宽度。

<Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minEms="5"
    android:text="@string/my_button" />

它并不完美，但它是我发现的最简单的方法，无需无休止地摆弄布局。

Answer 6

使用仪表板片段类

http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/DashboardFragment.java

Answer 7

也许最终的解决方案是简单地为不同的屏幕设置不同的布局文件，但我宁愿不走这条路。

许多程序员会使用res/layout/ 和res/layout-large/ 来处理这种情况。在三个按钮的有限情况下，您可能有其他选择，但通常用户界面并不那么简单。

那么，如何创建宽度相等的按钮，最好是它们的宽度仅与标签最长的按钮的内容相适应？

要完成您的“首选”[原文如此]要求，您需要为此创建一个自定义布局类。 Here is one related to it，对于仪表板模式，您可以将其用作起点。