Button自定義樣式

客製化按鈕外觀與顏色最主要的原因在於要在不同的畫面上設定對於該畫面整體而言最佳的顏色配對，才不會在某些畫面顯得格格不入，Android Studio有預設的統一顏色所以在更改成自定義外觀時需要做一些前置作業才有辦法順利更改。

前置更改作業

在這個部分要先來到themes更改，要更改的地方是在parent的最後加上.Bridge。

    <style name="Theme.GuideLine_training01" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge">

新增自訂XML外觀

• 新增
  這邊建立自訂外觀需要到drawable的資料夾新增檔案，對著資料夾按下滑鼠右鍵後新增XML
  
• 自訂檔案名稱即可按下OK按鈕
  
• 完成後能在裡面看到自己所新增的檔案
  
• 接著開始寫自定義的程式碼

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 點擊狀態 -->
    <item
        android:state_pressed="true">
        <!--基本可以畫出長方形、橢圓形、圓環以及線條等等的類型-->
        <shape
            android:shape="oval">
            <!--設定邊角弧度-->
            <corners
                android:radius="10dip" />
            <!--邊框框線-->
            <stroke
                android:width="1dip"
                android:color="#538394" />
            <!--漸層顏色-->
            <gradient
                android:angle="90"
                android:startColor="#EEA9A9"
                android:endColor="#FEDFE1"  />
        </shape>
    </item>

    <!-- 尚未點擊時 -->
    <item android:state_pressed="false">
        <shape android:shape="rectangle" >
            <solid
                android:color="@android:color/black" />
            <corners
                android:radius="50dp" />
            <stroke
                android:width="1dip"
                android:color="#071E54" />
            <gradient
                android:angle="-90"
                android:startColor="#CC543A"
                android:endColor="#B9887D"  />
        </shape>
    </item>

</selector>

畫面上也能看到目前設定的樣式預覽狀態

• 程式碼解析：
  • android:state_pressed=""：這是去設定是否有被按下的情況，有true和false，也就是有被按下以及沒有被按下。
  • android:shap=""：設定外觀形狀，有rectangle、oval、ring、line四種。
    • rectangle是長方形
    • oval是橢圓形
    • ring是圓環狀
    • line是線條
  • <corners ... />：設定邊角的圓弧程度。
  • <stroke .../>：設定邊框。
  • <gradient .../>：設定顏色漸變。
    • angle：設定顏色漸變的角度，可以得到起始位置不同的漸變效果。
  • <soild .../>：設定顏色。
  • <padding .../>：設定按鈕內部間隔距離設定

文字點擊顏色設定

另外補充文字設定自定義，按鈕若設定成點擊後有變換顏色，且與變換之前的顏色是不同色調的，那麼文字顏色可能會因此變得不容易觀察，這時我是新增一個color資料夾並且新增XML來撰寫，(設定方式與按鈕的是否有被點擊的設定相同)，同樣是去設定state_pressed接著更改文字顏色。

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

Activity_XML添加

到自己設定的按鈕設定，background是更改成自己設定的自定義按鈕，textColor是更改文字顏色。

android:textColor="@color/text_color"
android:background="@drawable/btn_style_circle"

加上以上的這兩個在Button裡面之後就可以更改外觀了。

展示圖

• 尚未按下的狀態
  
• 按下按鈕後的狀態
  

以上是今天先學習如何更改按鈕自定義樣式以及一點點的文字更改顏色。