Relaytive layout

Thường ta hay dùng nhất là LinearLayout, các thành phần được xếp theo chiều ngang hoặc dọc.

Với chiều ngang, nó trông như sau

Chiều dọc sẽ xếp từ trên xuống.

Tuy nhiên, có nhiều khi ta muốn có sự sắp xếp hơi phức tạp, như bên trên thì có 2 textView ngang nhau, bên dưới có một textView khác, dưới cùng lại có 2 textView ngang nhau. Tất cả ở bên trong một layout để ta còn tạo viền xung quanh cho chúng.

Trường hợp này ta sẽ dùng RelativeLayout, trong đó các thành phần có thể sắp xếp cạnh nhau theo quan hệ tham chiếu địa chỉ của chúng.

RelaviLayout lúc này sẽ như sau:

<RelativeLayout

        android:layout_width="250dp"

        android:layout_height="120dp"

        android:layout_gravity="center"

        android:background="@drawable/line2" >

        <TextView

            android:id="@+id/textViewa1"

            android:layout_width="120dp"

            android:layout_height="40dp"

            android:layout_alignParentTop="true"

            android:gravity="center"

            android:ellipsize="none"

            android:singleLine="true"

            android:text="Chữ ví dụ 1"

            android:textColor="#00F"

            android:textSize="18sp"

            android:textStyle="bold" />

        <TextView

            android:id="@+id/textViewa2"

            android:layout_width="120dp"

            android:layout_height="40dp"

           android:layout_alignParentTop="true"

            android:gravity="center"

            android:layout_toRightOf="@+id/textViewa1"

            android:ellipsize="none"

            android:text="Chữ ví dụ 2"

            android:textColor="#00F"

            android:textSize="18sp"

            android:textStyle="bold" />

        <TextView

            android:id="@+id/c1"

            android:layout_width="match_parent"

            android:layout_height="40dp"

            android:layout_below="@+id/textViewa1"

            android:gravity="center"

            android:ellipsize="none"

            android:textColor="#00F"

            android:text="Chữ ví dụ dòng 2"

            android:textSize="18sp" />

        <TextView

            android:id="@+id/textViewc9"

            android:layout_width="120dp"

            android:layout_height="40dp"

            android:layout_below="@+id/c1"

            android:gravity="center"

            android:singleLine="true"

            android:text="Chữ ví dụ 3"

            android:textColor="#00F"

            android:textSize="18sp" />

        <TextView

            android:id="@+id/textViewc10"

            android:layout_width="120dp"

            android:layout_height="40dp"

            android:layout_below="@+id/c1"

            android:gravity="center"

            android:layout_toRightOf="@+id/textViewc9"

            android:singleLine="true"

            android:text="Chữ ví dụ 4"

            android:textColor="#00F"

            android:textSize="18sp" />

    </RelativeLayout>

Hình ảnh chạy ra sẽ như sau

Lợi thế của RelativeLayout trong trường hợp này là rõ ràng, nếu dùng Linearlayout bạn sẽ phải sắp xếp phức tạp, nhiều lớp hơn.

Khi căn chỉnh cho chữ vào giữa cũng nên chú ý là android:layout_gravity="center"  sẽ đưa toàn bộ view vào giữa, còn android:gravity="center"  sẽ đưa chữ ở trong view vào giữa. Hiệu quả, cách dùng hơi khác nhau.

Về cái viền và màu nền, file line2 có code như sau.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<stroke

android:width="1dip"

 android:color="#4b5320" />

<solid

android:color="#ccffff" />

</shape>