apakah mungkin untuk mendistribusikan tombol secara merata di seluruh lebar linearlayout android


247

Saya memiliki tata letak linear (berorientasi horizontal) yang berisi 3 tombol. Saya ingin 3 tombol memiliki lebar tetap dan didistribusikan secara merata di seluruh lebar tata letak linier.

Saya dapat mengatur ini dengan mengatur gravitasi linearlayout ke tengah dan kemudian menyesuaikan bantalan tombol, tetapi ini berfungsi untuk lebar tetap dan tidak akan berfungsi untuk mengubah perangkat atau orientasi.

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


Jawaban:


339

Memperluas jawaban fedj , jika Anda mengatur layout_widthke 0dpdan mengatur layout_weightuntuk masing-masing tombol ke 1, lebar yang tersedia akan dibagi rata antara tombol.


81
Untuk memperluas ini, jika Anda tidak ingin lebar tombol menjadi 1/3 dari layar, bungkus setiap tombol dalam LinearLayout dan atur layout_width = "0dp" dan layout_weight = "1" pada 3 LinearLayouts. Selain itu, atur gravitasi pada LinearLayout ke "tengah" sehingga tombol akan sejajar di tengah setiap LinearLayout.
Andrew

ini adalah kasus untuk linearlayout saja. dapat ada yang memberikan ide untuk equispacing di relativelayout
user1859771

1
Dalam kasus saya, saya menggunakan layout_width = "wrap_content" dan hanya dengan layout_weight = "1" berfungsi dengan baik!
StefanoM5

Ini tidak benar karena OP ingin diperbaiki. Lihat jawaban stoefln.
Mitulát báti

228

Jika Anda tidak ingin tombol untuk skala, tetapi menyesuaikan jarak antara tombol (jarak yang sama antara semua tombol), Anda dapat menggunakan tampilan dengan weight = "1" yang akan mengisi ruang antara tombol:

    <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
Ini jelas merupakan metode overhead terendah dan paling sederhana yang bekerja (untuk kasus di mana Anda ingin ruang antara tampilan untuk skala, bukan pandangan itu sendiri). Saya menggunakannya secara vertikal, dan hanya menukar nilai lebar dan tinggi. Terima kasih.
samis

7
Ini adalah solusi yang elegan. Anda mungkin lebih suka menggunakan Spacetipe tampilan. Membuatnya lebih mudah dibaca.
Ryan R

2
Ryan, ya, itu jika Anda menggunakan API 14+ (seperti yang seharusnya).
Eduardo Naveda

Jujur, saya pikir itu tidak akan berfungsi ketika memiliki 4 tombol, tetapi bekerja dengan baik tanpa pengukuran kerepotan dan runtime. Menghormati!
Ashraf Alshahawy

Ini lebih baik daripada yang diterima sebagai jawaban saat ini.
DroidHeaven

25

Anda dapat menggunakannya dengan seperti berikut ini.

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

itu sweeet !! Saya belum pernah mendengar Spacesampai sekarang
Seseorang di suatu tempat

21

Anda dapat melakukan ini dengan memberikan baik Viewsa layout_widthdari 0dpdan layout_weightdari 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>

Cara kerja lay_weight android adalah:

  • pertama, tampilannya dengan ukuran yang biasanya diambil oleh View dan menyimpan ruang ini.
  • kedua, jika tata letaknya match_parentmaka akan membagi ruang yang tersisa dalam rasio layout_weights. Jadi jika Anda memberi Tampilan layout_weight="2"dan layout_weight="1", rasio yang dihasilkan akan 2 banding 1, yaitu: Tampilan pertama akan mendapatkan 2/3 dari ruang yang tersisa dan tampilan lainnya 1/3.

Jadi itu sebabnya jika Anda memberi layout_widthukuran 0dplangkah pertama tidak memiliki makna tambahan karena kedua Tampilan tidak diberi spasi. Maka hanya titik kedua yang menentukan ruang masing View- masing , sehingga memberikan Viewruang yang Anda tentukan sesuai dengan rasio!

Untuk menjelaskan alasannya 0dp menyebabkan ruang untuk dibagi rata dengan memberikan contoh yang menunjukkan yang sebaliknya: Kode di bawah ini akan menghasilkan sesuatu yang berbeda karena example textsekarang memiliki lebar yang lebih besar daripada 0dpkarena itu wrap_contentmalah membuat ruang kosong tersisa untuk membagi kurang dari 100% karena teks membutuhkan ruang. Hasilnya adalah bahwa mereka mendapatkan 50% dari ruang kosong yang tersisa tetapi teks sudah mengambil beberapa ruang sehingga TextViewakan memiliki lebih dari 50% dari total ruang.

<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

Nah, jika Anda memiliki tepat 3 tombol dan jika itu ok (atau bahkan direncanakan) bahwa tombol luar disejajarkan ke sisi kiri dan kanan maka Anda mungkin ingin mencoba RelativeLayout yang lebih murah (dalam banyak situasi).

Anda dapat menggunakan layout_alignParentBottomuntuk menyelaraskan semua tombol dengan bagian bawah tata letak. Gunakan layout_alignParentLeft and Rightuntuk tombol luar danlayout_centerHorizontal tombol tengah.

Itu akan bekerja dengan baik pada berbagai orientasi dan ukuran layar.


Untuk memperjelas, ini tidak berfungsi jika Anda memiliki lebih dari tiga tombol.
arlomedia

Persis. Anda harus menggunakan LinearLayout atau RadioGroup (jika ada) sebagai gantinya.
marsbear

11

Anda harus melihat ke atribut android: layout_weight


1
Itu pemahaman saya bahwa atribut layout_weight akan meregangkan ukuran tombol untuk mengisi tata letak. Saya ingin menjaga ukuran tombol konstan dan hanya menambah bantalan di antara tombol.
yamspog

Ah ! Saya tidak benar-benar tahu cara terbaik untuk melakukannya. Mungkin menutup setiap tombol dalam tata letak. Tata letak 3 dengan atribut layout_weight dan tombol berpusat di tata letak. Tetapi saya benar-benar tidak tahu apakah itu cara terbaik untuk melakukannya.
fedj

9

Solusi modern untuk ini adalah 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>

Pastikan untuk mengimpor implementation 'com.google.android:flexbox:2.0.0'

Flexboxjauh lebih kuat; itu adalah pelengkap yang baik untuk ConstraintLayout. Ini adalah sumber yang bagus untuk belajar lebih banyak.

Perbedaan antara space_around, space_between, dan space_evenly


1
terima kasih telah membuat saya (kami) menyadarinya. Sangat bermanfaat. Saya menggunakan "space_around" dan tombol-tombolnya berpusat dengan baik ketika saya memiliki 1 atau 3 terlihat di dalam FlexBox
Seseorang di suatu tempat

4

Untuk membagi dua tombol secara merata dalam tata letak linier horizontal, saya menggunakan 3 objek LinearLayout untuk bertindak sebagai ruang yang akan secara otomatis diubah ukurannya. Saya memposisikan objek LinearLayout ini sebagai berikut:

[] Tombol1 [] Tombol2 []

([] mewakili objek LinearLayout yang digunakan untuk spasi)

lalu saya mengatur masing-masing bobot objek LinearLayout ini menjadi 1, dan saya mendapatkan spasi yang sama secara merata.

Semoga ini membantu.



4

Saya sarankan Anda menggunakan atribut weightSum LinearLayout.

Menambahkan tag android:weightSum="3"ke deklarasi xml LinearLayout Anda dan kemudian android:layout_weight="1"ke Tombol Anda akan menghasilkan 3 tombol yang didistribusikan secara merata.


4

Ini dapat dicapai dengan menetapkan weightsetiap tombol yang ditambahkan di dalam wadah, sangat penting untuk menentukan orientasi horisontal:

    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);
    }

jadi kita bisa mendapatkan ini di perangkat kita sebagai hasilnya:

masukkan deskripsi gambar di sini

bahkan jika kita memutar perangkat kita, yang weightdidefinisikan di setiap tombol dapat mendistribusikan elemen secara seragam di sepanjang wadah:

masukkan deskripsi gambar di sini


3

Pendekatan terbaik adalah dengan menggunakan TableLayout dengan android: layout_width = "match_parent" dan dalam kolom menggunakan android: layout_weight = "1" untuk semua kolom


2

Jawaban di atas menggunakan layout_didn't berfungsi untuk saya, tetapi yang berikut ini berhasil.

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

Ini adalah tampilannya di layar,

masukkan deskripsi gambar di sini


2

Di atas semua jawaban itu benar tetapi jika Anda membutuhkan fitur yang terlihat dan hilang maka metode pragmatis ini akan bekerja dengan baik

<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

Sama-sama berbobot anak-anak

Untuk membuat tata letak linier di mana setiap anak menggunakan jumlah ruang yang sama di layar, atur android: layout_height dari setiap tampilan ke "0dp" (untuk tata letak vertikal) atau android: layout_width dari setiap tampilan ke "0dp" ( untuk tata letak horizontal). Kemudian atur android: layout_weight dari setiap tampilan ke "1".

Agar ini berfungsi di LinearLayoutgrup tampilan nilai atribut untuk android:layout_widthdan android:layout_heightharus sama dengan "match_parent"...


Terima kasih banyak teman! Menghemat banyak waktu.
Xonshiz

1
Tidak masalah kawan.
Gibran Castillo

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>

Dalam lingkaran, Tom, Tim, dan Todd diasumsikan 3 sentimeter. Jika Anda ingin layarnya menjadi layar sentuh, letakkan sebagai Tom dan Tim yang diasumsikan 1 sentimeter, yang berarti mereka menggabungkan virtual tetapi bidang 2D-nya ada di bagian bawah. Ini ditampilkan di layar.


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

Cara termudah dan tercepat, (tapi bukan yang terbaik), adalah menambahkan TextView dengan atribut teks kosong, seperti ini

android:text=""

warna latar harus sama di LinearLayout, maka Anda bisa menggunakan properti padding, seperti ini

android:paddingBottom="250dp"

atau apapun yang kamu butuhkan. Berikut ini sebuah contoh.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.