Persentase lebar dalam RelativeLayout

Saya sedang mengerjakan tata letak formulir untuk Login Activitydi Aplikasi Android saya. Gambar di bawah ini adalah bagaimana saya ingin terlihat seperti:

Saya dapat mencapai tata letak ini dengan XML berikut . Masalahnya adalah, ini sedikit meretas. Saya harus membuat hard-code lebar untuk host EditText. Secara khusus, saya harus menentukan:

android:layout_width="172dp" 

Saya benar-benar ingin memberikan lebar persentase ke host dan port EditText. (Sesuatu seperti 80% untuk host, 20% untuk port.) Apakah ini mungkin? XML berikut berfungsi pada Droid saya, tetapi tampaknya tidak berfungsi untuk semua layar. Saya ingin solusi yang lebih kuat.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:paddingLeft="15dp"
        android:paddingTop="0dp"
        android:text="host"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:layout_toRightOf="@+id/host_input"
        android:paddingTop="0dp"
        android:text="port"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="172dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginTop="4dp"
        android:layout_toRightOf="@id/host_input"
        android:background="@android:drawable/editbox_background"
        android:inputType="number" />

    <TextView
        android:id="@+id/username_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/host_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="username"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/username_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <TextView
        android:id="@+id/password_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/username_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="password"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textPassword" />

    <ImageView
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="false"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="15dp"
        android:scaleType="fitStart"
        android:src="@drawable/home" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:text="   login   "
        android:textSize="18sp" >
    </Button>

</RelativeLayout>

Anda sedang mencari android:layout_weight atribut. Ini akan memungkinkan Anda untuk menggunakan persentase untuk menentukan tata letak Anda.

Pada contoh berikut, tombol kiri menggunakan 70% dari ruang, dan tombol kanan 30%.

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

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".30" />

</LinearLayout>

Ini berfungsi sama dengan segala jenis Tampilan, Anda dapat mengganti tombol dengan beberapa EditText yang sesuai dengan kebutuhan Anda.

Pastikan untuk mengatur layout_widthke 0dpatau tampilan Anda mungkin tidak diskalakan dengan benar.

Perhatikan bahwa jumlah bobot tidak harus sama dengan 1, saya hanya merasa lebih mudah dibaca seperti ini. Anda dapat mengatur bobot pertama menjadi 7 dan yang kedua menjadi 3 dan itu akan memberikan hasil yang sama.

Ini tidak cukup menjawab pertanyaan awal, yaitu untuk pemisahan 70/30, tetapi dalam kasus khusus pemisahan 50/50 antara komponen ada cara: letakkan penyangga tidak terlihat di tengah dan gunakan untuk menempatkan posisi dua komponen yang menarik.

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:text="Left"/> 
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:text="Right"/>
</RelativeLayout>

Karena ini adalah kasus yang cukup umum, solusi ini lebih dari sekadar rasa ingin tahu. Ini sedikit hack tetapi efisien karena strut yang kosong dan berukuran nol harus sangat murah.

Namun secara umum, yang terbaik adalah jangan berharap terlalu banyak dari layout Android stock ...

Perbarui 1

Seperti yang ditunjukkan oleh @EmJiHash PercentRelativeLayout tidak digunakan lagi di API level 26.0.0

Di bawah ini mengutip komentar google:

Kelas ini sudah tidak digunakan lagi di API level 26.0.0. pertimbangkan untuk menggunakan ConstraintLayout dan tata letak terkait sebagai gantinya. Berikut ini menunjukkan cara mereplikasi fungsi tata letak persentase dengan ConstraintLayout

Google memperkenalkan API baru bernama android.support.percent

Kemudian Anda bisa menentukan persentase untuk dilihat

Tambahkan kompilasi seperti ketergantungan

implementation 'com.android.support:percent:22.2.0

dalam hal itu, PercentRelativeLayout adalah apa yang dapat kita lakukan dengan tata letak yang bijaksana

 <android.support.percent.PercentRelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

Anda tidak dapat menggunakan persentase untuk menentukan dimensi Tampilan di dalam RelativeLayout. Cara terbaik untuk melakukannya adalah dengan menggunakan LinearLayout dan bobot, atau Tata Letak khusus.

Anda dapat melihat di perpustakaan dukungan persen yang baru.

compile 'com.android.support:percent:22.2.0'

docs

Sampel

Anda dapat menggunakan PercentRelativeLayout , Ini adalah tambahan tidak berdokumen baru-baru ini ke Perpustakaan Dukungan Desain , memungkinkan kemampuan untuk menentukan tidak hanya elemen relatif satu sama lain tetapi juga persentase total ruang yang tersedia.

Subkelas RelativeLayout yang mendukung dimensi dan margin berdasarkan persentase. Anda dapat menentukan dimensi atau margin anak dengan menggunakan atribut dengan akhiran "Persen".

<android.support.percent.PercentRelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
  <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_widthPercent="50%"
      app:layout_heightPercent="50%"
      app:layout_marginTopPercent="25%"
      app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentFrameLayout>

Paket Persen menyediakan API untuk mendukung penambahan dan pengelolaan dimensi berbasis persentase di aplikasi Anda.

Untuk menggunakannya, Anda perlu menambahkan perpustakaan ini ke daftar dependensi Gradle Anda :

dependencies {
    compile 'com.android.support:percent:22.2.0'//23.1.1
}

Saya telah memecahkan ini dengan membuat Tampilan khusus:

public class FractionalSizeView extends View {
  public FractionalSizeView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public FractionalSizeView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width * 70 / 100, 0);
  }
}

Ini adalah strut tak terlihat yang bisa saya gunakan untuk menyelaraskan tampilan lain di dalam RelativeLayout.

Memperbarui

Seperti yang ditunjukkan oleh @EmJiHash PercentRelativeLayout dan PercentFrameLayout tidak digunakan lagi di API level 26.0.0

Pertimbangkan Menggunakan ConstraintLayout

Google memperkenalkan API baru bernama android.support.percent

1) PercentRelativeLayout

2) PercentFrameLayout

Tambahkan kompilasi seperti ketergantungan

compile 'com.android.support:percent:23.1.1'

Anda dapat menentukan dimensi dalam persentase sehingga mendapatkan manfaat RelativeLayoutdan persentase

 <android.support.percent.PercentRelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

Karena PercentRelativeLayout tidak digunakan lagi dalam 26.0.0 dan tata letak bersarang seperti LinearLayout di dalam RelativeLayout memiliki dampak negatif pada kinerja ( Memahami manfaat kinerja dari ConstraintLayout ) pilihan terbaik bagi Anda untuk mencapai lebar persentase adalah dengan mengganti RelativeLayout Anda dengan ConstraintLayout.

Ini bisa diselesaikan dengan dua cara.

SOLUSI # 1 Menggunakan pedoman dengan persentase offset

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

</android.support.constraint.ConstraintLayout>

SOLUSI # 2 Menggunakan rantai dengan lebar tertimbang untuk EditText

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintHorizontal_weight="0.8"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintHorizontal_weight="0.2"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toRightOf="@+id/host_input"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

Dalam kedua kasus, Anda mendapatkan sesuatu seperti ini

PercentRelativeLayout sudah usang dari Revisi 26.0.0 dari Perpustakaan dukungan.

Google memperkenalkan Layout baru yang disebut ConstraintLayout .

Tambahkan pustaka sebagai dependensi dalam file build.gradle tingkat modul Anda:

     dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.1'
      }

cukup tambahkan file tata letak:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.constraint.ConstraintLayout>

Kendala

Kendala membantu Anda menjaga agar widget tetap selaras. Anda dapat menggunakan jangkar, seperti pegangan kendala yang ditunjukkan di bawah, untuk menentukan aturan penyelarasan antara berbagai widget.

1. Wrap Content: Tampilan meluas sesuai kebutuhan agar sesuai dengan isinya.
2. Match Constraints: Pandangan meluas sesuai kebutuhan untuk memenuhi definisi kendala setelah memperhitungkan margin. Namun, jika dimensi yang diberikan hanya memiliki satu kendala, maka tampilan meluas agar sesuai dengan isinya. Menggunakan mode ini pada ketinggian atau lebar juga memungkinkan Anda untuk mengatur rasio ukuran.
3. Fixed: Anda menentukan dimensi tertentu dalam kotak teks di bawah ini atau dengan mengubah ukuran tampilan di editor.
4. Spread: Pandangan didistribusikan secara merata (setelah margin diperhitungkan). Ini standarnya.
5. Spread inside: Tampilan pertama dan terakhir ditempelkan pada batasan di setiap ujung rantai dan sisanya didistribusikan secara merata.
6. Weighted: Ketika rantai diatur untuk menyebar atau menyebar di dalam, Anda dapat mengisi ruang yang tersisa dengan mengatur satu atau lebih tampilan untuk "cocok dengan kendala" (0dp). Secara default, ruang didistribusikan secara merata di antara setiap tampilan yang diatur ke "cocok dengan batasan," tetapi Anda dapat memberikan bobot yang penting untuk setiap tampilan menggunakan atribut layout_constraintHorizontal_weight dan layout_constraintVertical_weight. Jika Anda terbiasa dengan layout_weight dalam tata letak linier, ini bekerja dengan cara yang sama. Jadi tampilan dengan nilai bobot tertinggi mendapat ruang paling banyak; tampilan yang memiliki bobot yang sama mendapatkan jumlah ruang yang sama.
7. Packed: Tampilan dikemas bersama (setelah margin diperhitungkan). Anda kemudian dapat menyesuaikan bias seluruh rantai (kiri / kanan atau atas / bawah) dengan mengubah bias tampilan kepala rantai.
8. Center Horizontally or Center Vertically: Untuk membuat rantai pandangan dengan cepat, pilih semuanya, klik kanan salah satu tampilan, dan lalu pilih Tengah Horisontal atau Tengah Vertikal, untuk membuat rantai horizontal atau vertikal
9. Baseline alignment: Sejajarkan garis dasar teks dari tampilan dengan garis dasar teks dari tampilan lain.
10. Constrain to a guideline: Anda dapat menambahkan pedoman vertikal atau horizontal yang dapat Anda batasi tampilan, dan panduan itu tidak akan terlihat oleh pengguna aplikasi. Anda dapat memposisikan pedoman dalam tata letak berdasarkan pada unit dp atau persen, relatif terhadap tepi tata letak.
11. Adjust the constraint bias: Ketika Anda menambahkan batasan pada kedua sisi tampilan (dan ukuran tampilan untuk dimensi yang sama adalah "tetap" atau "membungkus konten"), tampilan menjadi terpusat di antara dua kendala dengan bias 50% secara default. Anda dapat menyesuaikan bias dengan menyeret slider bias di jendela Properties
12. Set size as a ratio: Anda dapat mengatur ukuran tampilan ke rasio seperti 16: 9 jika setidaknya satu dimensi tampilan diatur ke "cocok dengan kendala" (0dp).

Anda dapat belajar lebih banyak dari dokumen resmi .

Anda dapat melakukan ini melalui bobot tata letak. Bobot menentukan bagaimana bagian layar yang tidak diklaim dibagi. Berikan setiap EditText layout_width dari 0, dan bobot proporsional. Yaitu, beri satu bobot 2, dan yang lainnya seberat 1 jika Anda ingin yang pertama mengambil ruang dua kali lebih banyak.

Cukup menarik, membangun jawaban dari @olefevre, kita tidak hanya bisa melakukan 50/50 layout dengan "struts tak terlihat", tetapi semua jenis layout melibatkan kekuatan dua.

Misalnya, berikut adalah tata letak yang memotong lebar menjadi empat bagian yang sama (sebenarnya tiga, dengan bobot 1, 1, 2):

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

    <View
        android:id="@+id/strut"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="#000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/strut" >

        <View
            android:id="@+id/left_strut"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/strut"
            android:layout_centerHorizontal="true"
            android:background="#000000" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/left_strut"
            android:text="Far Left" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/left_strut"
            android:text="Near Left" />
    </RelativeLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/strut"
            android:layout_alignParentRight="true"
            android:text="Right" />

</RelativeLayout>

Cukup letakkan dua host tampilan teks dan porta di horizontal linearlayout independen dan gunakan android: layout_weight untuk membuat persentase

Periksa https://github.com/mmin18/FlexLayout yang dapat Anda gunakan persen atau ekspresi java langsung di tata letak xml.

<EditText
    app:layout_left="0%"
    app:layout_right="60%"
    app:layout_height="wrap_content"/>
<EditText
    app:layout_left="prev.right+10dp"
    app:layout_right="100%"
    app:layout_height="wrap_content"/>