Prozentuale Breite in einem RelativeLayout

Ich arbeite an einem Formularlayout für ein Login Activityin meiner Android App. Das Bild unten zeigt, wie es aussehen soll:

Dieses Layout konnte ich mit folgendem XML erreichen . Das Problem ist, es ist ein bisschen hackisch. Ich musste eine Breite für den Host EditText fest codieren. Insbesondere musste ich angeben:

android:layout_width="172dp" 

Ich möchte dem Host und dem Port EditText's wirklich eine prozentuale Breite geben. (Etwa 80% für den Host, 20% für den Port.) Ist das möglich? Das folgende XML funktioniert auf meinem Droid, aber es scheint nicht für alle Bildschirme zu funktionieren. Ich hätte wirklich gerne eine robustere Lösung.

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

Sie suchen nach dem android:layout_weightAttribut. Sie können Prozentsätze verwenden, um Ihr Layout zu definieren.

Im folgenden Beispiel belegt die linke Schaltfläche 70% des Speicherplatzes und die rechte Schaltfläche 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>

Es funktioniert genauso mit jeder Art von Ansicht. Sie können die Schaltflächen durch EditText ersetzen, um Ihren Anforderungen zu entsprechen.

Stellen Sie sicher, dass auf eingestellt ist layout_width, da 0dpIhre Ansichten sonst möglicherweise nicht richtig skaliert werden.

Beachten Sie, dass die Gewichtssumme nicht gleich 1 sein muss. Ich finde es einfach einfacher, so zu lesen. Sie können das erste Gewicht auf 7 und das zweite auf 3 setzen und es wird das gleiche Ergebnis erhalten.

Dies beantwortet nicht ganz die ursprüngliche Frage, die für eine 70/30-Aufteilung war, aber im speziellen Fall einer 50/50-Aufteilung zwischen den Komponenten gibt es eine Möglichkeit: Platzieren Sie eine unsichtbare Strebe in der Mitte und verwenden Sie sie zum Positionieren der zwei Komponenten von Interesse.

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

Da dies ein ziemlich häufiger Fall ist, ist diese Lösung mehr als eine Kuriosität. Es ist ein bisschen ein Hack, aber ein effizienter, weil die leere, nullgroße Strebe sehr wenig kosten sollte.

Im Allgemeinen ist es jedoch am besten, nicht zu viel von den Standard-Android-Layouts zu erwarten ...

Update 1

Wie von @EmJiHash angegeben, ist PercentRelativeLayout in API-Level 26.0.0 veraltet

Unten zitiert Google Kommentar:

Diese Klasse wurde in API-Level 26.0.0 nicht mehr unterstützt. Verwenden Sie stattdessen ConstraintLayout und zugehörige Layouts. Im Folgenden wird gezeigt, wie Sie die Funktionalität von prozentualen Layouts mit einem ConstraintLayout replizieren

Google hat eine neue API namens android.support.percent eingeführt

Dann können Sie einfach den Prozentsatz angeben, der nach Ansicht genommen werden soll

Fügen Sie Kompilierungsabhängigkeit wie hinzu

implementation 'com.android.support:percent:22.2.0

dadurch , dass PercentRelativeLayout ist das, was wir einen Prozentsatz weise Layout tun können

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

Sie können keine Prozentsätze verwenden, um die Abmessungen einer Ansicht in einem RelativeLayout zu definieren. Am besten verwenden Sie dazu LinearLayout und Gewichte oder ein benutzerdefiniertes Layout.

Sie können sich die neue prozentuale Supportbibliothek ansehen.

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

docs

Stichprobe

Sie können PercentRelativeLayout verwenden . Es handelt sich um eine kürzlich undokumentierte Erweiterung der Design Support Library , mit der nicht nur Elemente relativ zueinander angegeben werden können, sondern auch der Gesamtprozentsatz des verfügbaren Speicherplatzes.

Unterklasse von RelativeLayout, die prozentuale Dimensionen und Ränder unterstützt. Sie können die Dimension oder einen untergeordneten Rand angeben, indem Sie Attribute mit dem Suffix "Prozent" verwenden.

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

Das Percent-Paket bietet APIs zum Hinzufügen und Verwalten von prozentualen Dimensionen in Ihrer App.

Zur Verwendung müssen Sie diese Bibliothek zu Ihrer Gradle-Abhängigkeitsliste hinzufügen :

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

Ich habe dieses Problem beim Erstellen einer benutzerdefinierten Ansicht gelöst:

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

Dies ist eine unsichtbare Strebe, mit der ich andere Ansichten in RelativeLayout ausrichten kann.

Aktualisieren

Wie von @EmJiHash angegeben, ist PercentRelativeLayout und PercentFrameLayout in API-Level 26.0.0 veraltet

Erwägen Sie die Verwendung von ConstraintLayout

Google hat eine neue API namens android.support.percent eingeführt

1) PercentRelativeLayout

2) PercentFrameLayout

Fügen Sie Kompilierungsabhängigkeit wie hinzu

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

Sie können die Dimension in Prozent angeben, um sowohl den Nutzen RelativeLayoutals auch den Prozentsatz zu erhalten

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

Da PercentRelativeLayout in 26.0.0 veraltet war und verschachtelte Layouts wie LinearLayout in RelativeLayout sich negativ auf die Leistung auswirken (Grundlegendes zu den Leistungsvorteilen von ConstraintLayout ), besteht die beste Option zum Erreichen der prozentualen Breite darin, Ihr RelativeLayout durch ConstraintLayout zu ersetzen.

Dies kann auf zwei Arten gelöst werden.

LÖSUNG 1 Verwenden von Richtlinien mit prozentualem Versatz

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

LÖSUNG 2 Verwenden einer Kette mit gewichteter Breite für 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>

In beiden Fällen erhalten Sie so etwas

PercentRelativeLayout ist in Revision 26.0.0 der Support-Bibliothek veraltet.

Google hat das neue Layout ConstraintLayout eingeführt .

Fügen Sie die Bibliothek als Abhängigkeit in Ihre build.gradle-Datei auf Modulebene ein:

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

Fügen Sie einfach eine Layoutdatei hinzu:

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

Einschränkungen

Mithilfe von Einschränkungen können Sie Widgets ausgerichtet halten. Sie können Anker verwenden, z. B. die unten gezeigten Einschränkungsgriffe, um Ausrichtungsregeln zwischen verschiedenen Widgets zu bestimmen.

1. Wrap Content: Die Ansicht wird nach Bedarf erweitert, um sie an den Inhalt anzupassen.
2. Match Constraints: Die Ansicht wird nach Bedarf erweitert, um die Definition ihrer Einschränkungen nach Berücksichtigung der Margen zu erfüllen. Wenn die angegebene Dimension jedoch nur eine Einschränkung aufweist, wird die Ansicht entsprechend ihrem Inhalt erweitert. Wenn Sie diesen Modus entweder für die Höhe oder für die Breite verwenden, können Sie auch ein Größenverhältnis festlegen.
3. Fixed: Sie geben eine bestimmte Dimension im Textfeld unten oder durch Ändern der Größe der Ansicht im Editor an.
4. Spread: Die Ansichten sind gleichmäßig verteilt (nachdem die Ränder berücksichtigt wurden). Dies ist die Standardeinstellung.
5. Spread inside: Die erste und die letzte Ansicht sind an den Einschränkungen an jedem Ende der Kette angebracht, und der Rest ist gleichmäßig verteilt.
6. Weighted: Wenn die Kette so eingestellt ist, dass sie sich entweder ausbreitet oder sich im Inneren ausbreitet, können Sie den verbleibenden Raum füllen, indem Sie eine oder mehrere Ansichten auf "Einschränkungen anpassen" (0 dp) setzen. Standardmäßig ist der Speicherplatz gleichmäßig auf jede Ansicht verteilt, die auf "Einschränkungen anpassen" eingestellt ist. Sie können jedoch jeder Ansicht mithilfe der Attribute layout_constraintHorizontal_weight und layout_constraintVertical_weight eine wichtige Gewichtung zuweisen. Wenn Sie mit layout_weight in einem linearen Layout vertraut sind, funktioniert dies auf die gleiche Weise. Die Ansicht mit dem höchsten Gewichtswert erhält also den größten Platzbedarf. Ansichten mit dem gleichen Gewicht erhalten den gleichen Platz.
7. Packed: Die Ansichten werden zusammengepackt (nachdem die Ränder berücksichtigt wurden). Sie können dann die Vorspannung der gesamten Kette (links / rechts oder oben / unten) anpassen, indem Sie die Vorspannung der Kopfansicht der Kette ändern.
8. Center Horizontally or Center Vertically: Um schnell eine Ansichtskette zu erstellen, wählen Sie alle aus, klicken Sie mit der rechten Maustaste auf eine der Ansichten und wählen Sie dann entweder Horizontal zentrieren oder Vertikal zentrieren, um entweder eine horizontale oder vertikale Kette zu erstellen
9. Baseline alignment: Richten Sie die Textgrundlinie einer Ansicht an der Textgrundlinie einer anderen Ansicht aus.
10. Constrain to a guideline: Sie können eine vertikale oder horizontale Richtlinie hinzufügen, auf die Sie Ansichten beschränken können. Die Richtlinie ist für App-Benutzer nicht sichtbar. Sie können die Richtlinie innerhalb des Layouts basierend auf dp-Einheiten oder Prozent relativ zur Kante des Layouts positionieren.
11. Adjust the constraint bias: Wenn Sie beiden Seiten einer Ansicht eine Einschränkung hinzufügen (und die Ansichtsgröße für dieselbe Dimension entweder "fest" oder "Inhalt umbrechen" ist), wird die Ansicht standardmäßig mit einer Abweichung von 50% zwischen den beiden Einschränkungen zentriert. Sie können die Vorspannung anpassen, indem Sie den Vorspannungsregler im Eigenschaftenfenster ziehen
12. Set size as a ratio: Sie können die Ansichtsgröße auf ein Verhältnis wie 16: 9 einstellen, wenn mindestens eine der Ansichtsdimensionen auf "Einschränkungen anpassen" (0 dp) eingestellt ist.

Sie können mehr aus dem offiziellen Dokument erfahren .

Sie können dies über Layoutgewichte erreichen. Ein Gewicht bestimmt, wie die nicht beanspruchten Teile des Bildschirms aufgeteilt werden. Geben Sie jedem EditText eine layout_width von 0 und ein proportionales Gewicht. Geben Sie dem einen ein Gewicht von 2 und dem anderen ein Gewicht von 1, wenn der erste doppelt so viel Platz beanspruchen soll.

Interessanterweise kann man auf der Grundlage der Antwort von @olefevre nicht nur 50/50 Layouts mit "unsichtbaren Streben" erstellen, sondern auch alle Arten von Layouts mit Zweierpotenzen.

Hier ist zum Beispiel ein Layout, das die Breite in vier gleiche Teile schneidet (tatsächlich drei mit Gewichten von 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>

Stellen Sie einfach Ihre beiden Textansichten Host und Port in ein unabhängiges lineares Layout horizontal und verwenden Sie android: layout_weight, um den Prozentsatz zu bestimmen

Überprüfen Sie https://github.com/mmin18/FlexLayout, wo Sie Prozent- oder Java-Ausdrücke direkt in Layout-XML verwenden können.

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