Lập trình Android — June 10, 2016 at 9:31 am

ViewGroup và Custom Adapter trong Android

by

Trong bài này mình sẽ hướng dẫn cách tạo 1 custom ViewGroup, sử dụng ViewGroup này vào ListView, và cuối cùng là tạo 1 Option Menu. Đây cũng sẽ là bài cuối cùng mình viết về làm việc với View, các bài sau sẽ chuyển qua Intent và BroadCast Receiver.

Custom ViewGroup

ViewGroup thông thường chúng ta hay gặp 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.

lap-trinh-android-tphcm

B2: Xây dựng custom view group trong XML. Đi tới reslayout tạo 1 file XML mới là list.xml. Gõ nội dung sau vào:

Mã:
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:eek:rientation=”horizontal”>
<CheckBox
android:id=”@+id/check_work”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=””
android:paddingTop=”45px”
android:paddingRight=”10px”
/>
<LinearLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:eek:rientation=”vertical”
>
<TextView
android:id=”@+id/work_content”
android:textSize=”24px”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:lines=”1″
android:textColor=”@color/work_color”
/>
<TextView
android:id=”@+id/time_content”
android:textSize=”16px”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:lines=”1″
android:textColor=”@color/time_color”
/>
</LinearLayout>
</LinearLayout>
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ội dung công việc và thời gian.

hoc-lap-trinh-android-co-ban-den-nang-cao-13042016-1
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 trong bài 2.
Mã:
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:eek:rientation=”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:eek:rientation=”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>

>>>> Chia sẻ về cấu trúc Android cơ bản

B4: Tạo file colors.xml trong resvalue:

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 resvalue:

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>

Còn chần chừ gì nữa mà không học Android ngay hôm nay phải không bạn? Một chuyên ngành quá hấp dẫn, một món hời quá lớn vậy tại sao chúng ta – những người trẻ không nhanh tay nắm bắt nó ngay. Dưới đây là ViewGroup và Custom Adapter trong Android

Theo android.vn

Leave a Comment

Your email address will not be published. Required fields are marked *