RSSHTML5 - CANVAS

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

Tạo Custom View trong lập trình Android - Phần 1Đối với người lập trình ứng dụng cho Android thì chắc chắn kiến thức về Custom-View là rất quan trọng. Mình sẽ viết hướng dẫn chi tiết về Custom-View trong bài này. Ngoài ra mình sẽ viết tiếp tục bài thứ hai hướng dẫn chi tiết về Custom-ListView ngay sau bài này. Qua hai bài viết này hi vọng các bạn đang tìm hiểu lập trình ứng dụng cho Android sẽ hiểu rõ và ứng dụng chúng vào các dự án mà các bạn đang làm.

customview1Đối với người lập trình ứng dụng cho Android thì chắc chắn kiến thức về Custom-View là rất quan trọng. Mình sẽ viết hướng dẫn chi tiết về Custom-View trong bài này. Ngoài ra mình sẽ viết tiếp tục bài thứ hai hướng dẫn chi tiết về Custom-ListView ngay sau bài này. Qua hai bài viết này hi vọng các bạn đang tìm hiểu lập trình ứng dụng cho Android sẽ hiểu rõ và ứng dụng chúng vào các dự án mà các bạn đang làm.

Ứ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.

 

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.

Đào Ngọc Giang

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu