чи можна рівномірно розподілити кнопки по ширині лінійного андроїда


247

У мене лінійний макет (орієнтований горизонтально), який містить 3 кнопки. Я хочу, щоб 3 кнопки мали фіксовану ширину і були рівномірно розподілені по ширині лінійного макета.

Я можу керувати цим, встановивши силу тяжіння лінійного розміщення на центр, а потім відрегулювавши накладку кнопок, але це працює на фіксовану ширину і не буде працювати для зміни пристроїв чи орієнтацій.

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


Відповіді:


339

Розвиваючи відповідь fedj ігрового , якщо ви встановите layout_widthна 0dpі встановити layout_weightдля кожного з кнопок 1, наявна ширина буде розділена порівну між кнопками.


81
Щоб розширити це, якщо ви не хочете, щоб ширина кнопок становила 1/3 екрана, загортайте кожну кнопку в LinearLayout і встановіть layout_width = "0dp" та layout_weight = "1" на 3 LinearLayouts. Крім того, встановіть гравітацію на LinearLayouts на "центр", щоб кнопки вирівнялися в центрі кожного LinearLayout.
— Андрій

це стосується тільки linearlayout.може хто-небудь дати будь-яку ідею для зрівняння у відносному
— розкладі

1
У моєму випадку я використовую layout_width = "wrap_content" і лише з layout_weight = "1" працює добре!
— StefanoM5

Це не вірно, як хоче встановити ОП. Дивіться відповідь stoefln.
— Mitulát báti

228

Якщо ви не хочете, щоб кнопки масштабувались, але відрегулювали інтервал між кнопками (рівний проміжок між усіма кнопками), ви можете використовувати представлення з вагою = "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
Це, безумовно, найпростіший, найнижчий накладний метод, який працює (у випадку, коли ви хочете, щоб простір між видами масштабувався, а не самі погляди). Я використовую його вертикально, і так просто поміняв значення ширини та висоти. Дякую.
— Саміс

7
Це елегантне рішення. Ви можете скористатися Spaceтипом перегляду. Робить речі трохи читабельнішими.
— Ryan R

2
Райан, так, це якщо ви використовуєте API 14+ (як слід).
— Едуардо Наведа

Чесно кажучи, я подумав, що це не спрацює, якщо мати 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

Ви можете зробити це, даючи як Viewса layout_widthз 0dpі layout_weightз 1:

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

Спосіб андроїд layout_weight працює таким:

  • по-перше, він дивиться на розмір, який зазвичай надає Перегляд, і резервує цей простір.
  • по-друге, якщо макет є, match_parentто він розділить простір, який залишився у співвідношенні layout_weights. Таким чином, якщо ви надали Перегляди layout_weight="2"і layout_weight="1", отримане співвідношення буде 2 до 1, тобто перший вигляд отримає 2/3 залишкового простору, а другий вид 1/3.

Тож тому, якщо ви надаєте layout_widthрозмір, 0dpперший крок не має додаткового значення, оскільки обом представленням не призначено пробілу. Тоді лише друга точка визначає простір, який Viewотримує кожен , таким чином надаючи Views простір, який ви вказали відповідно до співвідношення!

Пояснити, чому 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для середньої кнопки.

Це буде добре працювати в різних орієнтаціях та розмірах екрана.


Для уточнення це не працює, якщо у вас більше трьох кнопок.
— арломедія

Саме так. Вам доведеться використовувати LinearLayout або RadioGroup (якщо це можливо).
— marsbear

11

Слід поглянути на атрибут android: layout_weight


1
Я розумів, що атрибут layout_weight розтягне розмір кнопки, щоб заповнити макет. Я хочу, щоб розмір кнопок був постійним і просто збільшував накладку між кнопками.
— ямспог

Ах! Я насправді не знаю найкращого способу це зробити. Можливо, уклавши кожну кнопку в макет. 3 макета з атрибутом layout_weight та кнопкою, орієнтованою на макеті. Але я дійсно не знаю, чи це найкращий спосіб зробити це.
— fedj

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", і кнопки були добре центровані, коли в FlexBox було помічено 1 або 3
— Хтось десь

4

Для рівномірного розміщення двох кнопок у горизонтальному лінійному макеті я використовував 3 об’єкти LinearLayout, щоб діяти як пробіли, які будуть автоматично змінені. Я розміщував ці об'єкти LinearLayout таким чином:

[] Кнопка1 [] Кнопка2 []

([] являє собою об'єкт LinearLayout, який використовується для інтервалу)

то я встановлюю кожну з цих ваг [] LinearLayout ваг на 1, і я отримую рівномірно розташовані кнопки.

Сподіваюсь, це допомагає.



4

Я пропоную вам скористатися атрибутом weightSum LinearLayout.

Якщо додати тег android:weightSum="3"до xml декларації LinearLayout, а потім android:layout_weight="1"до кнопок, це призведе до рівномірного розподілу 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_did не працювали для мене, але наступне.

<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_widthі android:layout_heightповинні бути рівними "match_parent"...


Спасибі тонна товариш! Економили багато часу.
— Xonshiz

1
Немає проблемних товаришів.
— Гібран Кастільо

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 сантиметри. Якщо ви хочете, щоб це був сенсорний екран, розмістіть його як Том і Тім, вважаючи, що вони становлять 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" />


0

Найпростіший і найшвидший спосіб (але не найкращий) - додати TextView з порожнім текстовим атрибутом, як цей

android:text=""

колір тла повинен бути однаковим у LinearLayout, тоді ви можете використовувати властивість набивання, як це

android:paddingBottom="250dp"

або все, що вам потрібно. Ось приклад.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.