AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2015-01-15 1833
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

有图有真相！绝不含糊！

    


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


再来看一下代码，主要是用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

文章标签：
Android开发
数据格式
XML
iOS开发
关键词：
Android自定义
Android开关
Android圆角
Android按钮
Android自定义圆角
一叶飘舟
目录
相关文章
是阿超
|
5月前
|
测试技术 Android开发
Android按钮防抖动，避免发送多次请求
Android按钮防抖动，避免发送多次请求
是阿超
97 0
Ant.Dream
|
2月前
|
XML 前端开发 Android开发
Android经典实战之Kotlin中实现圆角图片和圆形图片
本文介绍两种实现圆角图像视图的方法。第一种是通过自定义Kotlin `AppCompatImageView`，重写`onDraw`方法使用`Canvas`和`Path`进行圆角剪裁。第二种利用Android Material库中的`ShapeableImageView`，简单配置即可实现圆角效果。两种方法均易于实现且提供动态调整圆角半径的功能。
Ant.Dream
48 0
opencv学堂
|
4月前
|
XML IDE 开发工具
【Android UI】自定义带按钮的标题栏
【Android UI】自定义带按钮的标题栏
opencv学堂
55 7
【Android UI】自定义带按钮的标题栏
蓝色流星1000
|
4月前
|
安全 JavaScript 前端开发
kotlin开发安卓app，JetPack Compose框架，给webview新增一个按钮，点击刷新网页
在Kotlin中开发Android应用，使用Jetpack Compose框架时，可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角，点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要：
蓝色流星1000
105 1
蓝色流星1000
|
4月前
|
存储 Android开发
安卓app，MediaPlayer播放本地音频 | 按钮控制播放和停止
在Jetpack Compose中，不直接操作原生Android组件如`Button`和`MediaPlayer`，而是使用Compose UI构建器定义界面并结合ViewModel管理音频播放逻辑。以下示例展示如何播放本地音频并用按钮控制播放/停止：创建一个`AudioPlayerViewModel`管理`MediaPlayer`实例和播放状态，然后在Compose UI中使用`Button`根据`isPlaying`状态控制播放。记得在`MainActivity`设置Compose UI，并处理相关依赖和权限。
蓝色流星1000
297 3
艾尼麻麻
|
4月前
|
XML Java Android开发
15. 【Android教程】按钮 Button/ImageButton
15. 【Android教程】按钮 Button/ImageButton
艾尼麻麻
60 2
一叶飘舟
|
4月前
|
开发工具 Android开发
Android 代码自定义drawble文件实现View圆角背景
Android 代码自定义drawble文件实现View圆角背景
一叶飘舟
153 0
热烈的马
|
5月前
|
XML Java Android开发
Android Studio App开发之实现底部标签栏BottomNavigationView和自定义标签按钮实战（附源码 超详细必看）
Android Studio App开发之实现底部标签栏BottomNavigationView和自定义标签按钮实战（附源码 超详细必看）
热烈的马
571 0
xiaowang_lj
|
5月前
|
调度 Android开发
Android9底部导航栏出现空白按钮问题分析
Android9底部导航栏出现空白按钮问题分析
xiaowang_lj
36 0
是阿超
|
5月前
|
XML Java Android开发
Android每点击一次按钮就添加一条数据
Android每点击一次按钮就添加一条数据
是阿超
54 1