Trong lập trình android nó cung cấp một loạt các trình đối tượng giúp bạn có thể sử dụng trong giao diện người dùng ứng dụng, có thể kể ra 1 số thành phần như Buttons, Text Field , Check box, Toggle Buttons và còn nhiều thành phần khác nữa. Các thành phần tương tác trong giao diện của ứng dụng đó gọi tắt là UI Controls.
Thành phần chính của giao diện
Thành phần chính của một giao diện được gọi là View, một View là một đối tượng hiển thị một thứ gì đó lên màn hình, cái mà người dùng có thể tương tác và một ViewGroup là một đốt tượng chứa các đối tượng View và các đối tượng ViewGroup khác để xác định Layout của một giao diện.
Bạn xác định layout của bạn trong tập tin XML, file xml này cung cấp một cấu trúc mà có thể dễ dàng đọc được, tương tự như HTML. Như ví dụ trong hình trên có nội dung như sau: (vì trong ví dụ trên mình sử dụng RelativeLayout nên code sinh ra hơi nhiều)
<?xml version="1.0" encoding="utf-8"?>
<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="hidev4u.com.uicontrols.MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="UI Controls!"
android:textIsSelectable="false"
android:textSize="30dp"
android:singleLine="true" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/textView"
android:layout_marginTop="23dp"
android:text="New Button" />
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="@+id/button"
android:layout_marginEnd="42dp"
android:layout_marginRight="42dp">
<RadioButton
android:id="@+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="New RadioButton" />
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New RadioButton" />
</RadioGroup>
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/radioGroup"
android:layout_alignStart="@+id/radioGroup"
android:layout_below="@+id/radioGroup"
android:layout_marginTop="35dp"
android:checked="true"
android:text="New CheckBox" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/checkBox"
android:layout_alignStart="@+id/checkBox"
android:layout_below="@+id/checkBox"
android:text="New CheckBox" />
<Switch
android:id="@+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/toggleButton2"
android:layout_alignEnd="@+id/checkBox2"
android:layout_alignRight="@+id/checkBox2"
android:checked="true"
android:text="New Switch" />
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/checkBox2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:checked="true"
android:text="New ToggleButton" />
<ToggleButton
android:id="@+id/toggleButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:text="New ToggleButton" />
<Switch
android:id="@+id/switch2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/switch1"
android:layout_alignStart="@+id/switch1"
android:layout_below="@+id/switch1"
android:text="New Switch" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="@+id/button"
android:layout_below="@+id/radioGroup"
android:text="UI Controls"
android:focusable="true" />
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/seekBar"
android:layout_below="@+id/switch2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="30dp"
/>
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ratingBar"
android:layout_below="@+id/seekBar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="30dp" />
</RelativeLayout>
UI Controls trong Android
Android cung cấp khá nhiều các thành phần giao diện nhằm giúp lập trình viên xây dựng giao diện đồ họa cho ứng dụng của bạn đẹp hơn, mình đã liệt kê ra một số thành phần dưới đây:
- TextView : Hiển thị chuỗi lên màn hình.
- EditText : Là lớp con của TextView, người dùng có thể chỉnh sửa được chuỗi.
- Button : Một nút bấm mà người dùng có thể bấm giữ (press), bấm (click).
- ImageButton : Một nút bấm có hình ảnh.
- CheckBox : Cho phép người dùng bật/tắt một lựa chọn nào đó.Bạn có thể dùng UI Control này cho các lựa chọn có thể được chọn cùng nhau.
- RadioButton :UI Control này có 2 trạng thái: hoặc là bật, hoặc là tắt.
- RadioGroup : Một nhóm nhiều RadioButton.
- TimePicker : Cho phép người dùng chọn thời gian trong ngày, hoặc là dạng 24 giờ, hoặc là dạng AM/PM.
- DatePicker : Cho phép người dùng chọn ngày.
- …
Tạo một UI Control mới
Input Control là những thành phần tương tác trong giao diện của ứng dụng của bạn. Một đối tượng View chỉ có thể có một ID duy nhất để nhận dạng nó. Cú pháp của một ID bên trong thẻ XML là:
android:id=”@+id/my_id”
Để tạo một UI Control/View/Widget bạn phải định nghĩa View/Widget trong tập tin layout và gán cho nó ID:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/my_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UI Controls" />
</LinearLayout>
Cuối cùng tạo một Instance của đối tượng Control đó và truy xuất gọi nó từ layout ra xem dòng code bên dưới:
TextView myText = (TextView) findViewById(R.id.my_id);
Lời kết
Mong là qua bài viết này bạn có thể hiểu rõ hơn về các thành phần tương tác trong giao diện của ứng dụng android – Android UI Controls. Trong những loạt bài sau chúng ta sẽ bắt đầu đi sâu hơn về lập trình android, mình sẽ hướng dẫn các bạn học lập trình android qua ví dụ cụ thể và mình sẽ giải thích những vấn đề có trong ví dụ đó. Trong quá trình tìm hiểu nếu bạn gặp bất kỳ lỗi nào hay có bất kỳ góp ý hay chia sẻ gì, mong bạn có thể để lại comment bên dưới hoặc gửi mail về [email protected]. Xin cảm ơn!!
