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

有图有真相！绝不含糊！

    

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

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

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

 left_while_borde_rounded.xml

[html]  view plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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