Android自定义Iphone风格的圆角边框开关按钮

2021-09-14 10:33:50

有图有真相！绝不含糊！

Android自定义Iphone风格的圆角边框开关按钮    


还是挺美观的吧？完全没用图片资源


再来看一下代码，主要是用xml实现的（代码见传送门: http://download.csdn.net/detail/u013127097/6996029）


右边无边框的button_style(分别有normal、selete状态):

 left_while_borde_rounded.xml

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <?xmlversionxmlversion="1.0"encoding="UTF-8"?>  
  2. <layer-listxmlns:androidlayer-listxmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4.     <item>  
  5.         <shape>  
  6.   
  7.             <!-- 边框颜色值 -->  
  8.             <solidandroid:colorsolidandroid:color="#ffffff"/>  
  9.   
  10.             <!-- 左边圆角值 -->  
  11.             <corners  
  12.                 android:bottomLeftRadius="5dp"  
  13.                 android:topLeftRadius="5dp"/>  
  14.         </shape>  
  15.     </item>  
  16.     <!-- 边框size -->  
  17.     <item  
  18.         android:bottom="1.5dp"  
  19.         android:left="1.5dp"  
  20.         android:top="1.5dp">  
  21.         <shape>  
  22.   
  23.             <!-- 主体颜色值 -->  
  24.             <solidandroid:colorsolidandroid:color="#E4A322"/>  
  25.             <!-- 左边圆角值 -->  
  26.             <corners  
  27.                 android:bottomLeftRadius="5dp"  
  28.                 android:topLeftRadius="5dp"/>  
  29.         </shape>  
  30.     </item>  
  31.   
  32. </layer-list>  

left_while_borde_rounded_focused.xml

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <item>  
  5.         <shape>  
  6.   
  7.             <!-- 边框颜色值 -->  
  8.             <solid android:color="#ffffff" />  
  9.             <!-- 左边圆角值 -->  
  10.             <corners  
  11.                 android:bottomLeftRadius="5dp"  
  12.                 android:topLeftRadius="5dp" />  
  13.         </shape>  
  14.     </item>  
  15.   
  16.     <!-- 边框size -->  
  17.     <item  
  18.         android:bottom="1.5dp"  
  19.         android:left="1.5dp"  
  20.         android:top="1.5dp">  
  21.         <shape>  
  22.   
  23.             <!-- 主体颜色值 -->  
  24.             <solid android:color="#ffffff" />  
  25.             <!-- 左边圆角值 -->  
  26.             <corners  
  27.                 android:bottomLeftRadius="5dp"  
  28.                 android:topLeftRadius="5dp" />  
  29.         </shape>  
  30.     </item>  
  31.   
  32. </layer-list>  


左边无边框的button_style(分别有normal、selete状态):

right_while_borde_rounded.xml

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <item>  
  5.         <shape>  
  6.   
  7.             <!-- 边框颜色值 -->  
  8.             <solid android:color="#ffffff" />  
  9.             <!-- 右边圆角值 -->  
  10.             <corners  
  11.                 android:bottomRightRadius="5dp"  
  12.                 android:topRightRadius="5dp" />  
  13.         </shape>  
  14.     </item>  
  15.     <!-- 边框size -->  
  16.     <item  
  17.         android:bottom="1.5dp"  
  18.         android:right="1.5dp"  
  19.         android:top="1.5dp">  
  20.         <shape>  
  21.   
  22.             <!-- 主体颜色值 -->  
  23.             <solid android:color="#E4A322" />  
  24.             <!-- 右边圆角值 -->  
  25.             <corners  
  26.                 android:bottomRightRadius="5dp"  
  27.                 android:topRightRadius="5dp" />  
  28.         </shape>  
  29.     </item>  
  30.   
  31. </layer-list>  

right_while_borde_rounded_focused.xml

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <item>  
  5.         <shape>  
  6.   
  7.             <!-- 边框颜色值 -->  
  8.             <solid android:color="#ffffff" />  
  9.             <!-- 右边圆角值 -->  
  10.             <corners  
  11.                 android:bottomRightRadius="5dp"  
  12.                 android:topRightRadius="5dp" />  
  13.         </shape>  
  14.     </item>  
  15.   
  16.     <!-- 边框size -->  
  17.     <item  
  18.         android:bottom="1.5dp"  
  19.         android:right="1.5dp"  
  20.         android:top="1.5dp">  
  21.         <shape>  
  22.   
  23.             <!-- 主体颜色值 -->  
  24.             <solid android:color="#ffffff" />  
  25.   
  26.             <!-- 右边圆角值 -->  
  27.             <corners  
  28.                 android:bottomRightRadius="5dp"  
  29.                 android:topRightRadius="5dp" />  
  30.         </shape>  
  31.     </item>  
  32.   
  33. </layer-list>  

四边都有边框的button_style(分别有normal、selete状态):

yellow_borde_rounded.xml

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <!-- 连框颜色值 -->  
  5.     <item>  
  6.         <shape>  
  7.             <solid android:color="#E4A322" />  
  8.   
  9.             <corners  
  10.                 android:bottomLeftRadius="5dp"  
  11.                 android:bottomRightRadius="5dp"  
  12.                 android:topLeftRadius="5dp"  
  13.                 android:topRightRadius="5dp" />  
  14.         </shape>  
  15.     </item>  
  16.     <!-- 主体背景颜色值 -->  
  17.     <item  
  18.         android:bottom="1.5dp"  
  19.         android:left="1.5dp"  
  20.         android:right="1.5dp"  
  21.         android:top="1.5dp">  
  22.         <shape>  
  23.             <solid android:color="#ffffff" />  
  24.   
  25.             <corners  
  26.                 android:bottomLeftRadius="5dp"  
  27.                 android:bottomRightRadius="5dp"  
  28.                 android:topLeftRadius="5dp"  
  29.                 android:topRightRadius="5dp" />  
  30.         </shape>  
  31.     </item>  
  32.   
  33. </layer-list>  

yellow_borde_rounded_focused.xml

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <span style="font-size:14px;color:#3366ff;"><?xml version="1.0" encoding="UTF-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <item>  
  5.         <shape>  
  6.   
  7.             <!-- 边框颜色值 -->  
  8.             <solid android:color="#E4A322" />  
  9.             <!-- 圆角值 -->  
  10.             <corners  
  11.                 android:bottomLeftRadius="5dp"  
  12.                 android:bottomRightRadius="5dp"  
  13.                 android:topLeftRadius="5dp"  
  14.                 android:topRightRadius="5dp" />  
  15.         </shape>  
  16.     </item>  
  17.     <!-- 边框size -->  
  18.     <item  
  19.         android:bottom="1.5dp"  
  20.         android:left="1.5dp"  
  21.         android:right="1.5dp"  
  22.         android:top="1.5dp">  
  23.         <shape>  
  24.   
  25.             <!-- 主体颜色值 -->  
  26.             <solid android:color="#E4A322" />  
  27.             <!-- 圆角值 -->  
  28.             <corners  
  29.                 android:bottomLeftRadius="5dp"  
  30.                 android:bottomRightRadius="5dp"  
  31.                 android:topLeftRadius="5dp"  
  32.                 android:topRightRadius="5dp" />  
  33.         </shape>  
  34.     </item>  
  35.   
  36. </layer-list>  
  37. </span>  


再看activity_main.xml的布局，分别添加上面三种风格的按钮

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <span style="font-size:14px;color:#3366ff;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#ffffff"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <LinearLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="100dp"  
  11.         android:background="#E4A322"  
  12.         android:gravity="center"  
  13.         android:orientation="horizontal" >  
  14.   
  15.         <Button  
  16.             android:id="@+id/swith_left"  
  17.             android:layout_width="120dp"  
  18.             android:layout_height="35dp"  
  19.             android:background="@drawable/left_while_borde_rounded_focused"  
  20.             android:text="Job"  
  21.             android:textColor="#E4A322" >  
  22.         </Button>  
  23.   
  24.         <Button  
  25.             android:id="@+id/swith_right"  
  26.             android:layout_width="120dp"  
  27.             android:layout_height="35dp"  
  28.             android:background="@drawable/right_while_borde_rounded"  
  29.             android:orientation="horizontal"  
  30.             android:text="Company"  
  31.             android:textColor="#ffffff" >  
  32.         </Button>  
  33.     </LinearLayout>  
  34.   
  35.     <Button  
  36.         android:id="@+id/submit_btn"  
  37.         android:layout_width="120dp"  
  38.         android:layout_height="35dp"  
  39.         android:layout_gravity="center_horizontal"  
  40.         android:layout_marginTop="30dp"  
  41.         android:background="@drawable/yellow_borde_rounded"  
  42.         android:text="申请"  
  43.         android:textColor="#E4A322" >  
  44.     </Button>  
  45.   
  46. </LinearLayout></span>  


最后在Activity中添加按钮事件

[html] view plaincopyprint?Android自定义Iphone风格的圆角边框开关按钮Android自定义Iphone风格的圆角边框开关按钮
  1. <span style="font-size:14px;color:#3366ff;">public class MainActivity extends Activity {  
  2.     boolean isSelete;  
  3.   
  4.     @Override  
  5.     protected void onCreate(Bundle savedInstanceState) {  
  6.         super.onCreate(savedInstanceState);  
  7.         setContentView(R.layout.activity_main);  
  8.   
  9.         final Button leftBtn = (Button) findViewById(R.id.swith_left);  
  10.         final Button rightBtn = (Button) findViewById(R.id.swith_right);  
  11.         leftBtn.setOnClickListener(new OnClickListener() {  
  12.   
  13.             @Override  
  14.             public void onClick(View v) {  
  15.                 // TODO Auto-generated method stub  
  16.                 leftBtn.setBackgroundResource(R.drawable.left_while_borde_rounded_focused);  
  17.                 leftBtn.setTextColor(Color.parseColor("#E4A322"));  
  18.                 rightBtn.setBackgroundResource(R.drawable.right_while_borde_rounded);  
  19.                 rightBtn.setTextColor(Color.parseColor("#ffffff"));  
  20.             }  
  21.         });  
  22.         rightBtn.setOnClickListener(new OnClickListener() {  
  23.   
  24.             @Override  
  25.             public void onClick(View v) {  
  26.                 // TODO Auto-generated method stub  
  27.                 leftBtn.setBackgroundResource(R.drawable.left_while_borde_rounded);  
  28.                 leftBtn.setTextColor(Color.parseColor("#ffffff"));  
  29.                 rightBtn.setBackgroundResource(R.drawable.right_while_borde_rounded_focused);  
  30.                 rightBtn.setTextColor(Color.parseColor("#E4A322"));  
  31.             }  
  32.         });  
  33.   
  34.         final Button submitBtn = (Button) findViewById(R.id.submit_btn);  
  35.   
  36.         submitBtn.setOnClickListener(new OnClickListener() {  
  37.   
  38.             @Override  
  39.             public void onClick(View v) {  
  40.                 // TODO Auto-generated method stub  
  41.                 if (isSelete) {  
  42.   
  43.                     submitBtn  
  44.                             .setBackgroundResource(R.drawable.yellow_borde_rounded);  
  45.                     submitBtn.setTextColor(Color.parseColor("#E4A322"));  
  46.                 } else {  
  47.                     submitBtn  
  48.                             .setBackgroundResource(R.drawable.yellow_borde_rounded_focused);  
  49.                     submitBtn.setTextColor(Color.parseColor("#ffffff"));  
  50.                 }  
  51.                 isSelete = !isSelete;  
  52.             }  
  53.         });  
  54.     }  
  55. }</span>  


代码见传送门: http://download.csdn.net/detail/u013127097/6996029

上一篇：android用户界面之按钮(Button)教程实例汇


下一篇：SaltStack自动化运维初涉--安装简用篇