Android UI：XML文件配置按鈕等背景方案

時間 2019-11-06

原文原文鏈接

（1）在開發中，咱們常常會遇到一些純色或帶邊框的簡單樣式的按鈕或div，不少時候，都是用九宮格的背景圖片來貼上去。但仔細想來，使用圖片也帶來了一些性能上的問題，包括過多的圖片文件會致使渲染頁面的時候須要加載渲染不少圖片，以及圖片也會帶來安裝包的增長，最後就是用圖片很麻煩的說，就如可以用xml文件配出來，就不用再等UED了。java

（2）按鈕文字顏色在不一樣的狀態下也不同，最開始比較傻，直接經過代碼來動態改變，想一想就噁心。其實這也是能夠經過XML配置出來的。android

好，下面就進入正題吧。性能

注：如下並不侷限於按鈕，照樣能夠用於各類view的background。spa

一）、配置按鈕背景

Android可以支持shape、selector等。shape顧名思義就是定義一個形狀，包括邊框、填充色、圓角等。以下實例：3d

<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
    <gradient android:startColor="#FFFF0000"  
        android:endColor="#80FF00FF"  
        android:angle="270" />  
    <padding android:left="50dp"  
        android:top="20dp" android:right="7dp"  
        android:bottom="7dp" />  
    <corners android:radius="8dp" />  
    <solid android:color="#b4000000" /> 
  <stroke android:width="2.0dip"  
        android:color="#b4ffffff"  
        android:dashWidth="3.0dip"  
        android:dashGap="0.0dip" />
</shape>

簡單說明下：code

gradient -- 對應顏色漸變。 startcolor、endcolor就很少說了。 android:angle 是指從哪一個角度開始變。xml

solid -- 填充色。圖片

stroke -- 邊框，其中width就是邊框線的寬度。ip

corners -- 是否添加圓角，radius就是圓角的半徑。utf-8

padding -- 定義內容離邊界的距離。與android:padding_left、android:padding_right這些是一個道理。

細心的讀者就會想到，這個shap好像只描述了一種狀態啊，怎麼表示按鈕的其餘狀態呢？那就得用到selector了。

selector顧名思義表示選擇器的意思，就是可以根據不一樣的狀態選擇響應的參數。好了，直接亮代碼吧，多說無益：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#53cbff" />
            <corners android:radius="3dp" />
        </shape>      
    </item>
        
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#53cbff" />
            <corners android:radius="3dp" />
        </shape>
    </item>
        
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#44b2ff" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</selector>

效果就再也不展現了，就是一個藍色的按鈕。

二）、配置按鈕的顏色方案

咱們常常會遇到常態是按鈕背景是深的，按下去後是淺色背景，這時候就須要按鈕文字顏色也可以隨之改變，不然效果就大打折扣了。

確定，你也會想到其實只要和selector配合使用就行了，以下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="#ffffff"/>
    <item android:state_selected="true" android:color="#ffffff"/>
    <item android:state_pressed="true" android:color="#ffffff"/>
    <item android:color="#aaaaaa"/>
</selector>

使用的時候在android:textColor="@drawable/****"就行了。

好了，具體怎麼靈活使用以及他們的含義就本身用實踐去摸索吧。