Custom button và sử dụng thư viện Butterknife trong lập trình Android

Posted on by mtoplistChuyên mục:Top List

       Chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn cách custom button giống như hình ảnh các bạn thấy dưới đây!

Custom button in android

Source code

Ví dụ được viết bằng Android Studio, có thể tải về tại: link download android studio

Các bạn nên chuyển sang sử dụng Android studio vì cuối năm 2015 này, google sẽ không còn hỗ trợ Eclipse nữa, nhưng lý do quan trọng hơn là Android studio rất mạnh và có nhiều điểm tiện lợi hơn Eclipse (Các bạn sử dụng sẽ thấy điều này 😀 )

Bắt đầu nào!

Phần I: Butterknife
Butterknife là thư viện Android hỗ trợ Bind view và tự động cast đúng kiểu cho từng loại view. Giảm thiểu việc viết findViewId quá nhiều trong code.

Butterknife generate code nên sẽ không lo chuyện performance ở runtime so với cách viết truyền thống. Thư viện này đặc biệt hữu ích khi các bạn làm việc với layout có rất nhiều view, code xử lý view ngắn hơn và rõ ràng hơn.

Để sử dụng thư viện Butterknife:

chúng ta add dòng lệnh sau:

compile 'com.jakewharton:butterknife:5.1.1'

vào mục dependencies trong file build.grade:

giả sử có 5 Button view trong activity_main, ta sẽ khai báo trong file MainActivity:

@InjectView(R.id.btn_confirm)
 Button btnConfim;
@InjectView(R.id.btn_find_car)
 Button btnFindCar;
@InjectView(R.id.btn_call_centre)
 Button btnCallCentre;
@InjectView(R.id.btn_login)
 Button btnLogin;
@InjectView(R.id.btn_login_fb)
 Button btnLoginFb;

Trong hàm oncreate thay vì viết 5 dòng findViewById cả 5 button trên, ta chỉ sử dụng câu lệnh:

setContentView(R.layout.activity_main);
ButterKnife.inject(this);

Nó sẽ BindView vào các button cho chúng ta, giờ có thể xử lý các view được rồi 😀

để set onCLickListener ta dùng câu lệnh:

@OnClick({R.id.btn_confirm, R.id.btn_find_car,
            R.id.btn_call_centre, R.id.btn_login, R.id.btn_login_fb})
public void doOnClick(View v) {

    switch (v.getId()) {
        case R.id.btn_confirm:
            showToast("Confirm now");
            break;
        case R.id.btn_find_car:
            showToast("Find car now");
            break;
        case R.id.btn_call_centre:
            showToast("Call centre now");
            break;
        case R.id.btn_login:
            showToast("Login now");
            break;
        case R.id.btn_login_fb:
            showToast("Login with facebook");
            break;
        default:
            break;
    }
}

Butterknife có thể sử dụng trong cả Fragment và Listview… các bạn hãy tìm hiểu trên Google nhé :D, Nhắc lại là thư viện này hết sức hữu ích khi xử lý 1 lượng view lớn, các bạn nên sử dụng nó trong project của mình.

Phần II: Custom Button (Kết quả demo như hình ảnh bạn thấy ở trên)

– Các câu hỏi đặt ra:

1: Làm thế nào để nhấn vào 1 view, text trên đó đổi màu?

Nếu bạn sử dụng câu lệnh:

android:textColor="#88aaaaaa"

thì khi không click hay click nó vẫn 1 màu như thế (2 kí tự đầu là độ anpha, với 00 là trong suốt, FF là đặc nhất, 6 kí tự tiếp theo là mã RGB của màu, nếu k có 2 kí tự đầu thì mặc định alpha là FF).

Thay câu lệnh trên bằng:

android:textColor="@drawable/txt_selector_color_bkg"

txt_selector_color_bkg là 1 file xml mô tả màu text khi click và không click view.

2: Làm thế nào để thay đổi màu sắc background của button, border của button, khi click vào?

tương tự như trên, ta có câu lệnh:

android:background="@drawable/btn_yellow_selector_bkg"

btn_yellow_selector_bkg là 1 file xml mô tả view khi click và không click.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/btn_yellow_focused_bkg" android:state_pressed="true"/>
    <item android:drawable="@drawable/btn_yellow_focused_bkg" android:state_focused="true"/>
    <item android:drawable="@drawable/btn_yellow_no_focused_bkg"/>

</selector>

btn_yellow_focused_bkg:  background lúc click button (state_pressed = “true”)

btn_yellow_no_focused_bkg:  background lúc không click button.

Nội dung file btn_yellow_focused_bkg:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

    <solid android:color="#66000000" />

    <corners android:radius="2sp" />
    <stroke android:width="1px" android:color="#FFFE43" />

</shape>

shape=”retangle” : view có hình chữ nhật

solid android:color = “#66000000” màu sắc backgroud button

corners android:radius=”2sp” bo tròn 4 góc button với bán kính 2sp

stroke android:width=”1px” android:color=”#FFFE43″  đường viền quanh button độ rộng 1px

Bạn có thể download mã nguồn dưới đây để chi tiết hơn về ví dụ này, Các bạn sẽ tạo các view đẹp như các button trên zalo chẳng hạn 😀

Source code

Bài sau mình sẽ hướng dẫn tạo hình ảnh động lúc khởi động app và màn hình đăng nhập rất đẹp :D, Các bạn đón đọc nhé!

HappyCoding….

Share this:

Thích bài này:

Thích

Đang tải…

mtoplist