Hướng dẫn cách tạo 1 custom ViewGroup P1

Custom ViewGroup
ViewGroup thông thường chúng ta hay gặp khi hoc android là LinearLayout, Relative Layout. Xây
dựng custom ViewGroup cho phép chúng ta tạo 1 tập các widget được sắp xếp theo ý muốn rồi đưa vào sử dụng.
Yêu cầu: Xây dựng ứng dụng dạng To Do List: Cho phép nhập vào nội dung công việc và thời gian thực hiện công việc rồi đưa vào list công việc. Cho phép xóa các công việc khỏi list.
B1: Khởi tạo project: File -> New -> Android Project
Project name: Example 3
Build Target: Chọn Android 1.5
Application name: Example 3
Package name: at.exam
Create Activity: Example
=> Kích nút Finish.
B2: Xây dựng custom view group trong XML. Đi tới res\layout tạo 1 file XML mới là list.xml. Gõ nội dung sau vào:
Mã:

Custom ViewGroup của chúng ta ở đây khá đơn giản, đó là 1 LinearLayout chứa 2 thành phần: 1 CheckBox và 1 LinearLayout khác gồm 2 TextView để hiển thị nộidung công việc và thời gian.B3: Đã xong giao diện cho custom ViewGroup, chúng ta sẽ thiết kế giao diện cho chương trình trong main.xml. Ở đây mình dùng lại giao diện của Example 2 trongbài 2.
Mã:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/andro
id"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:id="@+id/work_enter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/work_hint"
android:lines="1"
android:textSize="24px"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="50px"
android:layout_height="wrap_content"
android:text="@string/hour_edit"
android:typeface="normal"
android:textSize="15px"
android:textStyle="bold"
android:padding="5px"
/>
<EditText
android:id="@+id/hour_edit"
android:layout_width="45px"
android:layout_height="wrap_content"
android:hint="12"
android:textColorHint="@color/hint_color"
android:textSize="20px"
android:gravity="center"
android:padding="5px"
android:numeric="integer"
android:maxLength="2"
/>
<TextView
android:layout_width="65px"
android:layout_height="wrap_content"
android:text="@string/minute_edit"
android:typeface="normal"
android:textSize="15px"
android:textStyle="bold"
android:padding="5px"
/>
<EditText
android:id="@+id/minute_edit"
android:layout_width="45px"
android:layout_height="wrap_content"
android:hint="00"
android:textColorHint="@color/hint_color"
android:textSize="20px"
android:gravity="center"
android:padding="5px"
android:numeric="integer"
android:maxLength="2"
/>
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/button_content"
/>
<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
B4: Tạo file colors.xml trong res\value:
Mã:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="work_color">#ffffff</color>
<color name="time_color">#cccccc</color>
<color name="hint_color">#cccccc</color>
</resources>
work_color là màu của nội dung công việc trong list. time_color màu của thời gian
công việc. hint_color màu của text hint (dòng hướng dẫn) các EditText.
B5: Chỉnh sửa file strings.xml trong res\value:Mã:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Example 3</string>
<string name="work_hint">Enter the work
here</string>
<string name="hour_edit">Hour</string>
<string name="minute_edit">Minute</string>
<string name="button_content">Add work</string>
</resources>
B6: Time to coding. Đi tới src\at.exam tạo một class mới là CustomViewGroup
với nội dung sau:
Mã:
package at.exam;
import android.content.Context;
import android.view.LayoutInflater;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.TextView;
public class CustomViewGroup extends LinearLayout {
public CheckBox cb;
public TextView workContent;
public TextView timeContent;
public CustomViewGroup(Context context) {
super(context);

//Sử dụng LayoutInflater để gán giao diện trong
list.xml cho class này
LayoutInflater li = (LayoutInflater)
this.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
li.inflate(R.layout.list, this, true);
//Lấy về các View qua Id
cb = (CheckBox) findViewById(R.id.check_work);
workContent = (TextView)
findViewById(R.id.work_content);
timeContent = (TextView)
findViewById(R.id.time_content);
}
}
Đoạn code trên giúp ta định nghĩa giao diện của custom ViewGroup mới dựa trên file list.xml. Mọi người cũng có thể tạo giao diện bằng code, ko cần sử dụng XML nhưng sẽ phức tạp hơn và mình cũng ko giới thiệu ở đây.B7: Tạo 1 class Work cũng trong at.exam để thể hiện công việc:Mã:
package at.exam;
public class Work {
private String workContent;
private String timeContent;
private boolean isChecked;
public Work(String workContent, String timeContent)
{
this.workContent = workContent;
this.timeContent = timeContent;
isChecked = false;
}
public String getContent() {
return workContent;
}
public String getTime() {
return timeContent;
}
public void setChecked(boolean isChecked) {
this.isChecked = isChecked;
}
public boolean isChecked() {
return isChecked;
}
}
Code rất đơn giản nên mình sẽ không chú thích nữa.
(Nguồn sưu tầm)