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


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.