Bagaimana cara membuat tata letak dengan View mengisi ruang yang tersisa?


188

Saya sedang merancang UI aplikasi saya. Saya perlu tata letak seperti ini:

Contoh tata letak yang diinginkan

(<dan> adalah Tombol). Masalahnya adalah, saya tidak tahu bagaimana memastikan TextView akan mengisi ruang yang tersisa, dengan dua tombol memiliki ukuran tetap.

Jika saya menggunakan fill_parent untuk Tampilan Teks, tombol kedua (>) tidak dapat ditampilkan.

Bagaimana saya bisa membuat tata letak yang terlihat seperti gambar?


apa yang Anda gunakan sebagai tata letak root?
woodshy

1
@ Woodshy Layout apa pun tidak apa-apa,
Luke Vo

Jawaban:


213

Jawaban dari woodshy bekerja untuk saya, dan itu lebih sederhana daripada jawaban oleh Ungureanu Liviu karena tidak digunakan RelativeLayout. Saya memberikan tata letak untuk kejelasan:

<LinearLayout 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      >

     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
     <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>   
 </LinearLayout>

Ada sesuatu seperti alignLeftdan alignParentLeft, dll, yang tidak pernah dapat dicapai dengan LinearLayout.
IcyFlame

Saya tidak sepenuhnya mengerti bagaimana ini mungkin tetapi itu adalah trik yang sangat keren untuk menghindari RelativeLayout
a.dibacco

2
Bagaimana ini bisa menjadi jawaban yang diterima? Tidak ada tampilan gambar, itu hanya bagian dari solusi. Setidaknya itu lebih baik daripada jawaban yang dipilih orang tua dengan Layout Relatif (saya jelaskan mengapa dalam jawaban saya)
Livio

solusi jenius
Mohammad Elsayed

92

Jika <TEXT VIEW> ditempatkan di LinearLayout, atur proprty Layout_weight dari <dan> ke 0 dan 1 untuk TextView.
Dalam kasus RelativeLayout menyelaraskan <dan> ke kiri dan ke kanan dan mengatur "Layout ke kiri" dan "Layout ke kanan" properti TextView ke id dari <dan>


Adakah yang masih membutuhkan sampel?
woodshy

Bagaimana cara menambahkan gambar dalam tata letak ini untuk mengisi seluruh tampilan
Tushar Pandey

bagaimana Anda akan menambahkan gambar di dalam tata letak relatif, untuk mengisi seluruh tampilan
Tushar Pandey

4
@ Woodshy ya sampel masih akan membantu
Frank Schwieterman

Lihatlah jawaban Vivek Pandey sebagai contoh
MyDogTom

71

Jika Anda menggunakan RelativeLayout, Anda bisa melakukannya seperti ini:

<RelativeLayout
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent">
    <ImageView
        android:id = "@+id/my_image"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentTop ="true" />
    <RelativeLayout
        android:id="@+id/layout_bottom"
        android:layout_width="fill_parent"
        android:layout_height = "50dp"
        android:layout_alignParentBottom = "true">
        <Button
            android:id = "@+id/but_left"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&lt;"
            android:layout_alignParentLeft = "true"/>
        <TextView
            android:layout_width = "fill_parent"
            android:layout_height = "wrap_content"
            android:layout_toLeftOf = "@+id/but_right"
            android:layout_toRightOf = "@id/but_left" />
        <Button
            android:id = "@id/but_right"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&gt;"
            android:layout_alignParentRight = "true"/>
    </RelativeLayout>
</RelativeLayout>

Terima kasih, itu bekerja :) Tapi saya tidak mengerti. Mengapa TextView tidak mengisi semua ruang, bukan untuk >tombol?
Luke Vo

2
Mengapa memiliki dua tata letak relatif bersarang? Akar harus cukup. Kemudian, yang perlu Anda lakukan adalah memastikan bahwa anak-anak dari tata letak relatif bawah semuanya alignParentBottom = "true"
Noel

@ Noel Kamu benar. Saya memilih 2 tata letak karena ini adalah cara saya digunakan: dalam aplikasi saya dapat terjadi bahwa saya perlu mengubah visibilitas beberapa tampilan dan lebih mudah untuk menempatkan semuanya dalam tata letak dan mengubah visibilitas hanya untuk tata letak ini . Contoh saya tidak sempurna tetapi berfungsi dan mungkin bermanfaat bagi seseorang.
Ungureanu Liviu

1
@WN Ini aneh bagi saya juga :) Saya pikir textview tidak menggunakan semua ruang karena tombol kanan memiliki lebar tetap. Jika Anda mengubah android: layout_width = "80dp" ke android: layout_width = "wrap_content" untuk tombol kanan ini akan berfungsi.
Ungureanu Liviu

2
Jawaban ini sangat buruk! Anda harus menghindari bersarang 2 tata letak relatif karena tata letak relatif selalu membuat 2 pass untuk menggambar (terhadap 1 untuk jenis tata letak lain) Menjadi eksponensial saat Anda membuat sarang. Anda harus menggunakan tata letak linier dengan lebar = 0 dan berat = 1 pada elemen yang Anda ingin isi ruang yang tersisa. Ingat: gunakan tata letak relatif SAJA ketika Anda tidak punya pilihan lain. stackoverflow.com/questions/4069037/…
Livio

30

Menggunakan ConstraintLayout, saya menemukan sesuatu seperti

<Button
    android:id="@+id/left_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&lt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/left_button"
    app:layout_constraintRight_toLeftOf="@+id/right_button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/right_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&gt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

bekerja. Kuncinya adalah mengatur batas tepi kanan, kiri, atas, dan bawah secara tepat, kemudian mengatur lebar dan tinggi ke 0dpdan membiarkannya mengetahui ukurannya sendiri.


4
Baru mulai menggunakan ConstraintLayout, senang mengetahui bahwa lebar dan tinggi dapat ditentukan oleh batasan saat mengaturnya ke "0", Thanx untuk itu :)
MQoder

Penting untuk berhati-hati tentang arah panah dari setiap kendala. Pastikan TextViewmemiliki kendala kiri dan kanan. Tidak TextViewmeregang jika yang pertama Buttonmemiliki kendala kanan ke TextViewdan yang terakhir Buttonmemiliki kendala kiri ke TextView.
Manuel

jauh lebih baik! meningkatkan kinerja dengan tidak memiliki tata letak bersarang. Terima kasih telah mengingatkan kami tentang trik
0dp

7

Sederhana Anda mengatur minWidth atau minHeight, tergantung pada apa yang Anda cari, horizontal atau vertikal. Dan untuk objek lain (yang ingin Anda isi sisa ruang) Anda menetapkan bobot 1 (mengatur lebar untuk membungkus konten itu), Jadi itu akan mengisi seluruh area.

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center|left"
        android:orientation="vertical" >
</LinearLayout>
<LinearLayout
        android:layout_width="80dp"
        android:layout_height="fill_parent"
        android:minWidth="80dp" >
</LinearLayout>

4

Anda dapat menggunakan atribut layout_weight tinggi. Di bawah ini Anda dapat melihat tata letak tempat ListView mengambil semua ruang kosong dengan tombol di bagian bawah:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".ConfigurationActivity"
    android:orientation="vertical"
    >

        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1000"
            />


        <Button
            android:id="@+id/btnCreateNewRule"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Create New Rule" />



        <Button
            android:id="@+id/btnConfigureOk"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ok" />


</LinearLayout>

3

Bagi mereka yang memiliki kesalahan yang sama dengan yang <LinearLayout...>saya lakukan:

Penting untuk menentukan android:layout_width="fill_parent", itu tidak akan bekerja dengan wrap_content.

OTOH, Anda dapat menghilangkan android:layout_weight = "0", itu tidak diperlukan.

Kode saya pada dasarnya sama dengan kode di https://stackoverflow.com/a/25781167/755804 (oleh Vivek Pandey)


3

Anda harus menghindari bersarang 2 tata letak relatif karena tata letak relatif selalu membuat 2 pass untuk menggambar (terhadap 1 untuk jenis tata letak lainnya). Menjadi eksponensial saat Anda membuat sarang. Anda harus menggunakan tata letak linier dengan lebar = 0 dan berat = 1 pada elemen yang Anda ingin isi ruang yang tersisa. Jawaban ini lebih baik untuk kinerja dan praktik. Ingat: gunakan tata letak relatif SAJA ketika Anda tidak punya pilihan lain.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/prev_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&lt;" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:singleLine="true"
            android:gravity="center"
            android:text="TextView" />

        <Button
            android:id="@+id/next_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&gt;" />
    </LinearLayout>
</LinearLayout>

0

Anda dapat menggunakan set the layout_widthatau layout_widthto 0dp(Dengan orientasi Anda ingin mengisi sisa ruang) Kemudian gunakan layout_weightuntuk membuatnya mengisi ruang yang tersisa.


0

gunakan Relativelayout untuk membungkus LinearLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:round="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
    <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>

</LinearLayout>

</RelativeLayout>`

0

saya menemukan

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginEnd="10dp"
        android:fontFamily="casual"
        android:text="(By Zeus B0t)"
     ``   android:textSize="10sp"
        android:gravity="bottom"
        android:textStyle="italic" />

0

Saat menggunakan tata letak relatif, Anda dapat membuat peregangan tampilan dengan menambatkannya ke kedua tampilan yang seharusnya melebar. Meskipun ketinggian yang ditentukan akan diabaikan, Android masih memerlukan atribut ketinggian, itulah sebabnya saya menulis "0dp". Contoh:

<View
    android:id="@+id/topView"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="8dp"/>

<View
    android:id="@+id/stretchableView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_below="@id/topView"
    android:layout_above="@+id/bottomView"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:adjustViewBounds="true"/>

<View
    android:id="@id/bottomView"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="16dp"/>
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.