Android – Style và Theme



Một tài nguyên Style (Style Resource) định nghĩa Format và phần nhìn thấy của UI. Một Style có thể được áp dụng cho một View trong một file layout hoặc trong toàn bộ  Activity hoặc ứng dụng (trong file manifest).

Định nghĩa Style

Một Style được định nghĩa trong một tài nguyên XML resource, nằm riêng so với file XML định nghĩa layout. File XML nằm dưới thư mục res/values/ của Project và chứa node <resources>, đây là node bắt buộc trong file định nghĩa Style. Tên của file XML là tùy ý nhưng nó phải có đuôi là .xml.

Bạn có thể định nghĩa nhiều Style với thẻ <style> nhưng mỗi Style phải có tên duy nhất để nhận dạng nó. Các thuộc tính của Style trong Android được định nghĩa với thẻ <item> như ví dụ bên dưới:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:textSize">12pt</item>
      <item name="android:textColor">#00FF00</item>/> 
   </style>
</resources>

Giá trị của <item> có thể là một chuỗi, màu 16 bit (hex color), Reference tới một loại tài nguyên nào đó tùy thuộc vào tính chất của Style.

Ứng dụng Style

Một khi Style đã được định nghĩa, bạn có thể dùng nó trong file Layout XML như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <TextView
      android:id="@+id/text_id"
      style="@style/CustomFontStyle"
      android:text="@string/hello_world" />

</LinearLayout>

Thừa kế Style

Android hỗ trợ thừa kế các Style đã định nghĩa, bạn chỉ việc sửa các thuộc tính hoặc thêm mới thuộc tính theo ý muốn.

Để viết lại một Custom Theme, tạo và sửa file MyAndroidApp/res/values/themes.xml như sau:

<resources>
   ...
   <style name="MyCustomTheme" parent="android:style/Theme">
   <item name="android:textColorPrimary">#ffff0000</item>
   </style>
   ...
</resources>

Trong file AndroidManifest.xml hãy áp dụng Style “MyCustomTheme” cho Activity mà bạn muốn:

<activity
   android:name="com.myapp.MyActivity"
   ...
   android:theme="@style/MyCustomTheme"
   />

Kết quả là toàn bộ chữ trong Activity sẽ có màu đỏ tươi như hình bên dưới:

Theme

Theme trong Android

Khái niệm Style cũng khá dễ hiểu đúng không nào, bây giờ ta sẽ tìm hiểu thế nào là Theme. Theme là một Style trong Android được áp dụng cho toàn bộ Activity hoặc ứng dụng thay vì được áp dụng cho một View nào đó.

Để áp dụng Theme cho toàn bộ Activity của ứng dụng bạn mở file AndroidManifest.xml và chỉnh sửa tag <application>, thêm thuộc tính android:theme như sau:

<application android:theme="@style/CustomFontStyle">

Nhưng nếu bạn muốn áp dụng Theme cho 1 Activity nào đó thì ta điều chỉnh thẻ <activity>
như sau:

<activity android:theme="@style/CustomFontStyle">

Android cung cấp một số Theme viết sẵn, bạn có thể sử dụng hoặc thừa kế bằng cách sử dụng thuộc tính parent như bên dưới:

<style name="CustomTheme" parent="android:Theme.Light">
   ...
</style>

Áp dụng màu cho các thuộc tính của Theme

Tài nguyên màu sắc có thể được áp dụng cho các thuộc tính của Style và Theme. Các thuộc tính này có thể là màu nền, màu chữ…, hãy xem ví dụ bên dưới khi ta định nghĩa Theme “MyCustomTheme” trong file MyAndroidApp/res/values/styles.xml:

<resources>
   ...
   <style name="MyCustomTheme" ...>
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>

Theme

Dùng Custom Nine-Patch với Button

Một Nine-patch drawable là một dạng hình ảnh đặc biệt có thể co giãn theo chiều dài và rộng vừa với Container của nó. Nine-patch là cách thông dụng nhất để xác định giao diện của Button.

Nine Patch Button

Ví dụ Nine-Patch Button

Các bước để tạo Nine-Patch Button

  • Lưu file bitmap trong thư mục /res/drawable/ đặt tên là my_nine_patch.9.png
  • Định nghĩa một Style mới
  • Áp dụng Style mới này cho thuộc tính buttonStyle của Custom Theme

Định nghĩa một Style mới

<resources>
   ...
      <style name="MyCustomButton" parent="android:Widget.Button">
      <item name="android:background">@drawable/my_nine_patch</item>
      </style>
   ...
</resources>

Apply the theme

<resources>
   ...
      <style name="MyCustomTheme" parent=...>
         ...
         <item name="android:buttonStyle">@style/MyCustomButton</item>
      </style>
   ...
</resources>

Theme

 

Style & Theme mặc định

Platform Android cung cấp khá nhiều Style và Theme, chúng sẽ giúp bạn nhiều trong lập trình các ứng dụng Android. Bạn có thể tham khảo tời các Style sẵn có trong lớp R.style. Để dùng các Style này, bạn chỉ cần thay dấu gạch dưới bằng dấu chấm. Ví dụ để sử dụng Theme Theme_NoTitleBar bạn dùng “@android:style/Theme.NoTitleBar”. Bạn có thể xem source code của các Style và Theme sẵn có trong Android.

1268 Total Views 4 Views Today