TShopping

 找回密碼
 註冊
搜索
查看: 657|回復: 0

[教學] Android Button UI 如何美化按鈕

[複製鏈接]
發表於 2016-2-27 19:15:29 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
1.jpg
改變基本灰色樣式按鈕


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


選擇Android XML File->Next
3.png


選擇Drawable->命名->選擇selector
4.png


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>  
複製代碼


完成

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-7 00:21 , Processed in 0.057374 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表