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

有图有真相！绝不含糊！





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

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

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

left_while_borde_rounded.xml

[html] view
plaincopyprint?





<?xmlversionxmlversion="1.0"encoding="UTF-8"?>

<layer-listxmlns:androidlayer-listxmlns:android="http://schemas.android.com/apk/res/android">



<item>

<shape>



<!-- 边框颜色值 -->

<solidandroid:colorsolidandroid: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:colorsolidandroid:color="#E4A322"/>

<!-- 左边圆角值 -->

<corners

android:bottomLeftRadius="5dp"

android:topLeftRadius="5dp"/>

</shape>

</item>



</layer-list>

left_while_borde_rounded_focused.xml

[html] view
plaincopyprint?





<?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

[html] view
plaincopyprint?





<?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

[html] view
plaincopyprint?





<?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

[html] view
plaincopyprint?





<?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

[html] view
plaincopyprint?





<span style="font-size:14px;color:#3366ff;"><?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>

</span>

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

[html] view
plaincopyprint?





<span style="font-size:14px;color:#3366ff;"><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></span>

最后在Activity中添加按钮事件

[html] view
plaincopyprint?





<span style="font-size:14px;color:#3366ff;">public class MainActivity extends Activity {

boolean isSelete;



@Override

protected 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() {



@Override

public void onClick(View v) {

// TODO Auto-generated method stub

leftBtn.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() {



@Override

public void onClick(View v) {

// TODO Auto-generated method stub

leftBtn.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() {



@Override

public void onClick(View v) {

// TODO Auto-generated method stub

if (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;

}

});

}

}</span>

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