Відсоткова ширина у відносному макеті

Я працюю над формою форми для входу Activityу свій додаток для Android. На зображенні нижче, як я хочу, щоб це виглядало:

Мені вдалося досягти цієї верстки за допомогою наступного XML . Проблема в тому, що це трохи хакіт. Мені довелося жорстко кодувати ширину для хосту EditText. Зокрема, мені довелося вказати:

android:layout_width="172dp" 

Я дуже хотів би надати процентну ширину хосту та порту EditText. (Щось на зразок 80% для хоста, 20% для порту.) Це можливо? Наступний XML працює на моєму Droid, але, здається, він не працює на всіх екранах. Мені б дуже хотілося більш надійного рішення.

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

Ви шукаєте android:layout_weightатрибут. Це дозволить використовувати відсотки для визначення вашого макета.

У наступному прикладі ліва кнопка займає 70% місця, а права кнопка - 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>

Він працює однаково з будь-яким видом перегляду, ви можете замінити кнопки на деякі EditText, щоб відповідати вашим потребам.

Обов'язково встановіть layout_widthна 0dpабо ваші погляди не можуть масштабироваться належним чином .

Зауважте, що сума ваги не повинна дорівнювати 1, мені просто легше читати так. Ви можете встановити першу вагу на 7, а другу на 3, і це дасть такий же результат.

Це не зовсім відповідає початковому запитанню, яке стосувалося розколу 70/30, але в спеціальному випадку розбиття 50/50 між компонентами є спосіб: розмістити невидиму опору в центрі і використовувати її для позиціонування дві складові інтерес.

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

Оскільки це досить поширений випадок, це рішення є більш ніж цікавістю. Це трохи хак, але ефективний, тому що порожня, нульова стійка повинна коштувати дуже мало.

В цілому, однак, краще не чекати занадто багато від запасних макетів Android ...

Оновлення 1

Як вказує @EmJiHash, PercentRelativeLayout застарілий на рівні API 26.0.0

Нижче цитується коментар google:

Цей клас був застарілий на рівні API 26.0.0. подумайте про використання цього ConstraintLayout та пов’язаних з ними макетів. Далі показано, як тиражувати функціональність макетів відсотків за допомогою ConstraintLayout

Google представив новий API під назвою android.support.percent

Тоді ви можете просто вказати відсоток для перегляду

Додайте залежність компіляції, як

implementation 'com.android.support:percent:22.2.0

в цьому PercentRelativeLayout - це те, що ми можемо зробити у відсотках мудрому макеті

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

Ви не можете використовувати відсотки для визначення розмірів представлення всередині RelativeLayout. Найкращі способи це зробити - це використовувати LinearLayout і ваги, або власну макет.

Ви можете ознайомитися з новою бібліотекою підтримки відсотків.

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

док

зразок

Ви можете використовувати PercentRelativeLayout. Це недавнє недокументоване доповнення до бібліотеки підтримки підтримки дизайну , дає можливість задавати не лише елементи відносно один одного, але й загальний відсоток наявного простору.

Підклас RelativeLayout, який підтримує розміри та поля на основі відсотків. Ви можете вказати розмір або поле дитини, використовуючи атрибути з суфіксом "Відсоток".

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

Пакет "Відсотки" надає API для підтримки додавання та керування розмірами на основі відсотків у вашому додатку.

Для використання вам потрібно додати цю бібліотеку до списку залежностей від Gradle :

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

Я вирішив це, створивши нестандартний вид:

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

Це невидима стійка, яку я можу використовувати для вирівнювання інших поглядів у RelativeLayout.

Оновлення

Як вказує @EmJiHash PercentRelativeLayout та PercentFrameLayout застаріли на рівні API 26.0.0

Подумайте про використання ConstraintLayout

Google представив новий API під назвою android.support.percent

1) Відсоткова відносна схема

2) Макет вибору PercentFrame

Додайте залежність компіляції, як

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

Ви можете вказати розмірність у відсотках, щоб отримати як користь, так RelativeLayoutі відсоток

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

Оскільки PercentRelativeLayout був застарілим у 26.0.0, а вкладені макети, як LinearLayout всередині RelativeLayout, негативно впливають на продуктивність ( розуміння переваг продуктивності ConstraintLayout ), найкращим варіантом для досягнення процентної ширини є заміна вашого RelativeLayout на ConstraintLayout.

Це можна вирішити двома способами.

РІШЕННЯ №1 Використання вказівок із відсотковим зміщенням

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

РІШЕННЯ №2 Використання ланцюга із зваженою шириною для 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>

В обох випадках ви отримуєте щось подібне

PercentRelativeLayout застарілий з Бібліотеки підтримки версії 26.0.0.

Google представив новий макет під назвою ConstraintLayout .

Додайте бібліотеку як залежність у файл build.gradle на рівні модуля:

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

просто додайте у файл макета:

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

Обмеження

Обмеження допомагають вам віджети вирівняти. Для визначення правил вирівнювання між різними віджетами можна використовувати якорі, такі як ручки обмеження, показані нижче.

1. Wrap Content: Погляд розширюється за необхідності, щоб відповідати його вмісту.
2. Match Constraints: Погляд розширюється у міру необхідності, щоб відповідати визначенню його обмежень після обліку маржі. Однак якщо даний параметр має лише одне обмеження, то подання розширюється відповідно до його змісту. Використання цього режиму або по висоті, або по ширині також дозволяє встановити співвідношення розмірів.
3. Fixed: Ви вказуєте певний вимір у текстовому полі нижче або шляхом зміни розміру представлення в редакторі.
4. Spread: Перегляди розподілені рівномірно (після врахування поля). Це за замовчуванням.
5. Spread inside: Перший і останній вид накладаються на обмеження на кожному кінці ланцюга, а решта розподіляються рівномірно.
6. Weighted: Коли ланцюжок встановлений або розтікається, або поширюється всередині, ви можете заповнити залишок місця, встановивши один або кілька представлень на "відповідні обмеження" (0dp). За замовчуванням простір розподіляється рівномірно між кожним представленням, встановленим на "відповідність обмеженням", але ви можете присвоїти важливість кожному виду за допомогою атрибутів layout_constraintHorizontal_weight та layout_constraintVertical_weight. Якщо ви знайомі з layout_weight в лінійному макеті, це працює так само. Тож вид із найвищим значенням ваги отримує найбільшу кількість місця; погляди з однаковою вагою отримують однакову кількість місця.
7. Packed: Перегляди упаковані разом (після врахування поля). Потім ви можете відрегулювати зміщення цілої ланцюга (вліво / вправо або вгору / вниз), змінивши ухил виду голови ланцюга.
8. Center Horizontally or Center Vertically: Щоб швидко створити ланцюжок поглядів, виберіть їх усі, клацніть правою кнопкою миші одне із представлених представлень, а потім виберіть або По центру по горизонталі, або по центру по вертикалі, щоб створити горизонтальну або вертикальну ланцюжок
9. Baseline alignment: Вирівняйте базову лінію тексту подання до базової лінії тексту іншого представлення.
10. Constrain to a guideline: Ви можете додати вертикальну або горизонтальну орієнтир, на який ви можете обмежувати погляди, і керівництво буде непомітним для користувачів додатків. Ви можете розмістити орієнтир у макеті на основі одиниць dp або відсотків відносно краю макета.
11. Adjust the constraint bias: Якщо ви додаєте обмеження для обох сторін подання (а розмір перегляду для одного і того ж виміру або "фіксований", або "вміст загортання"), погляд перетворюється в центри між двома обмеженнями, з ухилом 50% за замовчуванням. Ви можете налаштувати зміщення, перетягнувши повзунок зміщення у вікні властивостей
12. Set size as a ratio: Ви можете встановити розмір перегляду в такому співвідношенні, як 16: 9, якщо принаймні один з розмірів перегляду встановлений на "відповідні обмеження" (0dp).

Ви можете дізнатися більше від офіційного документа .

Ви можете досягти цього за допомогою ваг макета. Вага диктує, як розділяються незатребувані частини екрана. Надайте кожному EditText макет_ шириною 0 та деякою пропорційною вагою. Тобто, дайте одному вагу 2, а другому вагою 1, якщо ви хочете, щоб перший займав вдвічі більше місця.

Цікаво, що спираючись на відповідь @olefevre, можна робити не лише 50/50 макетів з "невидимими підкосами", але і всілякі макети, що передбачають сили двох.

Наприклад, ось макет, який розрізає ширину на чотири рівні частини (фактично три, з вагами 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>

Просто покладіть свої два перегляду текстових хостів і портів в незалежний лінійний розміщення горизонталі та використовуйте android: layout_weight, щоб скласти відсоток

Перевірте https://github.com/mmin18/FlexLayout, у якому ви можете використовувати вираження відсотків або java безпосередньо в макеті 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"/>