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

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

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

有图有真相！绝不含糊！

    


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


再来看一下代码，主要是用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自定义圆角
一叶飘舟
目录
相关文章
shuj
|
3月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图：从零到英雄
【10月更文挑战第42天】 在安卓的世界里，自定义视图是一块画布，让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门，通过深入浅出的方式，让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤，以及如何优化你的视图以提高性能和兼容性。准备好了吗？让我们开始这段创造性的旅程吧！
shuj
56 1
shuj
|
4月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中，自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View，包括设计理念、实现步骤以及性能优化技巧，帮助开发者打造流畅且富有创意的用户界面。
shuj
151 0
天下无贼001
|
3月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中，自定义视图是那抹不可或缺的亮色，它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图，并展示如何通过代码实现这一过程。我们将从基础出发，逐步引导你理解自定义视图的核心概念，然后通过一个实际的代码示例，详细讲解如何将理论应用于实践，最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能，还是仅仅出于对安卓开发的兴趣，这篇文章都将为你提供价值。
天下无贼001
57 4
shuj
|
3月前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域，自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View，以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理，进而探索内存和布局优化技巧，最终实现既美观又高效的安卓界面。
shuj
68 5
大树营养快线
|
3月前
|
编解码 测试技术 iOS开发
iPhone 屏幕尺寸和开发适配
【10月更文挑战第23天】iPhone 的屏幕尺寸变化给开发者带来了一定的挑战，但也为创新提供了机遇。通过深入了解不同屏幕尺寸的特点，遵循适配原则和策略，运用合适的技巧和方法，我们能够为用户提供在不同 iPhone 机型上都具有良好体验的应用。在未来，随着技术的不断进步，我们还需要持续学习和适应，以满足用户对优质应用体验的不断追求。
大树营养快线
126 1
大树营养快线
|
3月前
|
编解码 iOS开发 UED
响应式设计在 iPhone 开发适配中的具体应用
【10月更文挑战第23天】响应式设计在 iPhone 开发适配中扮演着至关重要的角色，它能够帮助我们打造出适应不同屏幕尺寸和用户需求的高质量应用。通过合理运用响应式设计的原则和方法，我们可以在提供良好用户体验的同时，提高开发效率和应用的可维护性。
大树营养快线
60 1
朱卫军AI
|
6月前
|
数据采集 iOS开发 Python
Chatgpt教你开发iPhone风格计算器，Python代码实现
Chatgpt教你开发iPhone风格计算器，Python代码实现
朱卫军AI
67 0
iOS逆向
|
Shell iOS开发
iOS逆向：tweak开发教程（iPhone/tool）
iOS逆向：tweak开发教程（iPhone/tool）
iOS逆向
1279 0
iOS逆向：tweak开发教程（iPhone/tool）
JoanKing
|
编解码 iOS开发
iphone 开发的基本入门知识
iphone 开发的基本入门知识
JoanKing
249 0
头条资讯
「镁客早报」iPhone或将在今年采用三摄；传Facebook致力于开发语音助力服务与亚马逊、苹果竞争
亚马逊向美国Alexa设备推免费音乐服务；视频会议软件开发商Zoom纳斯达克上市。
头条资讯
280 0

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题？
  • 2
    Android历史版本与APK文件结构
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk，打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 9
    【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
  • 10
    【01】仿站技术之python技术，看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 1
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    24
  • 2
    【03】仿站技术之python技术，看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
    32
  • 3
    Android历史版本与APK文件结构
    119
  • 4
    【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
    27
  • 5
    【01】仿站技术之python技术，看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    55
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 8
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk，打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    71
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    117
  • 10
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
    29

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    阿里云oss简介和如何对接使用