[Android căn bản] Bài 3: Các loại layout trong Android – TUAN DC

5/5 – ( 1 bầu chọn )

Xin chào những bạn. chúc những bạn ngày mới tốt đẹp tất cả chúng ta lại gặp nhau trong series Android cơ bản truyền kỳ. Ở bài trước tôi đã ra mắt với những bạn cách tạo một project mới trong Android Studio và cấu trúc cơn bản của một giao diện trong Android ngày hôm nay tôi xin ra mắt đến những bạn một số ít dạng Layout cơ bản trong Android .

I. Layout là gì?

Nếu bạn nào đã từng đã từng học thiết web thi hẳn đã biết muốn kiến thiết xây dựng một giao diện website thì ta sẽ phải dựng những layout bố cục tổng quan cho website đó và Android cũng vậy ta cũng phải dùng những layout được Android phân phối sẵn để tiềm ẩn và sắp xếp bố cục tổng quan những view để tạo nên giao diện cho ứng dụng Android .

II. Các loại Layout.

Vậy Android có những loại layout nào. Android hỗ trợ 6 loại layoutRelativeLayoutLinearLayout,GridLayoutTableLayoutFrameLayoutConstraintLayout.

A. RelativeLayout.

RelativeLayout là loại Layout mà trong Layout vị trí của mỗi view con sẽ được xác định so với view khác hoặc so với thành phần cha của chúng thông qua ID. Bạn có thể sắp xếp 1 view ở bên trái, bên phải view khác hoặc ở giữa màn hình. Ví dụ tôi có một màn hình như sau.

Ví dụ về Relativelayout

và đây là code của ví dụ trên.




    

    

    

    

Như bạn thấy trong ví dụ trên tôi có 4 cái hộp với màu sắc khác nhau được sắp xếp cạnh nhau và mỗi hộp đều được gán id từ hop1->hop4 như bạn thấy hộp 2 ở bên phải hộp 1 nên tôi dùng thuộc tính android:layout_toRightOf="@+id/hop1" để đưa hộp 2 về bên phải hộp 1 và bạn thấy hộp 4 nằm bên phải hộp 3 và dưới hộp 2 nên tôi sử dụng hai thuộc tính

android:layout_below="@+id/hop2" android:layout_toRightOf="@+id/hop3"

để đưa hộp 4 về bên trái hộp 3 và dưới hộp hai. Bạn thấy trong thuộc tính android:layout_toRightOf có giá trị là 1 id của một view vì Relative Layout sử dụng ID để xác định các vị trí của view với nhau mà.

Như vậy là tôi đã giới thiệu xong Relative Layout.

B. LinearLayout

LinearLayout là loại layout sẽ sắp xếp các view theo chiều dọc hoặc ngang theo thứ tự của các view.

Ví dụ: LinearLayout nằm ngang

LinearLayout horizontal

Code





    

Như bạn thấy các view sẽ được sắp sếp theo chiều ngang bởi thuộc tính android:orientation="horizontal" của Linearlayout là chiều ngang và các view được sắp xếp theo đúng thứ tự view trước đứng trước từ trái qua phải.

Ví dụ: LinearLayout nằm dọc

relative layout vertical

Code:





    

Như các bạn thấy các view trong LinearLayout sẽ được hiển thị theo chiều dọc từ trên xuống dưới.

Vậy là tôi đã giới thiệu với các bạn về LinearLayout.

C. GridLayout

Bạn biết framework bootstrap nổi tiếng chứ.

Bootstrap

Thiết kế của Framework này là chia màn hình thành 12 cột và các dòng và gọi đây là giao diện dạng lưới hay để dẽ hiều hơn thì bạn hãy liên tưởng đến các lưới đánh cá của các ngư dân ấy. GridLayout của Android cũng tương tự chỉ là 1 layout dạng lưới và ta có thể chia các cột và dòng cho cái lưới đó, các view sẽ được dặt vào các ô trong cái lưới này.

Ví dụ

Code





    

Đấy là GridLayout các view được đặt trong các ộ của Gridlayout và số cột cũng như dòng được qui định bằng hai thuộc tinh:

android:columnCount="2" android:rowCount="2"

Vậy là tôi đã giới thiệu với các bạn về GridLayout

D. TableLayout

Nghe tên là bạn biết nó là dạng layout gì rồi đúng không nào nó là layout dạng bảng mà thôi cái này quá quen thuộc với tất cả chúng ta rồi .
Chỉ là cái bảng thôi mà

Nhìn gần giống như GridLayout nhưng chúng ta không thể quy định số cột và dòng ngay từ đầu được.

Ví dụ

TableLayout

Code



    
    

        
    
    
    

        

        

        
    
    
    

        

        
    

Đây là một ví dụ về TableLayout bạn sẽ sử dụng các thẻ để tạo ra các dòng cho bảng và các view sẽ nằm trong các dòng này.

D. Framelayout

Framelayout là dạng layout cơ bản nhất khi gắn các view lên layout này thì nó sẽ luôn giữ các view này ở phía góc trái màn hình và không cho chúng ta thay đồi vị trí của chúng, các view đưa vào sau sẽ đè lên view ở trước trừ khi bạn thiết lập transparent cho view sau đó.

Ví dụ

FrameLayout

Code:




    

    

Trong ví dụ trên hình màu xanh đã nằm trên hình màu hồng và bạn sẽ chẳng thế biến hóa vị trí của những view này .

E. ConstraintLayout

Đây là dạng layout mà các view nằm trong đó sẽ được xác định vị trí tương đối với các view khác. Đây là dạng layout mà Google mới công bố và được thiết kế để sử dụng hoàn toàn trên công cụ Design của Android Studio.

Ví dụ

ConstraintLayoutNhư bạn thấy trên ví dụ những view đều có vị trí tương đối với nhau .
Như vậy là tôi đã ra mắt với những bạn cơ bản về những loại layout trong Android và khi phong cách thiết kế giao diện thì ta sẽ sử dụng những layout này để phong cách thiết kế bố cục tổng quan cho giao diện. Bài ngày hôm nay đến đây là hết cảm ơn những bạn đã theo dõi và hẹn gặp lại những bạn lần sau chào tạm biệt .