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

有图有真相！绝不含糊！

    

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

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

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

 left_while_borde_rounded.xml

<?xmlversion="1.0"encoding="UTF-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape>            <!-- 边框颜色值 -->            <solidandroid:color="#ffffff"/>            <!-- 左边圆角值 -->            <corners                android:bottomLeftRadius="5dp"                android:topLeftRadius="5dp"/>        </shape>    </item>    <!-- 边框size -->    <item        android:bottom="1.5dp"        android:left="1.5dp"        android:top="1.5dp">        <shape>            <!-- 主体颜色值 -->            <solidandroid:color="#E4A322"/>            <!-- 左边圆角值 -->            <corners                android:bottomLeftRadius="5dp"                android:topLeftRadius="5dp"/>        </shape>    </item></layer-list>

left_while_borde_rounded_focused.xml

<?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <shape>            <!-- 边框颜色值 -->            <solid android:color="#ffffff" />            <!-- 左边圆角值 -->            <corners                android:bottomLeftRadius="5dp"                android:topLeftRadius="5dp" />        </shape>    </item>    <!-- 边框size -->    <item        android:bottom="1.5dp"        android:left="1.5dp"        android:top="1.5dp">        <shape>            <!-- 主体颜色值 -->            <solid android:color="#ffffff" />            <!-- 左边圆角值 -->            <corners                android:bottomLeftRadius="5dp"                android:topLeftRadius="5dp" />        </shape>    </item></layer-list>

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

right_while_borde_rounded.xml

<?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <shape>            <!-- 边框颜色值 -->            <solid android:color="#ffffff" />            <!-- 右边圆角值 -->            <corners                android:bottomRightRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item>    <!-- 边框size -->    <item        android:bottom="1.5dp"        android:right="1.5dp"        android:top="1.5dp">        <shape>            <!-- 主体颜色值 -->            <solid android:color="#E4A322" />            <!-- 右边圆角值 -->            <corners                android:bottomRightRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item></layer-list>

right_while_borde_rounded_focused.xml

<?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <shape>            <!-- 边框颜色值 -->            <solid android:color="#ffffff" />            <!-- 右边圆角值 -->            <corners                android:bottomRightRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item>    <!-- 边框size -->    <item        android:bottom="1.5dp"        android:right="1.5dp"        android:top="1.5dp">        <shape>            <!-- 主体颜色值 -->            <solid android:color="#ffffff" />            <!-- 右边圆角值 -->            <corners                android:bottomRightRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item></layer-list>

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

yellow_borde_rounded.xml

<?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 连框颜色值 -->    <item>        <shape>            <solid android:color="#E4A322" />            <corners                android:bottomLeftRadius="5dp"                android:bottomRightRadius="5dp"                android:topLeftRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item>    <!-- 主体背景颜色值 -->    <item        android:bottom="1.5dp"        android:left="1.5dp"        android:right="1.5dp"        android:top="1.5dp">        <shape>            <solid android:color="#ffffff" />            <corners                android:bottomLeftRadius="5dp"                android:bottomRightRadius="5dp"                android:topLeftRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item></layer-list>

yellow_borde_rounded_focused.xml

<?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <shape>            <!-- 边框颜色值 -->            <solid android:color="#E4A322" />            <!-- 圆角值 -->            <corners                android:bottomLeftRadius="5dp"                android:bottomRightRadius="5dp"                android:topLeftRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item>    <!-- 边框size -->    <item        android:bottom="1.5dp"        android:left="1.5dp"        android:right="1.5dp"        android:top="1.5dp">        <shape>            <!-- 主体颜色值 -->            <solid android:color="#E4A322" />            <!-- 圆角值 -->            <corners                android:bottomLeftRadius="5dp"                android:bottomRightRadius="5dp"                android:topLeftRadius="5dp"                android:topRightRadius="5dp" />        </shape>    </item></layer-list>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffffff"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="100dp"        android:background="#E4A322"        android:gravity="center"        android:orientation="horizontal" >        <Button            android:id="@+id/swith_left"            android:layout_width="120dp"            android:layout_height="35dp"            android:background="@drawable/left_while_borde_rounded_focused"            android:text="Job"            android:textColor="#E4A322" >        </Button>        <Button            android:id="@+id/swith_right"            android:layout_width="120dp"            android:layout_height="35dp"            android:background="@drawable/right_while_borde_rounded"            android:orientation="horizontal"            android:text="Company"            android:textColor="#ffffff" >        </Button>    </LinearLayout>    <Button        android:id="@+id/submit_btn"        android:layout_width="120dp"        android:layout_height="35dp"        android:layout_gravity="center_horizontal"        android:layout_marginTop="30dp"        android:background="@drawable/yellow_borde_rounded"        android:text="申请"        android:textColor="#E4A322" >    </Button></LinearLayout>

最后在Activity中添加按钮事件

public class MainActivity extends Activity {boolean isSelete;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);final Button leftBtn = (Button) findViewById(R.id.swith_left);final Button rightBtn = (Button) findViewById(R.id.swith_right);leftBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubleftBtn.setBackgroundResource(R.drawable.left_while_borde_rounded_focused);leftBtn.setTextColor(Color.parseColor("#E4A322"));rightBtn.setBackgroundResource(R.drawable.right_while_borde_rounded);rightBtn.setTextColor(Color.parseColor("#ffffff"));}});rightBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubleftBtn.setBackgroundResource(R.drawable.left_while_borde_rounded);leftBtn.setTextColor(Color.parseColor("#ffffff"));rightBtn.setBackgroundResource(R.drawable.right_while_borde_rounded_focused);rightBtn.setTextColor(Color.parseColor("#E4A322"));}});final Button submitBtn = (Button) findViewById(R.id.submit_btn);submitBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubif (isSelete) {submitBtn.setBackgroundResource(R.drawable.yellow_borde_rounded);submitBtn.setTextColor(Color.parseColor("#E4A322"));} else {submitBtn.setBackgroundResource(R.drawable.yellow_borde_rounded_focused);submitBtn.setTextColor(Color.parseColor("#ffffff"));}isSelete = !isSelete;}});}}

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