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.

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

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:


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:


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:


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?


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

Ví dụ về LinearLayout

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


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:


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:


Đà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

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:


Ở 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 :


Kết quả:

Canh lề trong LinearLayout

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ó.

Trong video dưới đây mình sẽ nói rõ hơn cho các bạn hiểu, và mọi ý kiến thắc mắc, đóng góp gì xin các bạn cứ để lại comment nhé.

Video tìm hiểu về LinearLayout và RelativeLayout

Download source code

Chúc các bạn thành công!

Tiếp theo

Bài 9: LinearLayout, RelativeLayout trong android
5 (100%) 1 vote

5 Comments

  1. Aru March 17, 2017
  2. Tuấn Anh March 20, 2017
    • trangchongcheng March 20, 2017
  3. Nam Khanh June 10, 2017
    • trangchongcheng June 12, 2017

Add Comment

*