Android View System: Kiến Thức Cơ Bản

Android View System là hệ thống thể hiện giao diện trong ứng dụng Android thông qua cấu trúc file XML để xây dựng lên giao diện. Hệ thống này về mặt kiến trúc lập trình có cấu trúc Tree, Node cha chính là Layout, các Node con có thể là Layout hoặc là View. Bài học này hướng dẫn chi tiết tính năng và cách dùng hợp lý của các loại Layout, View trong Android.

Android Layout

FrameLayout

Là một ViewGroup đơn giản nhất trong Android. Chính vì FrameLayout đơn giản nhất nên cũng có hiệu năng tốt nhất. Tuy nhiên nhược điểm của FrameLayout là rất khó để sắp xếp vị trí của các Element con bên trong nó. Vì vậy trong Lập trình Android chúng ta thường ít dùng FrameLayout trực tiếp, hoặc nếu có dùng cũng sẽ dùng thông qua CardView

CardView

CardView là một class kế thừa từ FrameLayout. Tuy nhiên CardView có thêm 1 số tính năng giúp cho các giao diện được vẽ bởi CardView sẽ trở nên hiện đại, đẹp và hấp dẫn hơn.

CardView cung cấp các API để setup cho một View có hình dạng Card, tùy chỉnh được bo góc, đổ bóng (shadow), màu sắc. Và có thể tùy biến các Element con bên trong CardView một cách dễ dàng.

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<!--         Child Elements-->
</androidx.cardview.widget.CardView>

Chi tiết cách sử dụng CardView hiệu quả chúng ta sẽ đi qua trong phần bài tập thực hành của Khóa học lập trình Android

LinearLayout

LinearLayout là một dạng ViewGroup khác của Android. Trong LinearLayout các Element con được sắp xếp liền kề nhau theo chiều ngang hoặc chiều dọc (biến này được setup trong LinearLayout)

LinearLayout rất dễ sử dụng và tiện dụng trong xây dựng giao diện. Ở các bài học tiếp theo mình sẽ hướng dẫn bạn sử dụng thành thạo các ViewGroup này để có một ứng dụng đẹp, như ý và có khả năng thu hút người dùng.

<LinearLayout
      android:orientation="vertical"
      android:padding="20dp"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <!--         Child Elements-->
</LinearLayout>

ConstraintLayout

ConstraintLayout là một dạng ViewGroup đặc biệt. ConstraintLayout được tạo ra để thay thế cho RelativeLayout, ngày nay trong các ứng dụng mới người ta đã bỏ hết RelativeLayout trong giao diện chính của ứng dụng và chuyển sang dung ConstraintLayout . Nguyên nhân sử dụng thay thế này là vì sự tối ưu hơn của ConstraintLayout thể hiện rõ ràng ở cách mà loại ViewGroup này tính toán vị trí dựa vào các ràng buộc giữa các Child Element bên trong chúng.

ConstraintLayout hỗ trợ đa dụng các ràng buộc để bạn có thể xây dựng UI phù hợp với từng trường hợp cụ thể. Tuy nhiên số lượng ràng buộc có rất nhiều. Để sử dụng thành thạo ConstraintLayout chúng ta cần nhiều thời gian luyện tập và gặp đủ nhiều trường hợp để ứng biến.

Trong khóa học lập trình Android này, Danh sẽ cùng bạn xây dựng giao diện của các ứng dụng hoàn toàn sử dụng ConstraintLayout, LinearLayout, CardView

Android View

TextView, Button

Về bản chất thì TextView và Button là 2 view giống nhau. Cả 2 đều là một View có khả năng hiện Text, và nhận sự kiện onClick và tùy chỉnh màu sắc, kích thước.

Ngoài ra khi đã thành thạo với hệ thống Android View System. Bạn hoàn toàn có thể tự xây dựng TextView, Button riêng cho mình.

<Button
    android:text="@string/execute_task_using_thread"
    android:onClick="@{() -> eventHandler.onClickExecUsingThread()}"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
    
<TextView
    android:id="@+id/text_view_by_stateflow"
    android:textSize="16sp"
    android:paddingTop="4dp"
    android:paddingBottom="4dp"
    tools:text="@string/updater_by_stateflow"
    android:text="@{textByStateFlow}"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

TextInputLayout

TextInputLayout là một loại View chuyên dùng để nhận input từ bán phím của user. Input có thể tùy ý là Text, Number, Password, … Bạn vui lòng xem ví dụ để hiểu rõ hơn

<com.google.android.material.textfield.TextInputLayout
    android:inputType="textPassword"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

Trong thực tế bạn sẽ cần phải lắng nghe sự kiện thay đổi giá trị của TextInputLayout trong code Android cho các mục đích của ứng dụng. Chi tiết sẽ được trình bày trong các ví dụ và dự án khóa học.

ImageView

Đây là View rất đơn giản, dùng để hiện thị một tấm ảnh lên màn hình.

Để load ảnh lên ImageView trong Android bạn có thể sử dụng các thư viện load ảnh android như Glide, Coil, hoặc tự xây dựng cho mình một cơ chế load ảnh… hoặc là set trực tiếp thông qua drawable trong Android Resource.

<ImageView
    android:id="@+id/image_view"
    android:contentDescription="@string/launcher_image"
    android:src="@drawable/ic_launcher_foreground"
    android:layout_width="200dp"
    android:layout_height="200dp"/>