Εργάζομαι σε μια διάταξη φόρμας για μια Δραστηριότητα σύνδεσης
στην Android App μου. Η παρακάτω εικόνα είναι το πώς θέλω να μοιάζει:
Κατάφερα να επιτύχω αυτή τη διάταξη με την ακόλουθη XML. Το πρόβλημα είναι ότι είναι λίγο δύσκολο. Έπρεπε να κωδικοποιήσω σκληρά ένα πλάτος για το κεντρικό EditText. Συγκεκριμένα, έπρεπε να καθορίσω:
android:layout_width="172dp"
Θα ήθελα πραγματικά να δώσω ένα ποσοστό πλάτους στο EditText του κεντρικού υπολογιστή και του λιμανιού. (Κάτι σαν 80% για τον κεντρικό υπολογιστή, 20% για τη θύρα.) Είναι αυτό δυνατό; Η ακόλουθη XML λειτουργεί στο Droid μου, αλλά δεν φαίνεται να λειτουργεί για όλες τις οθόνες. Θα ήθελα πραγματικά μια πιο ισχυρή λύση.
<!-- 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 -->
Ψάχνετε για το χαρακτηριστικό android:layout_weight
. Θα σας επιτρέψει να χρησιμοποιήσετε ποσοστά για να ορίσετε τη διάταξή σας.
Στο ακόλουθο παράδειγμα, το αριστερό κουμπί χρησιμοποιεί το 70% του χώρου και το δεξί κουμπί το 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>
Λειτουργεί το ίδιο με οποιοδήποτε είδος προβολής, μπορείτε να αντικαταστήσετε τα κουμπιά με κάποιο EditText ανάλογα με τις ανάγκες σας.
Βεβαιωθείτε ότι έχετε ορίσει το layout_width
σε 0dp
αλλιώς οι προβολές σας μπορεί να μην κλιμακωθούν σωστά.
Σημειώστε ότι το άθροισμα των βαρών δεν χρειάζεται να ισούται με 1, απλά το βρίσκω ευκολότερο να διαβάζεται έτσι. Μπορείτε να ορίσετε το πρώτο βάρος στο 7 και το δεύτερο στο 3 και θα δώσει το ίδιο αποτέλεσμα.
Δεν μπορείτε να χρησιμοποιήσετε ποσοστά για να ορίσετε τις διαστάσεις μιας Προβολής μέσα σε ένα RelativeLayout. Οι καλύτεροι τρόποι για να το κάνετε είναι να χρησιμοποιήσετε LinearLayout και βάρη ή μια προσαρμοσμένη διάταξη.
Μπορείτε να το επιτύχετε αυτό μέσω των βαρών διάταξης. Ένα βάρος υπαγορεύει τον τρόπο με τον οποίο κατανέμονται τα μη απαιτούμενα τμήματα της οθόνης. Δώστε σε κάθε EditText ένα layout_width 0 και κάποιο ανάλογο βάρος. Δηλαδή, δώστε στο ένα ένα βάρος 2 και στο άλλο ένα βάρος 1, αν θέλετε το πρώτο να καταλαμβάνει διπλάσιο χώρο.