Các View Cơ Bản trong Android

Trong Android có nhiều thành phần hỗ trợ giao diện và tương tác với người sử dụng như:

• TextView: những dòng chữ hiển thị trên thiết bị.
• Button: các nút bấm.
• EditText: khung nhập liệu.
• ImageView: hiển thị hình ảnh.
• ListView, GridView, RecycleView: danh sách có thể cuộn lên xuống.
• ...

Đều được gọi là View, mỗi View có 1 chức năng riêng như miêu tả. Khi lập trình với Android, cần tạo giao diện đơn giản thì những View này rất hữu ích.

Căn bản về View trong Android

Những gì nhìn thấy trên màn hình thiết bị Android được gọi là View (trong Windows thường được gọi là Control). View được vẽ trên thiết bị Android với 1 hình chữ nhật.

Các View cơ bản và thường xuyên sử dụng trong Android như: TextView, EditText, ImageView, Button, CheckBox, RadioButton. Các View này đều được kế thừa từ class View.

Tạo View trong Android

Để tạo View trong Android có thể sử dụng 2 cách sau:

• Tạo View trong Android bằng XML.
• Tạo View trong Android bằng Java.

Tạo View trong Android bằng XML

<TextView
     android:id="@+id/tv_Hello"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#31a18c"
     android:textSize="18sp"
     android:textStyle="bold"
     android:text="Hello World!" />

Tạo View trong Android bằng Java

TextView tvHello = new TextView(this);
tvHello.setBackgroundColor(Color.parseColor("31a18c"));
tvHello.setText("Hello World");

Các thuộc tính của View

layout_height

Thuộc tính layout_height quy định chiều cao của View và có các giá trị như sau:

• match_parent: chiều cao của View sẽ bằng đúng chiều cao của phần tử cha chứa nó.
• wrap_content: chiều cao của View phụ thuộc vào content của View.
• Giá trị xác định: đơn vị chiều cao của View như dp, px, in, mm, sp, ...

layout_width

Thuộc tính layout_width quy định chiều rộng của View và có các giá trị như sau:

• match_width: chiều rộng của View sẽ bằng đúng chiều rộng của phần tử cha chứa nó.
• wrap_content: chiều rộng của View phụ thuộc vào content của View.
• Giá trị xác định: đơn vị chiều rộng của View như dp, px, in, mm, sp, ...

id

Thuộc tính id xác định id của View, được khai báo ở file định nghĩa giao diện XML và sử dụng lại trong code Java để ánh xạ đối tượng, tìm kiếm các View trong code Java khi cần.

Trong file XML:

<TextView
     android:id="@+id/tv_message"
     android:layout_width="wrap_content"
     android:text="eitguide.com"
     android:layout_height="wrap_content"/>

Và ánh xạ đối tượng TextView trong XML thông qua id trong Java:

TextView tvMessage = (TextView)findViewById(R.id.tv_message);

Phương thức findViewById() sẽ trả về về View cho nên cần ép kiểu về kiểu mong muốn, ở đây là TextView.

background

Thuộc tính background xác định màu nền của View.

android:background="#ffffff" // white color

margin và padding

• margin: là khoảng cách từ các cạnh của View hiện tại tới các View khác.
• padding: là khoảng cách từ các cạnh của View tới phần nội dung bên trong.

Ví dụ View chưa đặt margin và padding:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<TextView
     android:id="@+id/tv_message"
     android:text="Welcome to eitguide.com"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#1090a4"/>
</FrameLayout>

Kết quả:

Thêm thuộc tính marginTop và marginLeft:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv_message"
        android:text="Welcome to eitguide.com"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="32dp"
        android:background="#1090a4"/>
</FrameLayout>

Thêm thuộc tính paddingTop và padingBottom:

Các View cơ bản trong Android

TextView

TextView là View dùng để hiển thị văn bản (text) lên màn hình. TextView được định nghĩa bởi thẻ <TextView> trong XML:

<TextView
     attribute1="value"
     attribute2="value"
     attribute3="value"
... />

Tất cả các View được khởi tạo bằng XML bắt buộc phải có 2 thuộc tính:

• layout_width.
• layout_height.

Các thuộc tính của TextView

android:text: xác định văn bản sẽ hiển thị lên TextView.

<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="text in here" />

android:textColor: xác định màu chữ của TextView.

<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textColor="#19b698" />

android:textSize: xác định kích thước chữ của TextView.

<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="18sp" />

android:textStyle: xác định kiểu chữ TextView, có 3 giá trị là normal (thông thường), bold (in đậm), ilalic (nghiêng).

android:background: xác định màu nền TextView.

<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#c0392b" />

android:drawableLeft: xác định drawable nằm bên trái văn bản.

• Ngoài ra còn có android:drawableRight, android:drawableTop, android:drawableBottom: nằm bên phải, bên trên, bên dưới văn bản.

<TextView
     android:id="@+id/tv_message"
     android:text="Welcome to eitguide.net"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:drawableLeft="@drawable/cast_ic_notification_0"
     android:background="#1090a4" />

EditText

EditText là View dùng để lấy giá trị từ người dùng nhập vào. EditText được định nghĩa bởi thẻ <EditText> trong XML.

<EditText
     attribute1="value"
     attribute2="value"
     attribute3="value"
... />

1 số thuộc tính của EditText:

• android:text: xác định văn bản hiển thị lên EditText.
• android:textColor: xác định màu của text.
• android:textSize: xác định kích thước của text.
• android:textStyle: xác định kiểu của văn bản gồm các giá trị italic (nghiêng), bold (in đậm), normal (kiểu thường).
• android:inputType: xác định phương thức nhập của Edittext.
  • Có các giá trị như sau: text, number, textPassword, phone, textUrl, …

Để lấy text của EditText trong Java làm như sau:

• Lấy EditText thông qua id trong file XML.
• Sử dụng phương thức getText() của EditText để lấy chuỗi.

EditText edtMessage = (TextView)findViewById(R.id.edt_message);
String value = edtMessage.getText().toString();

Ví dụ file XML có nội dung:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:id="@+id/edt_message"
        android:text="eitguide.com"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</FrameLayout>

Và lấy chuỗi của EditText trong Java:

EditText edtMessage = (EditText)findViewById(R.id.edt_message);
String value = edtMessage.getText().toString();

Button

Button là View dùng để nhận 1 các cú chạm (nhấn nút) và thực hiện các chức năng trong phương thức onClick(). Button được định nghĩa bởi thẻ <Button> trong XML.

<Button
   android:id="@+id/btn_Click"
   android:text="Click Me"
   android:textStyle="italic"
   android:textColor="@color/colorAccent"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

1 số thuộc tính:

• android:id: xác định id.
• android:text: xác định văn bản sẽ hiển thị. 
• android:textColor: xác định màu văn bản.
• android:background: xác định màu nền.

Để thực hiện những khối lệnh khi nhấp chuột vào Button làm như sau:

• Lấy về đối tượng Button thông qua id được khai báo ở file XML.
• Đặt bộ lắng nghe sự kiện cho Button thông qua phương thức setOnClickListener() và xử lý các công việc trong phương thức onClick().

Button btnClick = (Button)findViewById(R.id.btn_click);
btnClick.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    }
});

ImageView

ImageView là View dùng để hiển thị hình ảnh.

1 số thuộc tính phổ biến của ImageView:

• android:id: xác định id.
• android:src: xác định nguồn hình ảnh hoặc drawable.
• android:scaleType: kiểu hiển thị hình ảnh của ImageView.
  • Có các giá trị: fitCenter, fitStart, fitEnd, center, centerCrop, centerInside, matrix.

Ví dụ khai báo ImageView trong file XML:

<ImageView
    android:scaleType="centerCrop"
    android:src="@drawable/keep_calm"
    android:layout_gravity="center_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Thử thay đổi thuộc tính scaleType để thấy rõ sự khác biệt.

Để gán hình ảnh động trong Java, sử dụng các phương thức sau:

• Nếu nguồn là bitmap: void setImageBitmap(Bitmap bm).
• Nếu nguồn là id của hình ảnh nằm trong thư mục drawable: void setImageResource(@DrawableRes int resId).
• Nếu nguồn là drawable: void setImageDrawable(@Nullable Drawable drawable).