RSSHTML5 - CANVAS

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

Phần định dạng xml khá đơn giản. Bây giờ chúng ta sẽ xây dựng lớp đối tượng CustomButton tương ứng. Trong package com.danweb.vietnamtourism tạo một lớp đối tượng mới có tên CustomButton kế thừa từ lớp LinearLayout...

 3.2 Xây dựng lớp đối tượng CustomButton tương ứng

Phần định dạng xml khá đơn giản. Bây giờ chúng ta sẽ xây dựng lớp đối tượng CustomButton tương ứng.
Trong package com.danweb.vietnamtourism tạo một lớp đối tượng mới có tên CustomButton kế thừa từ lớp LinearLayout như sau:

customview3

Việc tiếp sau là chúng ta sẽ đi tạo tập tin layout cho CustomButton. Như chúng ta đã nói ở trên thì mỗi CustomButton sẽ gồm

  • Một background màu trắng
  • Một hình đại diện cho background (sẽ dùng một ImageView)
  • Một nhãn của CustomButton (sẽ dùng một TextView)

Trong thư mục res/layout của ứng dụng tạo tập tin có tên custom_button.xml và nhập nội dung như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical" >
      <ImageView 
      	android:id="@+id/CustomButtonImage"
      	android:layout_width="fill_parent"
      	android:layout_height="0dp"
      	android:layout_weight="4"
      	android:src="/@drawable/ic_launcher"
      	android:scaleType="fitXY"
      	android:background="#fff"
      	android:paddingLeft="5dp"
      	android:paddingTop="5dp"
      	android:paddingRight="5dp"
      	android:paddingBottom="20dp"
      />
     <TextView 
        android:id="@+id/CustomButtonText"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Label Here"
        android:textStyle="bold"
        android:padding="5dp"
        android:gravity="center_horizontal"
        />
</LinearLayout>

Đoạn code xml trên dùng tạo ra một LinearLayout nằm dọc trong nó bao gồm 1 ImageView và một TextView. Nếu chính xác thì chuyển qua chế độ design chúng ta sẽ thấy nó hiển thị như sau:

customview4

Quay trở lại lớp CustomButton, hiện tại mã của nó như sau:

package com.danweb.vietnamtourism;
import android.content.Context;
import android.widget.LinearLayout;
public class CustomButton extends LinearLayout {
	public CustomButton(Context context) {
		super(context);
		
	}
}

Việc chúng ta cần làm bây giờ là viết mã để sao cho lớp CustomButton này làm việc với các thẻ com.danweb.vietnamtourism.CustomButton để lấy các thuộc tính đã thiết lập. Sau đó nó cũng đọc tập tin res/layout/custom_button.xml dựa vào đó để tạo sự hiển thị trên trang.

Code cài đặt cơ bản cho lớp này sẽ như sau:

package com.danweb.vietnamtourism;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class CustomButton extends LinearLayout {
	
	/*2 thuộc tính tương ứng với 2 view 
	 * trong tập tin custom_button.xml
	 */
	ImageView 	thumb = null;
	TextView 	label = null;
	
	public CustomButton(Context context, AttributeSet attrs) {
		super(context,attrs);
		//chuẩn bị đọc tập tin custom_button.xml
		LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if(inflater != null){       
            inflater.inflate(R.layout.custom_button, this);
            
			//đọc tập tin custom_button.xml lấy về 2 View tương ứng
			this.thumb = (ImageView) findViewById(R.id.CustomButtonImage);
			this.label = (TextView) findViewById(R.id.CustomButtonText);
			
			//lấy thuộc tính text từ thẻ com.danweb.vietnamtourism.CustomButton
			CharSequence labelText = attrs.getAttributeValue("http://schemas.android.com/apk/res/android", "text");
			
			//thiết lập cho TextView trên CustomButton hiện tại
			this.label.setText(labelText);
			
			//lấy id của drawable từ thẻ com.danweb.vietnamtourism.CustomButton
			int resId = attrs.getAttributeResourceValue("http://schemas.android.com/apk/res/android", "src", 0);
			
			//thiết lập cho ImageView trên CustomButton hiện tại
			this.thumb.setImageResource(resId);
        }
	}
}

Các bạn có thể đọc các comment trong mã để hiểu rõ mỗi dòng lệnh thực hiện cụ thể công việc gì. 

Ở đây chúng ta tự xử lý 2 thuộc tính gồm có thuộc tính background và thuộc tính text của thẻ com.danweb.vietnamtourism.CustomButton. Như các bạn thấy lớp CustomButton này kế thừa từ lớp LinearLayout. Vì vậy nếu trong thẻ com.danweb.vietnamtourism.CustomBottun các bạn khai báo các thuộc tính của thẻ LinearLayout (ví dụ như layout_margin, layout_padding…) thì bản thân chúng đã được xử lý trong lớp cơ sở LinearLayout rồi.

Rồi, giờ các bạn chạy ứng dụng này trên Emulator chúng ta sẽ thu được màn hình chính hiển thị như sau:

customview5

Tiếp theo là các thao tác viết mã xử lý sự kiện cho CustomButton. Các bạn viết mã xử lý trong MainActivity một cách bình thường như với các View khác. Ví dụ sau đây sẽ thực hiện việc Toast ra dòng Vietnam – Timeless Charm khi nhấn vào “nút” Vietnamese.

package com.danweb.vietnamtourism;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        CustomButton vietnamese = (CustomButton) findViewById(R.id.iconVietnamese);
        vietnamese.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(getApplicationContext(), 
						"Việt Nam - Timeless Charm", 
						Toast.LENGTH_LONG).show();
			}
		});
    }
}

Và kết quả khi nhấn vào “nút” Vietnamese sẽ Toast ra như sau:

cstomview6

Tới đây, nếu bạn nhanh ý có thể nhận ra ngay điểm hay là nếu chúng ta muốn viết hiệu ứng khi người dùng nhấn một CustomButton thì chúng ta chỉ cần xây dựng một phương thức thực hiện điều này trong lớp CustomButton là có tác động lên tất cả 3 cái “nút nhấn” đã đặt lên giao diện như ở trên.

4. Kết luận

Việc xây dựng Custom-View khi lập trình ứng dụng cho Android là công việc rất thường xuyên phải làm. Khi bạn cần hiển thị nhiều đối tượng kết hợp nhiều thành phần View nhau lên giao diện thì việc tạo CustomView là kĩ thuật giúp làm cho Project mạch lạc hơn và giảm rất nhiều công sức code.

Khi có nhu cầu thay đổi Custom-View chúng ta chỉ cần thay đổi xử lý trong lớp Custom-View tương ứng là có thể tác dụng trên tất cả các Custom-View tương ứng trên giao diện. Điều này giúp việc cập nhật ứng dụng dễ dàng và nhanh chóng hơn nhiều.

Bản thân các View sẵn có của Android không được linh hoạt và hiển thị cũng không được đẹp mắt lắm. Custom-View là kĩ thuật giúp chúng ta có thể dễ dạng định nghĩa lại các View có sẵn nếu cần.

Bài tiếp sau chúng ta sẽ đề cập đến Custom-ListView. Và tất nhiên các bạn có thể áp dụng cách thức tương tự để làm Custom_GridView.

Tải source-code Project VietnamTourism vừa làm tại đây VietnamTourism.zip

Đào Ngọc Giang

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