[Android Cơ Bản] LinearLayout trong Android

Đăng kí nhận tài liệu qua email : http://www.dotplays.com/tai-lieu-java-android/

Hi các em, trong bài viết này thầy giới thiệu tới các em cách thiết kế giao diện cơ bản với LinearLayout trong Android.

Bộ thư viện Android SDK cung cấp rất nhiều đối tượng dạng “khung” để thiết kế giao diện ví dụ như : LinearLayout, RelativeLayout, ListView, ConstraintsLayout … tùy từng mục đích sử dụng, trong quá trình thiết kế chúng ta sẽ sử dụng nhưng layout này cho phù hợp .Trong bài ngày hnay chúng ta bước đầu làm quen với cách thiết kế giao diện trong android và các thuộc tính cơ bản

Chương trình Android Studio cung cấp cho chúng ta cơ chế để thiết kế giao diện thông qua file .xml nằm tại thư mục res / layout.

Sau khi tạo dự án mới như trong bài Nhập môn Android thầy đã viết lần trước, các bạn mở file activity_main.xml

Các em lưu ý : để thiết kế giao diện Android Studio cung cấp 2 tùy chọn
1 là Design, 2 là Text .
Tab Design : Dùng để thiết kế giao diện dạng kéo thả. Cách này sử dụng khi các bạn đã thành thạo về công cụ, cũng như các thành phần giao diện
Tab Text : Dùng để thiết kế giao diện bằng cách soạn thảo các đổi tượng giao diện trên 1 editor, dưới định dạng là xml. Nếu là người mới học lập trình Android, thì các em chỉ sử dụng bên tab là Text nhé

Phía bên phải màn hình là cửa sổ Preview cho phép xem trước giao diện mà em đang thiết kế
Tab Design dùng để kéo thả và chỉnh sửa giao diện, tuy nhiên chỉ dùng khi đã thành thạo thiết kế trong lập trình Android

Trong file activity_main.xml các em thấy có 1 thẻ lớn nhất là ConstraintLayout chứa 1 thẻ khác là TextView. Để bắt đầu với LinearLayout các em đổi lại như sau :

LinearLayout là gì ?

LinearLayout là 1 khung giao diện dùng để chứa các thành phần giao diện khác, hiển thị các thành phần nó chứa theo chiều dọc, hoặc ngang

Việc khai báo 1 đối tượng giao diện trong Android bắt buộc phải có 2 thuộc tính là layout_width và layout_height

android:layout_width : dùng để thiết lập chiều rộng của đối tượng giao diện

android:layout_height : dùng để thiết lập chiều cao của đối tượng giao diện

giá trị là wrap_content, match_parent hoặc chúng ta sử dụng đơn vị trong thiết kế Android là dp. ví dụ : android:layout_width=”100dp”. (dp là đơn vị đo chiều dài mà Google sử dụng để đo kích thước màn hình. Ví dụ : 160 dp = 1 inch – điều này có nghĩa 1dp = 1/160 = 0.00625 inch) trên 1 đơn vị dp có thể chứa 1 hoặc nhiều điểm ảnh)

Như ví dụ trong hình chúng ta đặt android:layout_witdh=”match_parent” có nghĩa là layout nãy sẽ có chiều rộng chiếm toàn bộ không gian hiển thị theo chiều ngang
còn nếu android:layout_witdh=”wrap_content” có nghĩa layout này có chiều ngang co giãn theo nội dung mà nó chứa hoặc hiển thị

Ngoài ra LinearLayout còn có các thuộc tính khác với ý nghĩa như sau :

android:orientation : tùy chọn vertical hoặc horizontal . Các thành phần LinearLayout chứa sẽ hiển thị sắp xếp từ trên xuống dưới hoặc từ trái qua phải

Các thành phần hiển thị từ trên xuống dưới khi chọn orientation : vertical

android:gravity : tùy chọn center, left, right, top, bottom, center_vertical,center_horizontal hoặc kết hợp top|left , …. Các thành phần LinearLayout chứa sẽ hiển thị theo ví trí được chọn ví dụ : center: hiển thị ra giữa,left : hiển thị về bên trái

Các thành phần hiển thị ra giữa khi chọn graviry: center

android:weightSum : chia LinearLayout thành n phần bằng nhau(đi kèm với layout_weight ở phía dưới)

chia màn hình thành 3 phần bằng nhau thông tin weight_sum

android:layout_weight : dùng cho các thành phần nằm trong LinearLayout, nếu layout_weight=”1″ thì là chiếm toàn bộ không gian có thể.

Lưu ý : trong thiết kế dự án thật, mn lưu ý tránh sử dụng thuộc tính weight do thuộc tính này sẽ khiến tốc độ hiển thị chậm hơn do chương trình phải tính toán lại để chia tỉ lệ theo màn hình.
Hiện tại để khắc phục chúng ta có thể sử dụng ConstraintLayout, thầy sẽ hướng dẫn ở các bài sau nhé

layout_weight=”1″ . nút Hello chiếm toàn bộ không gian có thể và đẩy 2 thành phần còn lại, tuy nhiên vẫn giữa cho 2 thành phần kia hiển thị trên màn hình

android:divider : thuộc tính sử dụng để hiển thị ảnh giữa các thành phần nằm trong LinearLayout
android:showDividers : thuộc tính để thiết lập ảnh divider hiển thị ở vị trí nào ví dụ : beginning : hiển thị divider ở vị trí bắt đầu, end: hiển thị divider ở vị trí cuối, middle : hiển thị divider ở giữa

trong ảnh, thầy sử dụng ảnh icon để làm divider, và cho thuộc tính middle khiến giữa các thành phần giao diện đều có ảnh icon, thông thường trong thiết kế sẽ sử dụng là 1 ảnh đường kẻ

Như vậy trong bài này, thầy đã giới thiệu tới các em 1 số các thuộc tính cơ bản hay dùng trong LinearLayout. Nếu các em có câu hỏi gì có thể comment tại bài viết này nhé.