Ich arbeite an einem Formular-Layout für eine Login-Aktivität in meiner Android-App. Das Bild unten ist, wie ich es aussehen soll:
Ich konnte dieses Layout mit dem folgenden XML erreichen. Das Problem ist nur, dass es ein bisschen hakelig ist. Ich musste eine Breite für den Host-EditText hart kodieren. Genauer gesagt, musste ich angeben:
android:layout_width="172dp"
Ich würde gerne eine prozentuale Breite für die Host- und Port-EditText's angeben. (Etwas wie 80% für den Host, 20% für den Port.) Ist das möglich? Die folgende XML funktioniert auf meinem Droid, aber es scheint nicht für alle Bildschirme zu funktionieren. Ich würde wirklich gerne eine robustere Lösung.
<!-- begin snippet: js hide: false -->
<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>
<!-- end snippet -->
Sie suchen nach dem Attribut "android:layout_weight". Damit können Sie Ihr Layout mit Prozentwerten definieren.
Im folgenden Beispiel nimmt die linke Schaltfläche 70 % des Platzes ein, 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 mit jeder Art von Ansicht, Sie können die Schaltflächen durch einen EditText ersetzen, der Ihren Bedürfnissen entspricht.
Stellen Sie sicher, dass Sie die layout_width
auf 0dp
setzen, sonst werden Ihre Ansichten nicht richtig skaliert.
Beachten Sie, dass die Summe der Gewichte nicht gleich 1 sein muss, ich finde es nur einfacher, es so zu lesen. Sie können das erste Gewicht auf 7 und das zweite auf 3 setzen und es wird das gleiche Ergebnis liefern.
Sie können keine Prozentsätze verwenden, um die Abmessungen einer Ansicht innerhalb eines RelativeLayouts zu definieren. Die beste Möglichkeit ist die Verwendung von LinearLayout und Gewichten oder eines eigenen Layouts.
Sie können dies über Layout-Gewichtungen erreichen. Eine Gewichtung gibt vor, wie die nicht beanspruchten Teile des Bildschirms aufgeteilt werden. Geben Sie jedem EditText eine layout_width von 0, und eine proportionale Gewichtung. Geben Sie z. B. dem einen eine Gewichtung von 2 und dem anderen eine Gewichtung von 1, wenn Sie möchten, dass der erste doppelt so viel Platz einnimmt.