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

简介:

有图有真相!绝不含糊!

    


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


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


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

 left_while_borde_rounded.xml

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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

相关文章
|
27天前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
31 3
|
20天前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
51 0
|
20天前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
56 10
|
1天前
|
编解码 iOS开发 UED
响应式设计在 iPhone 开发适配中的具体应用
【10月更文挑战第23天】响应式设计在 iPhone 开发适配中扮演着至关重要的角色,它能够帮助我们打造出适应不同屏幕尺寸和用户需求的高质量应用。通过合理运用响应式设计的原则和方法,我们可以在提供良好用户体验的同时,提高开发效率和应用的可维护性。
|
1天前
|
编解码 测试技术 iOS开发
iPhone 屏幕尺寸和开发适配
【10月更文挑战第23天】iPhone 的屏幕尺寸变化给开发者带来了一定的挑战,但也为创新提供了机遇。通过深入了解不同屏幕尺寸的特点,遵循适配原则和策略,运用合适的技巧和方法,我们能够为用户提供在不同 iPhone 机型上都具有良好体验的应用。在未来,随着技术的不断进步,我们还需要持续学习和适应,以满足用户对优质应用体验的不断追求。
|
3月前
|
数据采集 iOS开发 Python
Chatgpt教你开发iPhone风格计算器,Python代码实现
Chatgpt教你开发iPhone风格计算器,Python代码实现
|
Shell iOS开发
iOS逆向:tweak开发教程(iPhone/tool)
iOS逆向:tweak开发教程(iPhone/tool)
1118 0
iOS逆向:tweak开发教程(iPhone/tool)
|
编解码 iOS开发
iphone 开发的基本入门知识
iphone 开发的基本入门知识
225 0
「镁客早报」iPhone或将在今年采用三摄;传Facebook致力于开发语音助力服务与亚马逊、苹果竞争
亚马逊向美国Alexa设备推免费音乐服务;视频会议软件开发商Zoom纳斯达克上市。
264 0