Подтвердить что ты не робот

Как создать кнопки с равными ширинами?

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

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

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

-

Установка 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 кнопка заполняет ширину экрана:
layout weight 1 buttons fill screen width

-

Установка различных значений для weightSum в родительском LinearLayout может использоваться, чтобы остановить кнопки от заполнения всего экрана, но я не думаю, что это путь, который я хочу принять, потому что я не хочу, чтобы кнопки занимали большая часть экрана на устройствах с большим экраном. Чтобы уточнить, используя 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 маленьких экранов:
weight sum 5 small screen

весовая сумма 5 больших экранов:
weight sum 5 large screen

-

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

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

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

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

(Я искал и задавал этот вопрос и отвечал много раз, но ни один из ответов, которые я нашел, не разрешил то, что я пытаюсь достичь.)

4b9b3361

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 4

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

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

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); - получить расположение кнопок для выравнивания.

Другие части понятны.

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

Ответ 5

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

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

Ответ 6

Чтение этого потока, а затем выполнение пробной ошибки и заметили, что 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>