Ik ben bezig met een formulier layout voor een Login Activity
in mijn Android App. De afbeelding hieronder is hoe ik wil dat het eruit ziet:
Ik was in staat om deze lay-out te bereiken met de volgende XML. Het probleem is dat het een beetje hackish is. Ik moest een breedte hard coderen voor de host EditText. Om precies te zijn, ik moest specificeren:
android:layout_width="172dp"
Ik zou graag een percentage breedte aan de host en poort EditText's willen geven. (Zoiets als 80% voor de host, 20% voor de poort.) Is dit mogelijk? De volgende XML werkt op mijn Droid, maar het doesn't lijken te werken voor alle schermen. Ik zou echt graag een meer robuuste oplossing.
<!-- 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 -->
U bent op zoek naar het android:layout_weight
attribuut. Hiermee kunt u percentages gebruiken om uw opmaak te definiëren.
In het volgende voorbeeld gebruikt de linker knop 70% van de ruimte, en de rechter knop 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>
Het werkt hetzelfde met elk soort View, je kan de knoppen vervangen door EditText naargelang je behoeften.
Zorg ervoor dat je de layout_width
op 0dp
zet, anders worden je views misschien niet goed geschaald.
Merk op dat de som van de gewichten niet gelijk hoeft te zijn aan 1, ik vind het gewoon makkelijker om het zo te lezen. Je kunt het eerste gewicht op 7 zetten en het tweede op 3 en het zal hetzelfde resultaat geven.
U kunt dit bereiken via opmaakgewichten. Een gewicht dicteert hoe de niet-opgeëiste delen van het scherm verdeeld worden. Geef elke EditText een layout_breedte van 0, en een proportioneel gewicht. Bijvoorbeeld, geef de ene een gewicht van 2, en de andere een gewicht van 1 als je wilt dat de eerste twee keer zoveel ruimte inneemt.