header-object

Tạo Custom View trong lập trình Android - Phần 1

Ứng dụng demo trong cả hai bài viết này sẽ được xây dựng cho Android 2.3.3 là phiên bản hệ điều hành Android phổ biến nhất cho tới thời điểm hiện nay. Tuy nhiên các bạn vẫn có thể sử dụng các kiến thức này để thực hiện trên các phiên bản Android cao hơn như 3.x hoặc 4.x.

Loạt hai bài viết này dành cho đối tượng độc giả là những người đã biết sơ lược về việc lập trình ứng dụng cho Android. Tác giả rất hoan nghênh các ý kiến phản hồi của tất cả các bạn. Nếu có bất kì thắc mắc hoặc góp ý gì cho bài viết các bạn có thể để lại comment ngay sau bài viết hoặc trên group của Dân Web tại http://facebook.com/groups/danweb.

 

1. Giới thiệu tình huống mà ứng dụng có sử dụng Custom-View

Giả sử chúng ta đang phải thực hiện một ứng dụng giới thiệu du lịch Việt Nam. Màn hình chính của ứng dụng như sau:

customview1

Như các bạn thấy nó đơn giản nó chỉ gồm có 3 “nút nhấn” để có thể mở các màn hình khác tương ứng gồm Attractions, Vietnamese và Foods. Và tất nhiên ứng dụng có thể tới một thời điểm nào đó sẽ xuất hiện thêm các “nút nhấn” khác.

Mỗi nút nhấn như ta thấy gồm có một viền màu trắng, một hình ảnh tương ứng và một nhãn cho nút nhấn. Tất nhiên, nếu muốn cho ứng dụng sinh động và thân thiện hơn chúng ta sẽ cần tạo thêm hiệu ứng khi người dùng nhấn vào mỗi nút nhấn. Ví dụ như nút đó sẽ lớn ra rồi co lại + phát ra âm báo…

Ở trong ví dụ này, chúng ta sẽ tạo ra một Custom-View “nút nhấn”. Sau khi chúng ta tạo xong Custom-View này, chúng ta đặt bao nhiêu “nút nhấn” đặc biệt này lên giao diện cũng được (Sau khi chúng ta tạo ra Custom-View “nút nhấn” này thì sử dụng chúng giống như các View khác như Button hay ImageView… mà các bạn vẫn thường hay sử dụng).

 

2. Cơ bản về View trong lập trình Android

Nếu các bạn đã từng lập trình ứng dụng cho Android, các bạn đều biết khi nhắc đến một phần tử View thì chúng ta sẽ nghĩ ngay tới hai thành phần.

Thứ nhất là thẻ xml dùng để đặt phần tử View đó lên giao diện trong tập tin layout được xây dựng bằng xml.

Ví dụ sau là đoạn mã xml dùng để tạo ra một nút nhấn (Button) khi lập trình ứng dụng cho Android.

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

Thứ hai là lớp đối tượng tương ứng đã được cài đặt sẵn dùng để làm việc với phần tử View tương ứng. Đặc điểm của lớp này là tên lớp trùng với tên thẻ xml dùng để khai báo View.

Ví dụ với Button đã đặt lên giao diện ở bên trên, chúng ta sẽ tạo một đối tượng thuộc lớp Button trong Activity dùng để lấy về nút nhấn tương ứng như sau:

 Button    button1 = (Button) findViewById(R.id.button1); 

Và tương tự với phần lớn các loại View khác chúng ta cũng thực hiện tương tự như vậy.

 

3. Xây dựng Custom-View

Trong phần này, chúng ta sẽ từng bước tạo ra một Custom-View có tên là CustomButton để xử dụng trong ứng dụng.
Về cơ bản, để xây dựng lên một thành phần Custom-View khi lập trình ứng dụng Android các bạn cũng cần phải thực hiện tạo ra hai thành phần cơ bản của một View như vừa phân tích trên.

Thứ nhất: thẻ xml dùng để đặt Custom-View đó lên giao diện xây dựng bằng xml
Thứ hai: lớp đối tượng tương ứng với Custom-View chứa tất cả các xử lý cho Custom-View được xây dựng bằng java.

Trước tiên, bạn hãy tạo một Android Project với các thông tin như sau:

customview2

3.1 Định dạng xml của CustomButton

Về cơ bản, bạn có thể tạo một thẻ xml tương ứng với một Custom-View bất kì với tên của thẻ xml đó là <tên package của ứng dụng><.><tên Custom-View>. Ví dụ sau chúng ta tạo một thẻ xml cho CustomButton:

<com.danweb.vietnamtourism.CustomButton 
      android:id="@+id/attractions"
      android:text="Attractions" 
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:src="/@drawable/img_attractions"
/> 

Như các bạn thấy trong đoạn mã trên chúng ta đã tạo ra một thẻ xml có tên: com.danweb.vietnamtourism.CustomButton. Trong đó thì com.danweb.vietnamtourism là tên của package của ứng dụng đang xây dựng.

Trong thẻ xml này các bạn cũng tùy ý đặt các thuộc tính giống như các phần tử View mà chúng ta đã học. như ở ví dụ trên chúng ta đã đặt các thuộc tính gồm: id, text, layout_width, layout_height và src.

Quay lại tập tin res/layout/main_activity.xml, để có được giao diện như mong muốn chúng ta sẽ viết code như sau (ở đây coi như thẻ com.danweb.vietnamtourism.CustomButton như một View bình thường khác):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/LinearLayout1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:background="@drawable/intro"
      tools:context=".MainActivity" >
      
      <LinearLayout 
      	android:orientation="vertical"
      	android:layout_width="wrap_content"
      	android:layout_height="wrap_content"
      	android:layout_marginLeft="20dp"
      	android:layout_marginTop="20dp"
      	>
      		<com.danweb.vietnamtourism.CustomButton 
      			android:id="@+id/iconAttractions"
      			android:text="Attractions"
      			android:layout_width="fill_parent"
      			android:layout_height="fill_parent"
      			android:src="/@drawable/img_attractions"
      			android:layout_marginBottom="10dp"
      			/>
      		<com.danweb.vietnamtourism.CustomButton 
      			android:id="@+id/iconVietnamese"
      			android:text="Vietnamese"
      			android:layout_width="fill_parent"
      			android:layout_height="fill_parent"
      			android:src="/@drawable/img_vietnamese"
      			android:layout_marginBottom="10dp"
      			/>
      		<com.danweb.vietnamtourism.CustomButton 
      			android:id="@+id/iconFoods"
      			android:text="Foods"
      			android:layout_width="fill_parent"
      			android:layout_height="fill_parent"
      			android:src="/@drawable/img_foods"
      			android:layout_marginBottom="10dp"
      			/>
      </LinearLayout> 
</LinearLayout> 

Ở đây các bạn cũng lưu ý là chúng ta đã chép các hình ảnh vào thư mục res/drawable trước rồi. Các bạn có thể tải các hình ảnh phục vụ cho Project này tại đây hinh anh.zip.

Còn tiếp...

 

Đào Ngọc Giang

Bình luận  

 
0 #1 LichNhat Thứ 3-07-14 10:24
bài viết hay quá. rất dễ hiểu !
Trích dẫn
 

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 382 khách đang truy cập
2546508