Layout Trong Lập Trình Android

1. https://www.stdio.vn/articles/read/518/tim-hieu-layout-trong-lap-trinh-android
2. https://thangcoder.com/lap-trinh-android/hoc-lap-trinh-android-can-ban/linearlayout-relativelayout-trong-lap-trinh-android

Khái niệm View

Những gì mà chúng ta nhìn thấy trên màn hình device android như Button, EditText, ImageView, TextView, RadioButton, CheckBox, ListView, GridView... được gọi là View. Mỗi View sẽ có những chức năng khác nhau.

Ví dụ:

• TextView là view dùng để hiện thị text lên màn hình.
• EditText là view dùng để lấy nội dung mà người dùng nhập vào.
• ImageView là view dùng để hiển thị hình ảnh.
• Button là view dùng dùng để thực hiện một nhiệm vụ nào đó khi chúng ta nhấn vào button.

Trong android, class View được định nghĩa trong package: package android.view;

Chúng ta có thể tạo ra view mới theo ý của chúng ta bằng cách extends từ lớp View và override lại các phương thức của View để làm việc với View mới của chúng ta. Tôi sẽ đề cập phần này ở các bài viết sau.

Chúng ta sẽ đều cập đến một số thuộc tính nổi bật của View.

layout_height

Thuộc tính này quy định chiều cao của view đó và thường có các giá trị như sau:

• match_parent: chiều cao của view sẽ bằng đúng chiều cao của phần tử cha chứa nó.
• wrap_content: chiều cao của view phụ thuộc vào content của view.
• giá trị xác định: xác định chiều cao của view theo một đơn vị nào đó (dp, px, in, mm, sp...)

layout_width

• match_width: chiều rộng của view sẽ bằng đúng chiều rộng của phần tử cha chứa nó.
• wrap_content: chiều rộng của view phụ thuộc vào content của view.
• giá trị xác định: xác định chiều rộng của view theo một đơn vị nào đó (dp, px, in, mm, sp...)

Khái niệm ViewGroup

Nhắc đến khái niệm ViewGroup chắc hẳn có nhiều bạn còn thấy lạ lẩm với nó, tôi cũng vậy, khi bắt đầu tôi cũng thấy nó rất lạ và không hiểu nó là cái gì. Nhưng đúng như cái tên của nó:

ViewGroup là một view chứa những view khác, ViewGroup có nhiệm vụ sẽ tính toán và sắp xếp (layout) các phần tử view con nằm bên trong nó theo quy luật nào đó. Nếu bạn muốn tạo ra ViewGroup mới để layout các view con trong nó theo cách của mình thì có thể extends từ lớp ViewGroup và override lại hai phương thức là onLayout và onMeasure.

Có khá nhiều ViewGroup được sử dụng trong android như FrameLayout, RelativeLayout, LinearLayout, TableLayout, CoordinateLayout... Nhưng phổ biến nhất là 3 ViewGroup sau:

• FrameLayout
• RelativeLayout
• LinearLayout

Trong phạm vi bài viết này tôi sẽ cùng các bạn đi từ cơ bản tới nâng cao về 3 ViewGroup này để chúng ta có thể thiết kế bất cứ UI nào mà chúng ta mong muốn.

FrameLayout

FrameLayout là một ViewGroup được sử dụng rất nhiều trong android. Bởi vì nó là ViewGroup đơn giản nhất, và thời gian tính toán của nó để layout ra các view con trong nó là thấp nhất nên performence của ViewGroup này là cao nhất.

FrameLayout được định nghĩa bắt đầu bởi thẻ <FrameLayout> và thẻ đóng </FrameLayout>. Ở giữa thẻ đóng và thẻ mở chính là các view con của nó.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!--View Child-->
 
</FrameLayout>

Quy tắc layout

Quy tắc layout các view con trong FrameLayout là các view sẽ nằng chồng lên nhau, view thêm vào sau sẽ nằm đè lên view nằm phía dưới. Ví dụ như sau:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        android:textColor="#2c3e50"
        android:textSize="32sp" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="STDIO"
        android:textColor="#16a085"
        android:textSize="32sp" />
</FrameLayout>

Với đoạn mã trên thì "STDIO" sẽ nằm chồng lên "Hello World":

Vậy tại sao chúng ta lại cần layout như thế này. Ví dụ tôi cần 1 tấm hình và tôi muốn hiện chữ lên trên tấm hình đó thì chúng ta sẽ cần FrameLayout. 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/avatar_author"/>
 
        <TextView
            android:layout_gravity="bottom|center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nguyễn Nghĩa"
            android:textColor="#16a085"
            android:textSize="32sp" />
    </FrameLayout>
 
</FrameLayout>

Tên tác giả sẽ nằm đề lên trên hình ảnh

Ưu điểm

+ Là ViewGroup đơn giản nên thời gian tính toán để layout các view con nhanh.

Nhược điểm

+ Không thiết kế được cái giao diện phức tạp.

RelativeLayout

RelativeLayout là ViewGroup cũng được sử dụng khá nhiều trong android, RelativeLayout được định nghĩa trong xml bởi cặp thẻ đóng mở <RelativeLayout> và thẻ đóng </RelativeLayout>.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <!--View child-->
 
</RelativeLayout>

Quy tắc layout

Quy tắc layout của RelativeLayout khá giống như FrameLayout, nhưng có một số điểm đặc biệt là các view có thể xác định bằng vị trí tương đối  (relative) với các view khác thông qua id.

Các vị trí tương đối này như sau:

• android:layout_above="id_name": view hiện tại sẽ nằm phía trên view có thuộc tính id là id_name.
• android:layout_below="id_name": view hiện tại sẽ nằm phía dưới view có thuộc tính id là id_name.
• android:layout_toLeftOf="id_name": view hiện tại sẽ nằm bên trái dưới view có thuộc tính id là id_name.
• android:layout_toRightOf="id_name": view hiện tại sẽ nằm phía bên phải view có thuộc tính id là id_name.

Cùng xét ví dụ để hiểu sâu hơn về RelativeLayout.

Ta thấy rằng EditText username nằm dưới TextView username. Và tương tự TextView password nằm dưới Editext username, EditText password sẽ nằm dưới TextView password.

Mã nguồn sẽ như sau:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="username" />
 
    <EditText
        android:id="@+id/edt_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_username" />
 
    <TextView
        android:id="@+id/tv_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/edt_username"
        android:text="password" />
 
    <EditText
        android:id="@+id/edt_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_password"
        android:inputType="textPassword" />
    
</RelativeLayout>

Xét tiếp ví dụ như hình sau:

EditText username sẽ nằm bên phải TextView username

EditText password sẽ nằm bên phải TextView password

TextView password và EditText password sẽ nằm phía dưới TextView username

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/edt_username"
        android:text="username" />
 
    <EditText
        android:id="@+id/edt_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/tv_username" />
 
    <TextView
        android:id="@+id/tv_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/edt_password"
        android:layout_below="@id/edt_username"
        android:text="password" />
 
    <EditText
        android:id="@+id/edt_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_username"
        android:layout_toRightOf="@id/tv_password"
        android:inputType="textPassword" />
 
</RelativeLayout>

Một số thuộc tính khác thường xuyên sử dụng với RelativeLayout:

• android:layout_alignParentBottom="boolean": Căn dưới phần tử hiện theo phần tử cha nếu set là true.
• android:layout_alignParentTop="boolean": Căn trên phần hiện tại theo phần tử cha nết set là true.
• android:layout_alignParentRight="boolean": Căn phải phần tử hiện tại theo phần tử cha nếu set là true.
• android:layout_alignParentLeft="boolean": Căn trái phần tử hiện tại theo phần tử cha nếu set là true.

Ta có ví dụ sau:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <View
        android:background="#2c8291"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
 
</RelativeLayout>

Các bạn hãy thử thêm các thuộc tính trên để xem kết quả như thế nào. Giả sử tôi thêm như sau:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <View
        android:layout_alignParentRight="true"
        android:background="#2c8291"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
 
</RelativeLayout>

Và kết quả view sẽ được căn phải.

Ưu điểm

+ Thiết kế được các giao diện phức tạp.

Nhược điểm

+ Thời gian tính toán và layout các view con khá lâu so với FrameLayout.

+ Muốn sử dụng các thuộc tính như  android:layout_above, android:layout_toLeftOf thì phải đặt id cho các view mà view hiện tại xác định vị trí tương đối đối với các view đó.

LinearLayout

LinearLayout là ViewGroup được sử dụng khá phổ biến cùng FrameLayout và RelativeLayout,  LinearLayout được định nghĩa trong xml bởi cặp thẻ đóng mở <LinearLayout> và thẻ đóng </LinearLayout>.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
   <!--View child-->
 
</LinearLayout>

Điểm đặc biệt của LinearLayout là có thể chia layout theo các tỉ lệ khác nhau. Chúng ta sẽ cùng nhau tìm hiểu ở dưới đây.

Quy tắc layout

LinearLayout sắp sếp các view con theo hai hướng:

- Vertical: Sắp sếp view con theo chiều dọc.

Các view được thêm vào sau sẽ được sắp xếp theo hướng mũi tên từ trên xuống, và không có view nào sẽ nằm đè lên view nào.

- Horizontal: Sắp sếp các view con theo chiều ngang:

Các view được thêm vào sau sẽ được sắp xếp theo hướng mũi tên từ trái qua phải, và không có view nào sẽ nằm đè lên view nào.

Để xác định hướng mà LinearLayout sẽ layout các phần tử con theo vertical hay horizontal ta sử dụng thuộc tính sau:

+ Vertical:

android:orientation="vertical"

+ Horizontal:

android:orientation="horizontal"

Ví dụ với đoạn mã

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <View
        android:background="#af5656"
        android:layout_width="match_parent"
        android:layout_height="50dp" />
 
    <View
        android:background="#28c6a6"
        android:layout_width="match_parent"
        android:layout_height="50dp" />
    <View
        android:background="#7c145f"
        android:layout_width="match_parent"
        android:layout_height="50dp" />
    <View
        android:background="#c18936"
        android:layout_width="match_parent"
        android:layout_height="50dp" />
    <View
        android:background="#062001"
        android:layout_width="match_parent"
        android:layout_height="50dp" />
    
</LinearLayout>

Chúng ta sẽ có giao diện như sau:

Và với đoạn mã tiếp theo thay đổi orientation thành horizontal:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
 
    <View
        android:background="#af5656"
        android:layout_width="50dp"
        android:layout_height="match_parent" />
 
    <View
        android:background="#28c6a6"
        android:layout_width="50dp"
        android:layout_height="match_parent" />
    <View
        android:background="#7c145f"
        android:layout_width="50dp"
        android:layout_height="match_parent" />
    <View
        android:background="#062001"
        android:layout_width="50dp"
        android:layout_height="match_parent" />
 
</LinearLayout>

Ta có kết quả như dưới đây: 

Ví dụ thiết kế giao diện đăng nhập như sau:

Chúng ta dễ dàng thiết kế bằng xml với LinearLayout như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
 
    <TextView
        android:text="username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"/>
 
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <TextView
        android:text="password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"/>
 
    <EditText
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <Button
        android:text="login"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
 
 
</LinearLayout>

Chia tỉ lệ layout

Ngoài cách sử dụng LinearLayout thông thường thì LinearLayout thường được sử dụng để phân chia tỉ lệ layout bằng cách sử dụng thuộc tính layout_weight và weightSum.

• weightSum: Xác định trọng số của LinearLayout hiện tại.
• layout_weight: Trọng số mà view con trong LinearLayout chiếm giữ.

Chia tỉ lệ không có weightSum

Cùng xem xét đoạn mã sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
 
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#af5656" />
 
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="4"
        android:background="#28c6a6" />
 
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:background="#7c145f" />
</LinearLayout>

Chúng ta không đánh trọng số weightSum cho LinearLayout nên tổng trọng số của nó sẽ được tính bằng tổng trọng số (layout_weight) các view con cộng lại.

Ở đây weightSum = 1 + 4 + 2 = 7. Có nghĩa là LinearLayout này sẽ chia thành 7 phần:

View thứ nhất có android:layout_weight="1" sẽ chiếm 1/7.

View thứ hai có android:layout_weight="4" sẽ chiếm 4/7.

View thứ ba có android:layout_weight="2" sẽ chiếm 2/7.

Kết quả chúng ta thấy như sau

Nếu orientation là vertical

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#af5656" />
 
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4"
        android:background="#28c6a6" />
 
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#7c145f" />
</LinearLayout>

Và kết quả

Chia tỉ lệ có weightSum

Khác với cách trên weightSum được tính toán bằng tổng của cách layout_weight của các view con. Thì chúng ta có thể xác định giá trị weightSum cụ thể như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="10"
    android:orientation="vertical">
 
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5"
        android:background="#af5656" />
 
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#28c6a6" />
 
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#7c145f" />
</LinearLayout>

Chúng ta xác định weightSum có giá trị là 10, có nghĩa là chia layout này thành 10 phần

View thứ nhất chiếm 5/10

View thứ hai chiếm 2/10

View thứ ba chiếm 1/10

Còn lại 2/10 sẽ là khoảng trắng.

Điểm khác biệt của hai cách chia tỉ lệ này là chia tỉ lệ không có weightSum thì các view trong LinearLayout sẽ "phủ" đầy layout này (không có khoảng trống). Còn với cách chia tỉ lệ có weightSum có thể sinh ra khoảng trống như ví dụ ở trên.

Ưu điểm

+ Thiết kế được các giao diện phức tạp.

+ Chia tỉ lệ layout, phù hợp với việc phát triển UI trên nhiều device có kích thước màn hình khác nhau.

Nhược điểm

+ Thời gian tính toán và layout view con tốn chi phí hơn so với FrameLayout và RelativeLayout. Đây là ViewGroup tính toán phức tạp nhất trong bộ ba ViewGroup thường xuyên được sử dụng (FrameLayout, RelativeLayout, LinearLayout).

Lời kết

Qua bài viết này tôi đã hướng dẫn các bạn ba ViewGroup thường xuyên sử dụng (FrameLayout, RelativeLayout, LinearLayout) trong quá trình thiết kế UI cho ứng dụng android. Tùy thuộc vào từng UI đơn giản hay phức tạp mà chúng ta sử dụng ViewGroup nào cho phù hợp, với những UI nào đơn giản thì chúng ta có thể sử dụng FrameLayout vì thời gian tính toán và layout của nó nhanh nhất, UI quá phức tạp thì chúng ta có thể kết hợp tất cả những ViewGroup trên. Nếu có thắc mắc nào các bạn hãy để lại câu hỏi ở phía dưới bài viết, tôi sẽ giải đáp thắc mắc cho các bạn.

bouns thêm 1 bài rất hay.

trangchongcheng

September 16, 2016

 5 COMMENTS

BÀI 9: LINEARLAYOUT, RELATIVELAYOUT TRONG ANDROID

Vậy là ở bài trước các bạn đã biết và thực hành sơ qua về các View cơ bản như Button, TextView… rồi đúng không nào, như mình đã nói là sẽ tìm hiểu qua View trước khi tìm hiểm ViewGroup, mà 2 thằng này gọi chung là View cũng được nhé các bạn.

Hôm nay mình sẽ đi tìm hiểu về các View cơ bản trong ViewGroup nhé, đây cũng là những thành phần không thể thiếu trong một file layout được và thường là bắt buộc phải có.Có rất nhiều ViewGroup như: LinearLayout, RelativeLayout, FrameLayout, GridLayout…

Tuy nhiên hôm nay mình sẽ tìm hiểu về thằng Linear với Relative thôi, còn lại thì về sau này làm thực hành kiểu gì cũng đụng tới và mình sẽ nói.Cơ bản 2 ViewGroup này thì ứng dụng nào cũng có nên mình giới thiệu trước.

Nội dung [hide]

• 1 LinearLayout
• 2 RelativeLayout
• 3 So sánh giữa LinearLayout và RelativeLayout
• 4 Video tìm hiểu về LinearLayout và RelativeLayout
• 5 Download source code
• 6 Tiếp theo

LinearLayout

Đây là ViewGroup sẽ giúp các bạn sắp xếp các view con chứa bên trong theo dạng hàng ngay hoặc hàng dọc với nhau.Nhìn vào các hình ảnh dưới đây bạn sẽ hình dung được ngay công dụng của LinearLayout là gì liền.

Ví dụ về LinearLayout

Ok, ở bài trước đã học về View rồi thì nhìn vào trên bạn sẽ dự đoán nó có những View cơ bản nào ?

Đó chính là 1 ImageView, 1 TextView và 2 Button đúng không? Bạn có để ý là ImageView và TextView đang xếp với nhau theo hàng ngang không? còn 2 Button thì theo hàng dọc.

Để sắp xếp được như vậy một cách dễ dàng thì bạn sẽ phải dùng LinearLayout thay vì RelativeLayout sẽ rất phức tạp.Cùng xem đoạn code trên nào:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical">       <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal">           <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@mipmap/ic_launcher" />           <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="center"             android:layout_marginLeft="20dp"             android:text="Xin Chào! Tôi là ngôn ngữ lập trình Android" />       </LinearLayout>       <Button         android:id="@+id/btnClick"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:padding="10dp"         android:text="Click để xem" />       <Button         android:id="@+id/btnHihi"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="Hihi Đồ Ngốc" /> </LinearLayout>

Bạn có thể copy bỏ vào một file layout sẽ thấy giao diện hiện ra y chang nhé, bây giờ thì đi phân tích tí code xem sao:

Bao bọc cả layout trên là một LinearLayout, và bên trong nó là các view và viewgroup khác, code nó đây:

1 2 3 4 5

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical">

Mấy thuộc tính width/height mình nói nhiều rồi nên thôi, bây giờ bạn để ý vào thuộc tính android:orientation nhé.

android:orientation : định nghĩa cho các view con bên trong ViewGroup này hiển thị theo chiều dọc (vertical) hoặc chiều ngang (horizontal).

Ở ví dụ trên android:orientation=”vertical” nghĩa là tất cả các view bên trong này sẽ sắp xếp theo chiều dọc của màn hình, trong trường hợp vượt quá chiều dọc của màn hình thì sẽ bị che khuất đi, nếu để là android:orientation=”horizontal” thì nó sẽ sắp xếp theo chiều ngang. 

Ở đây sẽ có người sẽ thắc mắc tại sao thằng ImageView với TextView lại xếp theo chiều ngang, thì ban sẽ đi sâu xuống một đoạn code nữa phía dưới:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal">           <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@mipmap/ic_launcher" />           <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="center"             android:layout_marginLeft="20dp"             android:text="Xin Chào! Tôi là ngôn ngữ lập trình Android" />       </LinearLayout>

Bạn có thấy thằng nguyên một đoạn có này đang thuộc LinearLayout ở phía trên lúc nãy chúng ta phân tích không, nhưng ở đây ImageView vs TextView cũng được một ViewGoup LinearLayout nữa bao bọc và đang set thuộc tính android:orientation=”horizontal” , nghĩa là các view trong này sẽ sắp xếp theo chiều ngang đúng không?

Chính vì thế ImageView vs TextView đang hiển thị theo chiều ngang từ trái sang, và nó không bị ảnh hưởng bởi thuộc tính android:orientation=”vertical” , mà nó chỉ bị ảnh hưởng bởi ViewGroup gần nó nhất thôi. Và LinearLayout bọc 2 view này sẽ bị ảnh hưởng bởi LinearLayout ngoài cùng nên sẽ sắp xếp theo chiều dọc.

Tiếp theo đến 2 nút Button còn lại, bạn thấy nó đang xếp theo chiều dọc đúng không nào, vậy chắc chắn nó đang bị hưởng hưởng của thuộc tính android:orientation=”vertical“, và nó đang bị ảnh hưởng của LinearLayout ở ngoài cùng, chính xác là vậy vì nhìn vào bạn có thể thấy ViewGroup nào đang bọc nó mà đúng không?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<Button         android:id="@+id/btnClick"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:padding="10dp"         android:text="Click để xem" />       <Button         android:id="@+id/btnHihi"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="Hihi Đồ Ngốc" />

Hai Button đang hiển thị ở chính giữa do thuộc tính android:layout_gravity=”center” , cái này đã học ở bài trước rồi đúng he :).

Còn bây chúng ta sẽ thiết kế giao diện bên trên bằng một ViewGroup khác là RelativeLayout thử coi nó khác nhau như thế nào nhỉ?

RelativeLayout

Đây là một ViewGroup giúp bạn có thể sắp xếp các view con ở bất kì một vị trí nào mà mình thích mà có những lúc LinearLayout làm không được hoặc rất khó để làm, tí mình sẽ chia sẽ kinh nghiệm để khi nhìn vào một designer là bạn biết nó nên dùng thằng nào để tạo liền.

Mình copy lại ảnh phía trên ở đây cho dễ nhìn nhé:

Ví dụ về LinearLayout

Bây giờ là code mình sử dụng RelativeLayout vẽ ra nhé:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent">       <RelativeLayout         android:id="@+id/rl"         android:layout_width="match_parent"         android:layout_height="wrap_content">           <ImageView             android:id="@+id/imgAvatar"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@mipmap/ic_launcher" />           <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_centerVertical="true"             android:layout_marginLeft="20dp"             android:layout_toRightOf="@+id/imgAvatar"             android:text="Xin Chào! Tôi là ngôn ngữ lập trình Android" />       </RelativeLayout>       <Button         android:id="@+id/btnClick"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/rl"         android:layout_centerHorizontal="true"         android:padding="10dp"         android:text="Click để xem" />       <Button         android:id="@+id/btnHihi"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/btnClick"         android:layout_centerHorizontal="true"         android:text="Hihi Đồ Ngốc" /> </RelativeLayout>

Các bạn thấy sự khác biệt rõ rệt không nhỉ, cùng một giao diện mà 2 cách thiết kế View khác nhau và ở đây thì làm theo kiểu RelativeLayout lại dài dòng và mệt hơn.Mình sẽ giải thích từng đoạn code cho các bạn:

Bao bọc ngoài cùng là một RelativeLayout đúng không nào? Bây giờ nếu các view con bên trong chưa định nghĩa các thuộc tính canh lề thì mặc định các view này sẽ chồng lên nhau luôn chứ không phải như LinearLayout là xếp theo hàng ngang hay dọc.Đi xuống tí nữa cũng là một RelativeLayout, ta xem đoạn code nó nào:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<RelativeLayout         android:id="@+id/rl"         android:layout_width="match_parent"         android:layout_height="wrap_content">           <ImageView             android:id="@+id/imgAvatar"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@mipmap/ic_launcher" />           <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_centerVertical="true"             android:layout_gravity="center"             android:layout_marginLeft="20dp"             android:layout_toRightOf="@+id/imgAvatar"             android:text="Xin Chào! Tôi là ngôn ngữ lập trình Android" />

Một thuộc tính mang tên là android:id thì bạn sẽ được biết sau Bài 10: ID trong android nhé, trước mắt bạn cứ hiểu nó là cái để phân biệt giữa các view với nhau, trong một file layout thì tên những thuộc tính ID này không được giống nhau.

Ở đoạn code trên, để ImageView và TextView nằm trên cùng một hàng thì chỉ có một thuộc tính ở TextView quyết định đó chính là android:layout_toRightOf=”@+id/imgAvatar”, đây là thuộc tính nói rằng cái TextView này sẽ nằm bên phải của cái ImageView có id là ” imgAvatar “,  nếu không có thuộc tính này thì 2 view sẽ nằm chồng lên nhau đó vì do RelativeLayout bọc ở ngoài.

Tiếp theo là 2 nút Button:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<Button         android:id="@+id/btnClick"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/rl"         android:layout_centerHorizontal="true"         android:padding="10dp"         android:text="Click để xem" />       <Button         android:id="@+id/btnHihi"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/btnClick"         android:layout_centerHorizontal="true"         android:text="Hihi Đồ Ngốc" />

Đào vào code bạn sẽ thấy 2 thuộc tính mới lạ đó là :

android:layout_below : thuộc tính này nói rằng view này sẽ xếp dưới một view khác dựa vào ID của view đó, ở trên ví dụ thì bạn thấy nút Button đầu tiên sẽ xếp dưới view có id là ” rl ” , ở đây chính là RelativeLayout thứ 2 trong file layout.

android:layout_centerHorizontal : thuộc tính này nó là view đó sẽ canh lề giữa theo chiều ngang nên bạn thấy 2 nút button đều nằm ở giữa màn hình.Đây là thuộc tính chỉ có ở RelativeLayout chứ LinearLayout không có đâu nhé, mà thay vào đó là layout_gravity .

Ở nút Button thứ 2 bạn thấy thuộc tính android:layout_below=”@+id/btnClick” không, ý nó là hãy xếp tôi nằm dưới cái view có ID là btnClick , mà ở đây là nút Button thứ nhất.Nếu không có thuộc tính này thì Button thứ 2 sẽ nằm trên cùng màn hình, đè lên TextView.

So sánh giữa LinearLayout và RelativeLayout

Bản chất của RelativeLayout là giúp các view xếp với nhau dựa vào vị trí của các view khác thôi chính vì thế bạn có thể xếp nó bất kỳ chỗ nào mà mình muốn dễ hơn là so với thằng LinearLayout.Mình sẽ có ví dụ để chứng mình rằng một số trường hợp LinearLayout không thể làm được mà chỉ RelativeLayout mới làm được thôi.

Nhìn vào ảnh :

Canh lề trong LinearLayout

Bây giờ nếu bạn muốn đẩy nút button này xuống chỗ mình tô màu đỏ là điều rất khó nếu dùng LinearLayout, bạn có thể dùng mẹo hay canh lề bằng px tuy nhiên đó không phải là giải pháp hay và tối ưu gì cả, nhưng trong khi đó RelativeLayout lại làm được rất dễ.

Đây là đoạn code mình đẩy nút button xuống chỗ màu đỏ khi dùng LinearLayout:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent">     <TextView         android:layout_weight="1"         android:layout_width="match_parent"         android:layout_height="0dp" />     <Button         android:layout_gravity="center"         android:text="Thangcoder.com"         android:layout_width="wrap_content"         android:layout_height="wrap_content" /> </LinearLayout>

Ở trên là mình dụng mẹo đó nhé, đây là điều không tốt chút nào và trong video  phái dưới mìn sẽ nói rõ hơn.

Code trong RelativeLayout :

1 2 3 4 5 6 7 8 9 10 11

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="match_parent"     android:layout_height="match_parent">     <Button         android:layout_alignParentBottom="true"         android:text="Thangcoder.com"         android:layout_centerHorizontal="true"         android:layout_width="wrap_content"         android:layout_height="wrap_content" /> </RelativeLayout>

Kết quả:

Canh lề trong LinearLayout

Rất đơn giản mà nó có đã đẩy được nút button xuống rồi, bạn có thể copy code bỏ vào một file layout để xem nhé. Thuộc tính android:layout_alignParentBottom=”true” này có nghĩa là hãy xếp tôi ở dưới cùng của view cha, mà ở đây view cha chính là thằng RelativeLayout đang bao bọc nó.