Tìm hiểu về Styles Button và Custom Button trong Android.

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

Bài trước ta đã tìm hiểu cách Tạo Button và cách xử lý các event khi Button được click. Trong bài này ta sẽ Tìm hiểu về Styles Button và Custom Button trong Android.

Styles Button là những kiểu Button khác nhau, có thể do bạn tự tạo hoặc bạn áp dụng tài nguyên sẵn có. Để khai báo một Style cho Button nào đó bạn cần chỉ rõ tài nguyên trong thuộc tính android:background=”@drawable/…”.

Dưới đây là một kiểu Button lạ lạ có sẵn trong hệ thống mà bạn không cần phải tự tạo :

style="?android:attr/borderlessButtonStyle"

Bạn chỉ cần thêm thuộc tính trên vào một Button lúc thiết kế ở activity_main.xml. Ví dụ :

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/button1"
android:onClick="clickButton"
style="?android:attr/borderlessButtonStyle" />

Ngoài cách trên, bạn có thể Custom Button theo sở thích riêng của bản thân bằng cách tạo một File .xml trong mục res->drawable và chỉnh sửa File dó theo ý mình.

Trước tiên mình nói rõ, có hai kiểu Custom Button loại này. Một là mình chỉ sửa lại hình dáng của một Button. Ví dụ sửa nó thành hình gần elip, thêm nền màu vàng nhạt thay vì nền trắng… Hai là sửa lại trạng thái của Button khi không nhấn, được nhấn, hoặc đang nhấn. Ví dụ khi bình thường bạn để nó là màu vàng, khi nhấn nó chuyển sang đỏ, nhấn xong nó cho màu xanh. :3

Bây giờ, vẫn trong Project ButtonDemo mà chúng ta đã tạo ra từ bài trước. Các bạn đi đến res->drawable. Tạo thêm một File .xml mới bằng cách click chuột phải vào mục drawable->New->Other->Android XML File. Mở file .xml vừa tạo và code như sau để được Button loại một :

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:startColor="#ff0800"
android:endColor="#ffff00"
android:angle="270"  />
<padding android:left="10dp"ho
android:top="10dp"  
android:right="10dp"
android:bottom="10dp" />
<stroke android:color="#000000"
android:width="2dp"/>

<corners android:radius="4dp"/>

</shape>

Trong đó :

  • Thẻ gradient cho phép chúng ta rải màu vào Button từ màu startColor, kết thúc ở endColor
  • Thẻ padding là thẻ căn lề, nó giữ khoảng cách từ Text hoặc Image bên trong Button với viền theo các chiều trên, dưới, trái, phải.
  • Thẻ stroke cho biết màu viền và độ rộng viền.
  • Thẻ corners cho biết góc vuông của Button bị vát theo hình trò với bán kính 4dp.

Và code như sau để được Button loại hai : Các bạn hãy thêm ba hình vào mục res->drawable với tên lần lượt là button_pressed, button_focused và button_default nhé. Sau đó code file .xml như sau :

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

Các bạn thấy rằng :

  • item đầu tiên có android:state_pressed=”true” có nghĩa khi Button được nhấn thì nó hiện hình ảnh button_pressed mà ta đã thêm vào mục drawable trước đó.
  • item thứ hai có android:state_focused=”true” có nghĩa khi Button được focus thì nó hiện hình ảnh button_focused mà ta đã thêm vào mục drawable trước đó.
  • item thứ ba nó sẽ hiểm thị hình ảnh button_default khi Button ở trạng thái bình thường.

Kết luận : Trong cặp thẻ <shape>…</shape> là nơi chúng ta chỉnh sửa hình dáng và background của Button. Trong cặp thẻ <selector>…</selector> là nơi chúng ta chỉnh sửa Button khi nó ở các trạng thái khác nhau như được nhấn, không được nhấn…

Advertisement

Chia sẻ:

Thích bài này:

Thích

Đang tải…

mtoplist