Как создать кнопки с одинаковой шириной? - PullRequest
27 голосов
/ 28 марта 2011

Я хочу отобразить три кнопки в середине экрана, и чтобы все три кнопки были одинаковой ширины, хотя они будут иметь текстовые метки разной длины.

Простое добавление трех кнопок с текстовыми метками разной длины дает кнопки разной ширины.

<?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>

ширина кнопки по умолчанию переносит содержимое:
default button width wraps contents

--

Setting the layout_weight to 1 and the layout_width to 0dip on all the buttons causes them to stretch equally to fill the entire screen width. For what I want, such buttons are simply too big, especially on large screens.

<?xml version="1.0" encoding="utf-8"?>

    <Кнопка
        андроид: идентификатор = "@ + идентификатор / button_1"
        андроид: layout_height = "fill_parent"
        андроид: layout_width = "0dip"
        Android: layout_weight = "1"
        android: text = "ABCDEF" />
    <Кнопка
        андроид: идентификатор = "@ + идентификатор / button_2"
        андроид: layout_height = "fill_parent"
        андроид: layout_width = "0dip"
        Android: layout_weight = "1"
        android: text = "GHI" />
    <Кнопка
        андроид: идентификатор = "@ + идентификатор / button_3"
        андроид: layout_height = "fill_parent"
        андроид: layout_width = "0dip"
        Android: layout_weight = "1"
        android: text = "JKLM" />

Вес макета 1 кнопки ширины экрана заполнения:
layout weight 1 buttons fill screen width

--

Setting different values for weightSum in the parent LinearLayout can be used to stop the buttons from filling the entire screen, but I don't think this is the path I want to take, because I don't want the buttons to occupy a large portion of the screen on large screen devices. To clarify, using weightSum, I could, for example, set the three buttons to collectively occupy half the screen width, which may look OK on small screens, but on a large screen, the buttons would still occupy half the screen width, and the buttons would simply be much larger than what I want. Perhaps the final solution will be to simply have different layout files for different screens, but I'd rather not go down this path.

<?xml version="1.0" encoding="utf-8"?>

    <Кнопка
        андроид: идентификатор = "@ + идентификатор / button_1"
        андроид: layout_height = "fill_parent"
        андроид: layout_width = "0dip"
        Android: layout_weight = "1"
        android: text = "ABCDEF" />
    <Кнопка
        андроид: идентификатор = "@ + идентификатор / button_2"
        андроид: layout_height = "fill_parent"
        андроид: layout_width = "0dip"
        Android: layout_weight = "1"
        android: text = "GHI" />
    <Кнопка
        андроид: идентификатор = "@ + идентификатор / button_3"
        андроид: layout_height = "fill_parent"
        андроид: layout_width = "0dip"
        Android: layout_weight = "1"
        android: text = "JKLM" />

Весовая сумма 5 маленький экран:
Весовая сумма 5, маленький экран

вес сумма 5 большой экран:
большой вес 5 большой экран

-

Я также много чего перепробовал с TableLayout, но не получил ничего лучше, чем просто использование LinearLayout.

GridView очень неудобен в использовании, и я еще не пробовал.

Итак, как создать кнопки с одинаковой шириной, желательно, чтобы они были настолько широкими, насколько это необходимо для размещения содержимого кнопки с самой длинной меткой?

Любой совет приветствуется.

(Я искал и обнаруживал, что этот вопрос задавался и отвечал много раз, но ни один из найденных ответов не помог мне.)

Ответы [ 7 ]

5 голосов
/ 28 марта 2011

Возможно, окончательным решением будет просто иметь разные файлы макетов для разных экранов, но я бы не стал идти по этому пути.

Многие программисты будут использовать res/layout/ и res/layout-large/ для обработки подобных ситуаций. В ограниченном случае трех кнопок у вас могут быть альтернативы, но обычно пользовательские интерфейсы не настолько просты.

Итак, как создать кнопки с одинаковой шириной, желательно, чтобы они были настолько широкими, насколько это необходимо для размещения содержимого кнопки с самой длинной меткой?

Чтобы выполнить ваше «предпочтительное» [sic] требование, вам необходимо создать собственный класс макета для этого. Вот один связанный с ним , для шаблона приборной панели, который вы можете использовать в качестве отправной точки.

3 голосов
/ 19 июня 2012

Если вы заранее знаете, какой будет самый широкий текст кнопок, вы можете использовать атрибут 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" />

Это не идеально, но я нашел самый простой способ добиться этого без бесконечной работы с макетами.

0 голосов
/ 27 декабря 2018

Держите отдельные кнопки под собственным 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>
0 голосов
/ 16 октября 2015

Используйте этот правильный код, это вам поможет.

<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" />

0 голосов
/ 16 июля 2014

Только одна дополнительная заметка с моей стороны!

Если вам нужно будет установить ширину (или высоту) для кнопок (или любых других представлений с простым изменением кода), которые добавляются во время выполнения,Вы можете использовать код ниже (он не зависит от ориентации):

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 - некоторый макет, содержащий другой макет счто нужно выровнять (v.getChildAt(0);) и прочее (v.getChildAt(1);).

LinearLayout v = (LinearLayout) llModules.getChildAt (i); - получить расположение кнопок для выравнивания.

Остальные части понятны.

Два цикла в этом коде совершенно идентичны, но я до сих пор не представляю, как их объединить (чтобы ускорить время выполнения).

0 голосов
/ 22 мая 2012

Читая эту ветку, затем делая проб и ошибок и замечая, что 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>
0 голосов
/ 27 апреля 2012

использовать класс фрагмента панели инструментов

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...