Android - Kiểu và chủ đề

Học lập trình Android : Một phong cách tài nguyên xác định định dạng và tìm kiếm một giao diện người dùng. Một kiểu có thể được áp dụng cho một Chế độ xem riêng lẻ (từ bên trong tệp bố cục) hoặc cho toàn bộ Hoạt động hoặc ứng dụng (từ bên trong tệp kê khai).

Xác định kiểu

Một kiểu được định nghĩa trong một tài nguyên XML tách biệt với XML xác định bố cục. Tệp XML này nằm trong thư mục res / values ​​/ của dự án của bạn và sẽ có <resources> làm nút gốc, là bắt buộc cho tệp kiểu. Tên của tệp XML là tùy ý, nhưng nó phải sử dụng phần mở rộng .xml.

Bạn có thể xác định nhiều kiểu cho mỗi tệp bằng cách sử dụng thẻ <style>nhưng mỗi kiểu sẽ có tên của nó để nhận dạng kiểu duy nhất. Các thuộc tính kiểu Android được đặt bằng thẻ <item> như được hiển thị 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ị cho <item> có thể là chuỗi từ khóa, màu hex, tham chiếu đến loại tài nguyên khác hoặc giá trị khác tùy thuộc vào thuộc tính kiểu.

Sử dụng kiểu

Khi phong cách của bạn được xác định, bạn có thể sử dụng nó trong tệp XML Layout của bạn bằng cách sử dụng thuộc tính style 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>

Để hiểu khái niệm liên quan đến Android Style, bạn có thể kiểm tra Ví dụ về mẫu thử nghiệm .

Phong cách thừa kế

Android hỗ trợ kiểu dáng Thừa kế theo cách rất giống với bảng định kiểu xếp tầng trong thiết kế web. Bạn có thể sử dụng điều này để kế thừa các thuộc tính từ kiểu hiện có và sau đó chỉ xác định các thuộc tính mà bạn muốn thay đổi hoặc thêm.

Để triển khai chủ đề tùy chỉnh, hãy tạo hoặc chỉnh sửa My Android App / res / values ​​/ themes.xml và thêm các mục sau đây

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

Trong tệp Android Manifest.xml của bạn, hãy áp dụng chủ đề cho các hoạt động bạn muốn tạo kiểu

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

Chủ đề mới của bạn sẽ được áp dụng cho hoạt động của bạn và văn bản hiện có màu đỏ tươi.

ảnh minh họa

Áp dụng màu sắc cho thuộc tính chủ đề

Sau đó, tài nguyên màu của bạn có thể được áp dụng cho một số thuộc tính chủ đề, chẳng hạn như nền cửa sổ và màu văn bản chính, bằng cách thêm các phần tử <item> vào chủ đề tùy chỉnh của bạn. Các thuộc tính này được định nghĩa trong tệp styles.xml của bạn. 

Ví dụ: để áp dụng màu tùy chỉnh cho nền cửa sổ, hãy thêm hai phần tử <item> sau vào chủ đề tùy chỉnh của bạn, được xác định trong tệp My Android App / 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>

ảnh minh họa

Sử dụng một bản vá tùy chỉnh với các nút

Một bản vá chín bản vá là một loại hình ảnh đặc biệt có thể được chia tỷ lệ theo chiều rộng và chiều cao trong khi duy trì tính toàn vẹn trực quan của nó. Chín bản vá là cách phổ biến nhất để chỉ định giao diện của các nút Android, mặc dù bất kỳ loại có thể kéo nào đều có thể được sử dụng.

MỘT MẪU CỦA NÚT NINE-PATCH

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

Lưu bitmap này dưới dạng /res/drawable/my_nine_patch.9.png

Xác định kiểu mới

Áp dụng kiểu nút mới cho thuộc tính buttonStyle của chủ đề tùy chỉnh của bạn

Xác định Kiểu mới

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

Áp dụng chủ đề

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

ảnh minh họa

Chủ đề Android

Hy vọng bạn hiểu khái niệm về Phong cách, vì vậy bây giờ chúng ta hãy cố gắng hiểu một Theme là gì . Chủ đề không là gì ngoài kiểu Android được áp dụng cho toàn bộ Hoạt động hoặc ứng dụng, chứ không phải là Chế độ xem riêng lẻ.

Do đó, khi một kiểu được áp dụng làm chủ đề, mỗi Chế độ xem trong Hoạt động hoặc ứng dụng sẽ áp dụng từng thuộc tính kiểu mà nó hỗ trợ. Ví dụ: bạn có thể áp dụng cùng một kiểu CustomFontStyle làm chủ đề cho Hoạt động và sau đó tất cả văn bản bên trong Hoạt động đó sẽ có phông chữ màu xanh lá cây monospace.

Để đặt chủ đề cho tất cả các hoạt động của ứng dụng, hãy mở tệp Android Manifest.xml và chỉnh sửa thẻ <application> để bao gồm thuộc tính android: theme với tên kiểu. 

Ví dụ

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

Nhưng nếu bạn muốn một chủ đề được áp dụng cho chỉ một Hoạt động trong ứng dụng của bạn, thì hãy thêm thuộc tính android: theme vào thẻ <activity>.

Ví dụ

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

Có một số chủ đề mặc định được Android xác định mà bạn có thể sử dụng trực tiếp hoặc kế thừa chúng bằng cách sử dụng thuộc tính cha mẹ như sau:

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

Để hiểu khái niệm liên quan đến Chủ đề Android, bạn có thể kiểm tra Ví dụ về Trình diễn Chủ đề .

ảnh minh họa

Tạo kiểu bảng màu

Thiết kế bố cục có thể triển khai dựa trên màu dựa trên chúng, ví dụ như thiết kế sau được thiết kế dựa trên màu sắc (màu xanh)

Bố cục trên đã được thiết kế dựa trên tệp style.xml, Đã đặt ở vị trí res / values ​​/

<resource>
   <style name="AppTheme" parent="android:Theme.Material"> 
      <item name ="android:color/primary">@color/primary</item>
      <item name ="android:color/primaryDark">@color/primary_dark</item>
      <item name ="android:colorAccent/primary">@color/accent</item>
   </style>
<resource> 

Kiểu & chủ đề mặc định

Nền tảng Android cung cấp một bộ sưu tập lớn các kiểu và chủ đề mà bạn có thể sử dụng trong các ứng dụng của mình. Bạn có thể tìm thấy một tham chiếu của tất cả các kiểu có sẵn trong lớp R.style .

Để sử dụng các kiểu được liệt kê ở đây, hãy thay thế tất cả dấu gạch dưới trong tên kiểu có dấu chấm. Ví dụ: bạn có thể áp dụng chủ đề Theme_NoTitleBar với "@android: style / Theme.NoTitleBar". Bạn có thể xem mã nguồn sau cho các kiểu và chủ đề Android .