首页 > 移动平台 > 详细

Android开发Hack1-圆角镂空按钮的样式定义

时间:2015-11-02 11:37:46      阅读:475      评论:0      收藏:0      [点我收藏+]

准备写一个关于Android开发小Hack 系列文章,希望能帮到一些开发者同学。

第一篇:Android开发Hack1-圆角镂空按钮的样式定义

 

通过xml文件实现自定义圆角镂空按钮,以及点击效果

[html] view plaincopy技术分享技术分享
 
  1. <Button android:layout_width="78dp" android:layout_height="32dp"  
  2.           android:id="@+id/corner_btn"  
  3.           android:textSize="15sp"   
  4.           android:textColor="@color/score_point"  
  5.           android:text="button1"  
  6.           android:layout_marginRight="17dp"  
  7.           android:layout_marginLeft="17dp"  
  8.           android:layout_gravity="center_vertical"  
  9.           android:background="@drawable/circle_corner_button_selector"  
  10.           />  



在drawable中创建按钮背景selector器

circle_corner_button_selector.xml

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:drawable="@drawable/circle_corner_button_pressed" android:state_pressed="true"/>  
  5.     <item android:drawable="@drawable/circle_corner_button"/>  
  6. </selector>  


 

分别定义不同选择操作下的效果

首先:circle_corner_button.xml文件

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <!-- 带圆角 白色背景 黄色色边框  长方体 -->  
  4. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
  5.     <item>  
  6.         <shape>  
  7.             <solid android:color="#FFFFFF" />  
  8.             <corners android:topLeftRadius="5dp" android:topRightRadius="5dp"  
  9.                      android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp" />  
  10.             <stroke android:width="1dp" android:color="#F58939" />  
  11.             <padding  
  12.                     android:left="5dp"  
  13.                     android:top="5dp"  
  14.                     android:right="5dp"  
  15.                     android:bottom="5dp"  
  16.                     />  
  17.         </shape>  
  18.     </item>  
  19. </layer-list>  


 

和circle_corner_button_pressed.xml文件

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- 带圆角 白色背景 灰色边框 长方体 -->  
  3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item>  
  5.         <shape>  
  6.             <solid android:color="#FFFFFF"/>  
  7.             <corners android:topLeftRadius="5dp" android:topRightRadius="5dp"  
  8.                      android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp"/>  
  9.             <stroke android:width="1dp" android:color="#dbdbdb"/>  
  10.             <padding  
  11.                     android:left="5dp"  
  12.                     android:top="5dp"  
  13.                     android:right="5dp"  
  14.                     android:bottom="5dp"  
  15.                     />  
  16.         </shape>  
  17.     </item>  
  18.   
  19. </layer-list>  


最后的按钮效果应该是这样的:

正常情况下:

技术分享 

点击后的样式:

技术分享

Android开发Hack1-圆角镂空按钮的样式定义

原文:http://www.cnblogs.com/earl-yongchang/p/4929396.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!