Ich arbeite an einem Formularlayout für ein Login Activity
in 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>
Antworten:
Sie suchen nach dem
android:layout_weight
Attribut. 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%.
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
, da0dp
Ihre 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.
quelle
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.
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 ...
quelle
RelativeLayout
?android:visibility="invisible"
auf der Strebe angeben , dass der Aufruf von onDraw übersprungen werden soll;)Update 1
Wie von @EmJiHash angegeben, ist PercentRelativeLayout in API-Level 26.0.0 veraltet
Unten zitiert Google Kommentar:
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
dadurch , dass PercentRelativeLayout ist das, was wir einen Prozentsatz weise Layout tun können
quelle
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.
quelle
Sie können sich die neue prozentuale Supportbibliothek ansehen.
docs
Stichprobe
quelle
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.
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 :
quelle
android:layout_width="match_parent"
Ich habe dieses Problem beim Erstellen einer benutzerdefinierten Ansicht gelöst:
Dies ist eine unsichtbare Strebe, mit der ich andere Ansichten in RelativeLayout ausrichten kann.
quelle
Aktualisieren
Google hat eine neue API namens android.support.percent eingeführt
1) PercentRelativeLayout
2) PercentFrameLayout
Fügen Sie Kompilierungsabhängigkeit wie hinzu
Sie können die Dimension in Prozent angeben, um sowohl den Nutzen
RelativeLayout
als auch den Prozentsatz zu erhaltenquelle
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
LÖSUNG 2 Verwenden einer Kette mit gewichteter Breite für EditText
In beiden Fällen erhalten Sie so etwas
quelle
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:
Fügen Sie einfach eine Layoutdatei hinzu:
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.
Wrap Content
: Die Ansicht wird nach Bedarf erweitert, um sie an den Inhalt anzupassen.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.Fixed
: Sie geben eine bestimmte Dimension im Textfeld unten oder durch Ändern der Größe der Ansicht im Editor an.Spread
: Die Ansichten sind gleichmäßig verteilt (nachdem die Ränder berücksichtigt wurden). Dies ist die Standardeinstellung.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.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.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.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 erstellenBaseline alignment
: Richten Sie die Textgrundlinie einer Ansicht an der Textgrundlinie einer anderen Ansicht aus.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.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 ziehenSet 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 .
quelle
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.
quelle
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):
quelle
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
quelle
Überprüfen Sie https://github.com/mmin18/FlexLayout, wo Sie Prozent- oder Java-Ausdrücke direkt in Layout-XML verwenden können.
quelle