Thuộc tính style trong các View lập trình Android

2020-10-10 1492 lượt xem

Trương Thanh Hùng

Mục lục [ hide ]

Chọn cách thiết lập thuộc mềm dẻo hơn cho các View
Thuộc tínhstylecho các View

Chọn cách thiết lập thuộc mềm dẻo hơn cho các View

Những thuộc tính trên các View ảnh hướng đến sự hiện thị của nó như kích thước, màu sắc có thể gán trực tiếp giá trị mong muốn trong layout xml. Ví dụ TextView sau gán màu #DD2C00, khoảng padding là 10dp, khoảng margin là 8dp


 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"

        android:textColor="#DD2C00"
        android:padding="10dp"
        android:layout_margin="8dp"  />

Code trình bày trên với cách nhập cố định các giá trịnh thuộc tính như vậy vẫn có được giao diện theo yêu cầu, nhưng có một bất lợi về tính mềm dẻo, khi bạn cần thay đổi giá trị bạn cần tìm tất cả các thuộc tính này và thay đổi từng cái một.

Giải pháp là các giá trị thuộc tính đó được gộp lại ở một file tài nguyên xml như colors.xml để định nghĩa các giá trị màu, dimens.xml để định nghĩa các kích thước ..., làm điều ngoài việc tập trung các giá trị thuộc tính lại một chỗ để dễ quản lý nó còn có lợi ích khi nhiều phần tử View sử dùng cùng giá trị thuộc tính nào đó thì ta chỉ việc thay đổi giá trị này khi cần thiết.

Ví dụ:

values/colors.xml

<resources>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="colorBlueDark">#142149</color>
    <color name="colorRedLight">#f17067</color>
    <color name="colorRed">#f44336</color>
    <color name="colorPink">#e91e63</color>
    <color name="colorPurple">#9c27b0</color>
    <color name="colorDeepPurple">#673ab7</color>
    <color name="colorIndigo">#3f51b5</color>
    <color name="colorBlue">#2196f3</color>
    <color name="colorLightBlue">#03a9f4</color>
    <color name="colorCyan">#00bcd4</color>
    <color name="colorTeal">#009688</color>
    <color name="colorGreen">#4caf50</color>
    <color name="colorLightGreen">#8bc34a</color>
    <color name="colorLime">#cddc39</color>
    <color name="colorYellow">#ffeb3b</color>
    <color name="colorAmber">#ffc107</color>
    <color name="colorOrange">#ff9800</color>
    <color name="colorDeepOrange">#ff5722</color>
    <color name="colorBrown">#795548</color>
    <color name="colorBlack">#000</color>
    <color name="colorWhite">#fff</color>
    <color name="colorGrey">#9e9e9e</color>
    <color name="colorBlueGrey">#607d8b</color>
    <color name="colorPrimaryColorDark">#0d47a1</color>
    <color name="colorSecondaryColor">#aa66cc</color>
    <color name="colorSecondaryColorDark">#9933cc</color>
    <color name="colorDefaultColor">#2bbbad</color>
    <color name="colorDefaultColorDark">#00695c</color>
    <color name="colorInfoColor">#33b5e5</color>
    <color name="colorInfoColorDark">#0099cc</color>
    <color name="colorSuccessColor">#00c851</color>
    <color name="colorSuccessColorDark">#007e33</color>
    <color name="colorWarningColor">#ffbb33</color>
    <color name="colorWarningColorDark">#ff8800</color>
    <color name="colorDangerColor">#ff3547</color>
    <color name="colorDangerColorDark">#cc0000</color>
    <color name="colorElegantColor">#2e2e2e</color>
    <color name="colorElegantColorDark">#212121</color>
    <color name="colorStylishColor">#4b515d</color>
    <color name="colorStylishColorDark">#3e4551</color>
    <color name="colorUniqueColor">#3f729b</color>
    <color name="colorUniqueColorDark">#1c2331</color>
    <color name="colorSpecialColor">#37474f</color>
    <color name="colorSpecialColorDark">#263238</color>
    <color name="colorPrimary">#4285f4</color>
    <color name="colorDanger">#ff3547</color>
    <color name="colorWarning">#ffbb33</color>
    <color name="colorSuccess">#00c851</color>
    <color name="colorInfo">#33b5e5</color>
    <color name="colorDefault">#2bbbad</color>
    <color name="colorSecondary">#aa66cc</color>
    <color name="colorDark">#212121</color>
    <color name="colorLight">#e0e0e0</color>
    <color name="colorGreyX">#f9f9f9</color>
</resources>

values/dimens.xml


<resources>
    <dimen name="mytextviewpadding">10dp</dimen>
    <dimen name="mytextviewmargin">8dp</dimen>
</resources>

Lúc này quay trở lại layout, áp dụng các giá trị này sẽ là:


<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"

    android:textColor="@color/mytextviewcolor"
    android:padding="@dimen/mytextviewpadding"
    android:layout_margin="@dimen/mytextviewmargin"  />

Thuộc tínhstylecho các View

Cách trên đã mang lại sự mềm dẻo đáng kể, tuy nhiên còn có cách thức mạnh mẽ hơn đó là gộp nhiều thuộc tính lại một chỗ trong file styles.xml, sau đó áp dụng vào View - Ví dụ định nghĩa một style có tên mytextviewstyle, trong nó có định nghĩa nhiều thuộc tính có thể gán vào View như: layout_with, textcolor ...

values/styles.xml


<resources>
    <style name="mytextviewstyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/mytextviewcolor</item>
        <item name="android:layout_margin">@dimen/mytextviewmargin</item>
        <item name="android:padding">@dimen/mytextviewpadding</item>
    </style>
</resources>

Giờ muốn View nào áp dụng style này chỉ việc gán cho nó thông qua thuộc tính android:style, ví dụ trên trở thành:


<TextView 
    android:text="Hello World!" 
    style="@style/mytextviewstyle"/>

Sự linh hoạt và tập trung hoá cách sử dụng này được khuyến khích sử dụng, nhất là khi ứng dụng có độ phức tạp đáng kể nó sẽ trở lên rất quan trong vì tiết kiệm thời gian, dễ dàng giám sát, dễ dàng chỉnh sửa cập nhật. Hãy nhìn lại cách tạo ra TextView 3 trường hợp trên để nhận ra ưu điểm của nó:


<!--Nhập giá trí cố định, kém linh hoạt -->
 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"

        android:textColor="#DD2C00"
        android:padding="10dp"
        android:layout_margin="8dp"  />
        
<!--Giá trị các thuộc tính được tập trung một nơi và sử dụng khi cần-->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"

    android:textColor="@color/mytextviewcolor"
    android:padding="@dimen/mytextviewpadding"
    android:layout_margin="@dimen/mytextviewmargin"  />

<!--Các thuộc tính và giá trị của nó được gộp lại thành các style, cách ưu điểm nhất-->
<TextView 
    android:text="Hello World!" 
    style="@style/mytextviewstyle"/>

chủ đề