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

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

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

有图有真相！绝不含糊！

    


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


再来看一下代码，主要是用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自定义圆角
一叶飘舟
目录
相关文章
卓伊凡
|
2月前
|
存储 消息中间件 人工智能
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
卓伊凡
122 3
计蒙不吃鱼
|
6月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画（灵感来源：金铲铲之战）
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份，利用`onSizeChanged`测量最小长度，并借助画笔绘制动态线条，实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退，最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤，并提供完整源码供参考。此动画适用于加载场景，提升用户体验。
计蒙不吃鱼
522 5
Android自定义view之线条等待动画（灵感来源：金铲铲之战）
卓伊凡
|
2月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
卓伊凡
112 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
计蒙不吃鱼
|
6月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量，结合`PathEffect`的子类（如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等）实现路径绘制的动态变化。文章详细解析了各子类的功能与参数，并通过案例代码展示了如何使用`ComposePathEffect`组合效果，以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动，源码附于文末供参考。
计蒙不吃鱼
120 0
计蒙不吃鱼
|
6月前
|
Android开发 开发者
Android自定义view之利用drawArc方法实现动态效果
本文介绍了如何通过Android自定义View实现动态效果，重点使用`drawArc`方法完成圆弧动画。首先通过`onSizeChanged`进行测量，初始化画笔属性，设置圆弧相关参数。核心思路是不断改变圆弧扫过角度`sweepAngle`，并调用`invalidate()`刷新View以实现动态旋转效果。最后附上完整代码与效果图，帮助开发者快速理解并实践这一动画实现方式。
计蒙不吃鱼
178 0
计蒙不吃鱼
|
6月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先，作者自定义了一个圆角图片控件`MellowImageView`，用于绘制圆角矩形图片。接着，通过将布局放入`HorizontalScrollView`中，实现了左右滑动功能，并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例，包括XML布局、动画文件和Java代码，最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
计蒙不吃鱼
330 65
Android自定义view之网易云推荐歌单界面
计蒙不吃鱼
|
6月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程，涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现（如通过三个构造函数解决焦点问题），接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例，如跑马灯、折线图、太极图等。此外，文章详细解析了View绘制流程（measure、layout、draw）和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题，并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
计蒙不吃鱼
670 84
计蒙不吃鱼
|
6月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下，传统View可能引发卡顿的问题，进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法，包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
计蒙不吃鱼
190 3
计蒙不吃鱼
|
6月前
|
Android开发 开发者
Android自定义view之围棋动画（化繁为简）
本文介绍了Android自定义View的动画实现，通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画，借助布尔值控制动画流程。第二个案例以围棋动画为例，从简单的小球直线运动到双向变速运动，最终实现循环动画效果。代码结构清晰，逻辑简明，展示了如何化繁为简实现复杂动画，帮助读者拓展动态效果设计思路。文末提供完整源码，适合初学者和进阶开发者学习参考。
计蒙不吃鱼
129 0
Android自定义view之围棋动画（化繁为简）
计蒙不吃鱼
|
6月前
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景，到创建固定棋子及动态棋子，最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长，并优化视觉效果，如添加渐变色让白子更明显。最终效果既可作为围棋动画展示，也可用作加载等待动画。代码完整，适合进阶开发者学习参考。
计蒙不吃鱼
150 0

热门文章

最新文章

  • 1
    告别手动埋点！Android 无侵入式数据采集方案深度解析
  • 2
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
  • 3
    百宝箱开放平台 ✖️ Android 集成说明
  • 4
    关于iPhone设备不同显示尺寸适配的一些方法
  • 5
    【UNITY3D 游戏开发之八】Unity编译到iPhone运行 Collider 无法正常触发事件解决方案
  • 6
    iphone开发中的数据存储：初
  • 7
    iphone或Android服务器端调用百度地图
  • 8
    跨平台iPhone中调用WCF服务
  • 9
    iPhone 掌握蓝牙通信编程
  • 10
    智能手机收邮件之iPhone
  • 1
    安卓硬改一键新机，一键新机改串软件，免ROOT网卡串号Imei/sn码
    772
  • 2
    安卓改机工具免root,一键过设备检测,串号SN码【jar即可实现】
    914
  • 3
    为什么大厂要求安卓开发者掌握Kotlin和Jetpack？深度解析现代Android开发生态优雅草卓伊凡
    271
  • 4
    Android studio 报错Connect to 127.0.0.1:8888 [/127.0.0.1] failed: Connection refused: connect（已解决）
    1003
  • 5
    Android使用EditText+Listview实现搜索效果（使用room模糊查询）
    486
  • 6
    Android SVG动画详细例子
    342
  • 7
    Android自定义view之网易云推荐歌单界面
    330
  • 8
    一篇文章带你走近Android自定义view
    670
  • 9
    Android利用SVG实现动画效果
    316
  • 10
    Android线条等待动画JMWorkProgress（可添加依赖直接使用）
    208

    • 相关课程

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

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格