Szerokość procentowa w RelativeLayout

Pracuję nad układem formularza do logowania Activityw mojej aplikacji na Androida. Poniższy obraz wygląda tak, jak chcę:

Udało mi się osiągnąć ten układ za pomocą następującego kodu XML . Problem polega na tym, że jest to trochę hacking. Musiałem zakodować szerokość dla hosta EditText. W szczególności musiałem określić:

android:layout_width="172dp" 

Naprawdę chciałbym podać procentową szerokość hostowi i portowi EditText. (Coś w rodzaju 80% dla hosta, 20% dla portu.) Czy to możliwe? Poniższy kod XML działa na moim Droidie, ale nie działa na wszystkich ekranach. Naprawdę chciałbym bardziej niezawodne rozwiązanie.

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

Szukasz android:layout_weightatrybutu. Umożliwi to użycie wartości procentowych do zdefiniowania układu.

W poniższym przykładzie lewy przycisk zajmuje 70% miejsca, a prawy przycisk 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>

Działa tak samo z każdym rodzajem widoku, możesz zastąpić przyciski tekstem edycji w celu dopasowania do swoich potrzeb.

Pamiętaj, aby ustawić layout_widthsię 0dpczy twoje poglądy nie mogą być odpowiednio skalowane.

Zauważ, że suma wagi nie musi być równa 1, po prostu łatwiej mi to czytać w ten sposób. Możesz ustawić pierwszą wagę na 7, a drugą na 3, a to da ten sam wynik.

To nie do końca odpowiada pierwotne pytanie, które dotyczyło podziału 70/30, ale w szczególnym przypadku podziału 50/50 między komponentami istnieje sposób: umieść niewidoczny rozpór na środku i użyj go, aby ustawić dwa elementy będące przedmiotem zainteresowania.

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

Ponieważ jest to dość powszechny przypadek, to rozwiązanie jest czymś więcej niż ciekawością. Jest to trochę hack, ale skuteczny, ponieważ pusta rozpórka o zerowej wielkości powinna kosztować bardzo niewiele.

Ogólnie jednak najlepiej nie oczekiwać zbyt wiele od standardowych układów Androida ...

Aktualizacja 1

Jak wskazuje @EmJiHash PercentRelativeLayout jest przestarzałe na poziomie interfejsu API 26.0.0

Poniżej cytując komentarz Google:

Ta klasa została uznana za przestarzałą na poziomie API 26.0.0. rozważ użycie zamiast tego ConstraintLayout i powiązanych układów. Poniżej pokazano, jak powielić funkcjonalność układów procentowych za pomocą ConstraintLayout

Google wprowadził nowy interfejs API o nazwie android.support.percent

Następnie możesz po prostu określić procent do wyświetlenia

Dodaj zależność kompilacji jak

implementation 'com.android.support:percent:22.2.0

pod tym względem PercentRelativeLayout jest tym, co możemy zrobić w układzie procentowym

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

Nie można używać wartości procentowych do definiowania wymiarów widoku wewnątrz układu względnego. Najlepszym sposobem na to jest użycie LinearLayout i wag lub niestandardowego układu.

Możesz zajrzeć do nowej biblioteki obsługi procentowej.

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

dokumenty

próba

Możesz użyć PercentRelativeLayout , jest to niedawno nieudokumentowane uzupełnienie biblioteki wsparcia projektowania , umożliwia określenie nie tylko elementów względem siebie, ale także całkowitego procentu dostępnego miejsca.

Podklasa klasy RelativeLayout, która obsługuje wymiary i marginesy oparte na wartościach procentowych. Możesz określić wymiar lub margines dziecka, używając atrybutów z sufiksem „Procent”.

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

Pakiet procentowy udostępnia interfejsy API do obsługi dodawania procentu i zarządzania nim wymiarów w Twojej aplikacji.

Aby użyć, musisz dodać tę bibliotekę do listy zależności Gradle :

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

Rozwiązałem to, tworząc niestandardowy widok:

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

Jest to niewidoczna rozpórka, której mogę użyć do wyrównania innych widoków w RelativeLayout.

Aktualizacja

Jak wskazują @EmJiHash PercentRelativeLayout i PercentFrameLayout są przestarzałe na poziomie API 26.0.0

Rozważ użycie ConstraintLayout

Google wprowadził nowy interfejs API o nazwie android.support.percent

1) PercentRelativeLayout

2) PercentFrameLayout

Dodaj zależność kompilacji jak

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

Możesz określić wymiar w procentach, aby uzyskać korzyści RelativeLayouti procent

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

Ponieważ PercentRelativeLayout jest przestarzały w wersji 26.0.0, a układy zagnieżdżone, takie jak LinearLayout wewnątrz RelativeLayout, mają negatywny wpływ na wydajność ( Zrozumienie korzyści wydajnościowych ConstraintLayout ), najlepszą opcją osiągnięcia procentowej szerokości jest zastąpienie RelativeLayout ConstraintLayout.

Można to rozwiązać na dwa sposoby.

ROZWIĄZANIE # 1 Korzystanie z prowadnic z przesunięciem procentowym

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

ROZWIĄZANIE # 2 Używanie łańcucha o ważonej szerokości do edycji tekstu

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

W obu przypadkach dostajesz coś takiego

PercentRelativeLayout jest przestarzała w wersji 26.0.0 biblioteki wsparcia.

Google wprowadziło nowy układ o nazwie ConstraintLayout .

Dodaj bibliotekę jako zależność w pliku build.gradle na poziomie modułu:

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

wystarczy dodać w pliku układu:

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

Ograniczenia

Ograniczenia pomagają zachować wyrównanie widżetów. Możesz użyć kotwic, takich jak pokazane poniżej uchwyty wiązania, aby określić reguły wyrównania między różnymi widżetami.

1. Wrap Content: Widok rozszerza się odpowiednio do zawartości.
2. Match Constraints: Widok rozszerza się zgodnie z potrzebą, aby spełnić definicję ograniczeń po uwzględnieniu marginesów. Jeśli jednak dany wymiar ma tylko jedno ograniczenie, widok rozszerza się, aby dopasować się do jego zawartości. Korzystanie z tego trybu na wysokości lub szerokości pozwala również ustawić współczynnik wielkości.
3. Fixed: Określony wymiar określasz w polu tekstowym poniżej lub zmieniając rozmiar widoku w edytorze.
4. Spread: Widoki są równomiernie rozłożone (po uwzględnieniu marginesów). To jest domyślne.
5. Spread inside: Pierwszy i ostatni widok są przymocowane do ograniczeń na każdym końcu łańcucha, a reszta jest równomiernie rozmieszczona.
6. Weighted: Gdy łańcuch jest ustawiony na rozprzestrzenianie się lub rozszerzanie wewnątrz, możesz wypełnić pozostałe miejsce, ustawiając jeden lub więcej widoków na „dopasuj ograniczenia” (0dp). Domyślnie przestrzeń jest równomiernie rozmieszczona między każdym widokiem ustawionym na „dopasuj ograniczenia”, ale można przypisać wagę do każdego widoku za pomocą atrybutów layout_constraintHorizontal_weight i layout_constraintVertical_weight. Jeśli znasz layout_weight w układzie liniowym, działa to w ten sam sposób. Tak więc widok o najwyższej wartości masy dostaje najwięcej miejsca; widoki o tej samej wadze mają tyle samo miejsca.
7. Packed: Widoki są pakowane razem (po uwzględnieniu marginesów). Następnie można dostosować odchylenie całego łańcucha (w lewo / w prawo lub w górę / w dół), zmieniając odchylenie w widoku głowy łańcucha.
8. Center Horizontally or Center Vertically: Aby szybko utworzyć łańcuch widoków, zaznacz je wszystkie, kliknij prawym przyciskiem myszy jeden z widoków, a następnie wybierz opcję Wyśrodkuj poziomo lub Wyśrodkuj pionowo, aby utworzyć łańcuch poziomy lub pionowy
9. Baseline alignment: Wyrównaj tekstową linię bazową widoku z tekstową linią bazową innego widoku.
10. Constrain to a guideline: Możesz dodać pionową lub poziomą prowadnicę, do której możesz ograniczyć widoki, a wytyczne będą niewidoczne dla użytkowników aplikacji. Można ustawić prowadnicę w obrębie układu na podstawie jednostek dp lub procentu względem krawędzi układu.
11. Adjust the constraint bias: Po dodaniu wiązania do obu stron widoku (a rozmiar tego samego wymiaru jest „stały” lub „zawijać zawartość”), widok zostaje domyślnie wyśrodkowany między dwoma ograniczeniami z domyślnym odchyleniem 50%. Możesz dostosować odchylenie, przeciągając suwak odchylenia w oknie Właściwości
12. Set size as a ratio: Możesz ustawić rozmiar widoku na współczynnik taki jak 16: 9, jeśli przynajmniej jeden z wymiarów widoku jest ustawiony na „dopasuj ograniczenia” (0dp).

Możesz dowiedzieć się więcej z oficjalnego dokumentu .

Można to osiągnąć za pomocą wag układu. Waga decyduje o tym, jak podzielone są nieodebrane części ekranu. Nadaj każdemu EditTextowi układ o szerokości 0 i pewnej proporcjonalnej wadze. To znaczy, daj jeden ciężar 2, a drugi ciężar 1, jeśli chcesz, aby pierwszy zajął dwa razy więcej miejsca.

Co ciekawe, bazując na odpowiedzi z @olefevre, można nie tylko tworzyć układy 50/50 z „niewidzialnymi rozpórkami”, ale wszelkiego rodzaju układy zawierające potęgi dwóch.

Na przykład, tutaj jest układ, który tnie szerokość na cztery równe części (właściwie trzy, o wadze 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>

Po prostu umieść hosta i port dwóch widoków tekstowych w niezależnej linii liniowej i użyj Androida: layout_weight, aby ustawić procent

Sprawdź https://github.com/mmin18/FlexLayout, którego możesz użyć wyrażenia procentowego lub java bezpośrednio w xml układu.

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