Android Button UI 如何美化按鈕

woff

改變基本灰色樣式按鈕


1.首先要在drawable-hdpi建立一個xml檔右鍵 ->新建 ->其他



選擇Android XML File->Next



選擇Drawable->命名->選擇selector



btn_black.xml加入程式碼
這裡舉一個黑色的按鈕，其他顏色請參考來源網站

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   
2.     <item android:state_pressed="true">  
   
3.         <shape>  
   
4.          <solid android:color="#343434"></solid>  
   
5.             <stroke android:color="#171717" android:width="1dp"></stroke>  
   
6.             <corners android:radius="3dp"></corners>  
   
7.             <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"></padding>  
   
8.         </shape>  
   
9.     </item>  
   
10.     <item>  
    
11.         <shape>  
    
12.             <gradient android:angle="270" android:endColor="#171717" android:startColor="#343434"></gradient>  
    
13.             <stroke android:color="#171717" android:width="1dp"></stroke>  
    
14.             <corners android:radius="4dp"></corners>  
    
15.             <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"></padding>  
    
16.         </shape>  
    
17.     </item>  
    
18. </selector>

複製代碼

或是

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <selector
   
3. xmlns:android="HTTP://schemas.android.com/apk/res/android">
   
4. <item android:state_pressed="true">
   
5. <shape>
   
6. <gradient android:startColor="#FFFF00" android:endColor="#C0C0C0"
   
7. android:angle="0"/>
   
8. <stroke android:width="4dip" android:color="#b0000000"/>
   
9. <corners android:radius="15dp"/>
   
10. <padding android:left="10dp" android:top="10dp" android:right="10dp"
    
11. android:bottom="10dp"/>
    
12. </shape>
    
13. </item>
    
14. <item android:state_focused="true">
    
15. <shape>
    
16. <gradient android:startColor="#FFFFFFFF" android:endColor="#00000000"
    
17. android:angle="270"/>
    
18. <stroke android:width="4dip" android:color="#00000000"/>
    
19. <corners android:radius="15dp"/>
    
20. <padding android:left="10dp" android:top="10dp" android:right="10dp"
    
21. android:bottom="10dp"/>
    
22. </shape>
    
23. </item>
    
24. <item>
    
25. <shape>
    
26. <gradient android:startColor="#FFFFFFFF" android:endColor="#00000000"
    
27. android:angle="90"/>
    
28. <stroke android:width="4dip" android:color="#00000000"/>
    
29. <corners android:radius="15dp"/>
    
30. <padding android:left="10dp" android:top="10dp" android:right="10dp"
    
31. android:bottom="10dp"/>
    
32. </shape>
    
33. </item>
    
34. </selector>

複製代碼

gradient 主體漸變
startColor開始顏色，endColor結束顏色，angle開始漸變的角度（值只能為90的倍數，0時為左到右漸變，90時為下到上漸變，依次逆時針類推）
stroke邊框width邊框寬度，color邊框顏色
corners圓角radius半徑，0為直角
padding text值的相對位置

2.在你的strings.xml裡加入

1. <style name="ButtonText">  
   
2.     <item name="android:layout_width">fill_parent</item>  
   
3.     <item name="android:layout_height">wrap_content</item>  
   
4.     <item name="android:textColor">#ffffff</item>  
   
5.     <item name="android:gravity">center</item>  
   
6.     <item name="android:layout_margin">3dp</item>  
   
7.     <item name="android:textSize">30dp</item>  
   
8.     <item name="android:textStyle">bold</item>  
   
9.     <item name="android:shadowColor">#000000</item>  
   
10.     <item name="android:shadowDx">1</item>  
    
11.     <item name="android:shadowDy">1</item>  
    
12.     <item name="android:shadowRadius">2</item>  
    
13. </style>

複製代碼

3.activity_main.xml
"@drawable/btn_black"->btn_black.xml名稱
"@style/ButtonText"->strings.xml裡style name="ButtonText"名稱

1. <button android:background="@drawable/btn_black" android:text="Button"></button>  

複製代碼

完成