Các thành phần giao diện (UI) cơ bản

Dẫn nhập

Ở bài trước chúng ta đã được tìm hiểu về cách debug (gỡ lỗi) chương trình Android bằng Android Studio. Thật ra là cũng chỉ sơ lược được về các lỗi thường gặp và cách xử lý chung nhất mà thôi, còn trong quá trình làm việc sẽ có vô số lỗi mà mình không thể tổng quát hết.

Mà thôi, lần này chúng ta sang bài học mới. Trước khi sang bài mới, đề nghị các bạn chuẩn bị kiểm tra miệng... à quên, kiểm tra mắt: Ở phần kết luận trong bài HƯỚNG DẪN DEBUG CƠ BẢN mình có đề cập đến việc tại sao nút khai báo ở ví dụ phần 2 (gỡ bug) lại không hiển thị.

Vậy thì hôm nay chúng ta sẽ giải quyết nó. Quẫy thôi!

---

Nội dung

Để có thể thực hành bài này trôi chảy, các bạn cần phải nắm chắc:

• HƯỚNG DẪN DEBUG CƠ BẢN

Ngoài ra ở bài này các bạn sẽ được biết về:

• Các loại "View".
• Phân biệt giữa "View" và "ViewGroup"
• Drawable.
• Themes.
• Cách lắp các View vào màn hình.

---

View

View là gì? View đơn giản là một thành phần hiển thị trên màn hình.

•  Một cái nút (Button) là một View.

• Một cái thanh kéo (SeekBar) cũng là một “View”:

Vậy chúng ta có thể phán chắc nịch luôn: Cái gì hiển thị trên màn hình thì nó là View.

Trong Android có rất nhiều loại View, phù hợp nhiều nhu cầu. Bản thân lập trình viên cũng có thể tự tạo ra view của riêng mình bằng cách code các lớp Java extends từ lớp View. Tí nữa ở cuối bài biết đâu sẽ có ví dụ, hí hí.

 Một số loại View tiêu biểu là (mình lấy ví dụ ở bản Android 6.0 mới):

• TextView: Hiển thị chữ. Có thể thay đổi nội dung chữ, màu sắc, kích cỡ, kiểu đậm/gạch chân,…
• Button: Nút. Có thể thay đổi độ rộng, cao, màu nền nút, kiểu viền, đổ bóng,…

• Switch: Công tắc. Có 2 chế độ gạt qua gạt lại như chơi điện tử, nhưng mà chỉ trái-phải thôi.

• EditText: Trường nhập văn bản. Là một ô nhập văn bản. Văn bản ở EditText có thể là 1 hay nhiều dòng, có thể cài đặt đầu vào chỉ được nhập số, nhập chữ hay nhập dạng mật khẩu.

• SeekBar: Thanh kéo. Sử dụng khi người dùng muốn thao tác gì đó về biên độ / độ lớn bằng tay.

  

Các View có những thuộc tính khác nhau, gọi là các attributes.

Ví dụ như EditText thì có attributes là maxLength (số ký tự tối đa) và maxLines (số dòng tối đa). TextView thì có fontSize (cỡ chữ) và inputType (kiểu nhập: số / chữ / email,…).

 Tuy nhiên các View đều có một số attributes chung như: 

• Layout_width: Độ dài chiều ngang của View. Có thể là con số cụ thể hoặc là wrap_content (Bao đủ nội dung bên trong thì thôi), hay match_parent (bằng với chiều ngang của View chứa nó).
• Layout_height: Độ dài chiều dọc của View. Có thể là con số cụ thể hoặc là wrap_content (Bao đủ nội dung bên trong thì thôi), hay match_parent (bằng với chiều dọc của View chứa nó).
• ID: Cái này rất quan trọng, mỗi một View trong một layout đều được gắn với một định danh (id) này để gắn chức năng với code Java ở trong. Sẽ được đề cập kỹ hơn ở phần sau.

---

ViewGroup    

Về bản chất, Viewgroup cũng là một View (Extends từ class View), nhưng cái khác là nó có thể chứa được các View khác bên trong. 

Các ViewGroup thường sử dụng: 

LinearLayout

Quá nổi tiếng, được sử dụng rất nhiều. Các View con cấp 1 trong Layout này sẽ được sắp xếp chỉ theo 1 hướng: Dọc hoặc ngang (Vertical / Horizontal), chỉ định bằng thuộc tính android:orientation.

Ví dụ:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.howkteam.helloworld.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello K-Team!"/>

    <SeekBar
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:progress="3"
        android:id="@+id/seekBar"/>

</LinearLayout>

Ta sẽ được kết quả là một màn hình với một nút và một seekbar trên dưới: 

 

Trong LinearLayout nhiều khả năng là bạn sẽ thấy có các thuộc tính sau hay được dùng: 

• Android:gravity: Căn lề của nội dung của View (hướng nội, giống thuộc tính text-align trong CSS).
• Android:layout_gravity: Căn lề hướng ngoại, so với ViewGroup chứa nó, giống thuộc tính float trong CSS.
• Android:layout_weight: Tỉ lệ của view đó so với view mẹ. Mặc đinh view mẹ nếu không đặt thuộc tính weight_sum thì sẽ là 1 và view con sẽ có tỉ lệ nằm trong khoảng từ 0 đến 1 (chấp nhận số thập phân). 

---

RelativeLayout

Khác với LinearLayout, RelativeLayout và các Layout con của nó hiển thị bằng các quan hệ với các layout trong cùng một layout mẹ, hoặc với chính layout mẹ. 

• Vị trí dựa trên quan hệ: layout_above, layout_below, layout_toLeftOf, layout_toRightOf
• Vị trí dựa trên layout mẹ: android:layout_centerHorizontal, android:layout_centerVertical
• Căn chỉnh dựa trên quan hệ: layout_alignTop, layout_alignBottom, layout_alignLeft, layout_alignRight, layout_alignBaseline
• Căn chỉnh dựa trên layout mẹ: layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight

 Ví dụ:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

<TextView
    android:id="@+id/label"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Email"/>

<EditText
    android:id="@+id/inputEmail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/label"/>

<Button
    android:id="@+id/btnLogin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/inputEmail"
    android:layout_alignParentLeft="true"
    android:layout_marginRight="5dp"
    android:text="Login"/>
</RelativeLayout>

Với đoạn code trên, chúng ta sẽ có: 

• EditText luôn nằm dưới TextView.
• Button luôn nằm dưới EditText có ID là inputEmail và căn bên trái so với layout mẹ là RelativeLayout bao ngoài. 

Tiếp theo, giả sử chúng ta có 2 button với kích cỡ khác nhau như sau do nội dung bên trong hoàn toàn khác:

XML Code:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1245678901234567890"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/button1"
        android:layout_below="@id/button1"
        android:text="CANCEL IT"/>
    
</RelativeLayout>

Để 2 nút này có độ dài ngang bằng nhau, chúng ta sẽ khiến cho nút thứ 2 căn lề phải theo nút thứ nhất bằng cách thêm code vào attributes cho button thứ 2: 

android:layout_alignRight="@id/button1"

 Kết quả là:

 

Bằng cách này, 2 thành phần sẽ được sắp xếp theo chiều dọc trên dưới, 2 lề trái phải sẽ tự điều chỉnh chiều rộng của 2 Button. 

---

FrameLayout

FrameLayout là dạng layout rất đơn giản: Tất cả những view nằm trong đều được nhồi nhét phía trong nó. Và nếu bạn cần một layout sắp xếp theo trục tọa độ Z (giống z-index trong CSS) thì đây chính là lựa chọn phù hợp cho bạn.

Ví dụ:

<FrameLayout
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:id="@+id/child1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="Image"
        android:src="@mipmap/ic_launcher" />
    <TextView
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child 2"
        android:layout_gravity="top|left" />
    <TextView
        android:id="@+id/child3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child 3"
        android:layout_gravity="top|right" />
</FrameLayout>

Kết quả: Chúng ta sẽ có một ImageView với kích thước lấp đầy FrameLayout, và 2 TextView đè lên ImageView đó. Và nếu 2 TextView ở trên cùng một vị trí thì TextView có id child3 sẽ đè lên child2.

---

Drawables là gì?

Drawables là…

• Những dạng file đồ họa 2 chiều mà Android có thể dựng được trên màn hình.
• Chúng có thể là ảnh PNG, JPG bình thường, đặt trong thư mục /res/drawables của project Android.
• Drawables cũng có thể là ảnh dạng vector, lưu trong file XML, cũng chứa trong thư mục /res/drawables.

 Thêm vào đó, drawables có các đặc điểm:

• Trong thư mục /res có các thư mục /drawables với đuôi -mdpi, -hdpi, -xhdpi, -xxhdpi. Các thư mục này chứa các ảnh tương đương với mật độ điểm ảnh của các thiết bị khác nhau.
• Ảnh dạng 9-patch là dạng ảnh bình thường, nhưng được chỉ định phần nào sẽ không bị kẽo giãn khi trưng lên các màn hình độ phân giải cao hơn so với ảnh.

 Để vô thư mục /drawables của Android, trong Android Studio, các bạn chuột phải vào thư mục res > drawable:

Drawable có thể được đặt vào trong màn hình ứng dụng Android rất dễ dàng bằng ImageView hoặc đặt dưới dạng background của một View nào đó.

Để nhập drawable vào project thì rất đơn giản: Chỉ việc copy vào thư mục drawable đã mở ở trên. Android Studio sẽ tự động nhận diện hình và đưa nó vào project:

Để sử dụng drawable chúng ta thường gặp 2 dạng:

Với ImageView: Gọi qua tham chiếu @drawable/<tên_file_không_bao_gồm_đuôi> của thuộc tính android:src như sau:

<ImageView
    android:id="@+id/child1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/app_name"
    android:src="@drawable/hucau" />

 Và ta được:

Với background của các View khác: Gọi qua tham chiếu drawable/<tên_file_không_bao_gồm_đuôi> của thuộc tính android:background:

<TextView
    android:textColor="@color/colorAccent"
    android:background="@drawable/hucau"
    android:textSize="50sp"
    android:id="@+id/child2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Child 2"
    android:layout_gravity="top|start" />

 Lúc này ảnh đã thành nền của TextView và sẽ đi theo TextView đó:

 Xét về các loại drawable thì chúng ta có những loại sau: 

• Resource Drawables: Là drawable lấy từ các file ngoài, như cái ảnh jpg ở trên.
• Bitmap Drawables: Là drawable dựng từ đối tượng của lớp Bitmap trong Android.
• Shape Drawables: Là drawable dưới dạng vector viết trong file XML.
• State Drawables: Là drawable chỉ đinh trạng thái của một View. Ví dụ sau đây mô tả một state drawable có tác dụng chỉ định các drawable khác cho trạng thái đã nhấn / chưa nhấn của một View:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_checked"
          android:state_checked="true" />
    <item android:drawable="@drawable/button_default" />
</selector>

---

Cách lắp View vào Activity 

Để đưa View vào Activity trong Android chúng ta cần qua 3 bước: 

• Chuẩn bị layout, các thành phần hiển thị, view cần thiết. Và theo quy ước (convention) code Android, các file layout sẽ có dạng activity_<tên>.xml , tương ứng với file Java có tên <tên>Activity.java.

Ví dụ: MainActivity.java tương ứng với layout activity_main.xml:

Cài đặt layout cho activity bằng phương thức setContentView.

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);
}

Liên kết giữa Java Object với View bằng phương thức findViewById. Toàn bộ code của class MainActivity.java sẽ như sau:

TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    setContentView(R.layout.activity_main);
    textView = (TextView) findViewById(R.id.child2);
}

Lưu ý: Chúng ta có thể tự tạo View ngay trong class Java mà không can thiệp đến file XML bằng cách chỉ định cho Activity khởi tạo layout, sau đó tạo View và thêm View vào trong layout, hoàn toàn code bằng Java:

TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frame_layout);
    TextView product = new TextView(this);
    product.setText("Hello Kteam");
    frameLayout.addView(product);
}

Đây cũng chính là lý do ở bài MỘT SỐ CÁCH DEBUG CƠ BẢN, Button ở ví dụ cuối cùng không hiển thị, do thiếu phương thức addView của Linear Layout bao ngoài nó. Và chúng ta được:

  

 

---

Kết luận

Qua bài này chúng ta đã nắm được View là gì, ViewGroup là gì, và cách đổ View vào Activity. Ngoài ra chúng ta đã có cái nhìn sơ bộ về Drawables và cách sử dụng Drawables trong ứng dụng.

Bài sau chúng ta sẽ tìm hiểu về INTENT & MANIFEST TRONG LẬP TRÌNH ANDROID

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”. 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.