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

最新推荐文章于 2023-01-02 21:27:42 发布
最新推荐文章于 2023-01-02 21:27:42 发布
阅读量2k 收藏
点赞数
分类专栏： Android开发笔记 文章标签： android iOS风格 圆角 边框 自定义按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasytomelody/article/details/20546827
版权

有图有真相！绝不含糊！

    


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


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


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

 left_while_borde_rounded.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>

            <!-- 边框颜色值 -->
            <solidandroid: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:color="#E4A322"/>
            <!-- 左边圆角值 -->
            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"/>
        </shape>
    </item>

</layer-list>

left_while_borde_rounded_focused.xml

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

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

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

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

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


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

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

最后在Activity中添加按钮事件

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;
			}
		});
	}
}


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


Fantasy-Melody
关注
专栏目录
Android圆形按钮示例
culing2941的博客
09-14 9478
android mvp示例In this tutorial you will learn how to create a round button in android. 在本教程中，您将学习如何在android中创建圆形按钮。 Shape drawable resource is used to define shape of a view. Below I have shared an e...
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5077
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
Android开发Button控件的圆角，边框
LUFANZHENG的专栏
07-13 2970
android:shape="rectangle" >                         android:width="0.8dp"         android:color="#DF8C02" />                             android:bottom="10dp"         and
android 按钮圆角属性,安卓实现圆角边框按钮，以及样式运用
weixin_39601657的博客
05-26 530
安卓的按钮没有 border 属性，更别谈 border-radius 了，好在 background 可以曲线求国，看效果：按钮一、在 res/drawable/ 下新建一 XML 文件，内容如下：按钮二、在 res/drawable/ 下新建一 XML 文件，内容如下：然后在布局文件中，Button 控件中分别指明 android:background="@drawable/刚才建立的 XML...
HTML5和CSS3 WEB技术开发
最新发布
张晨光老师的播客
01-02 6508
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
iOS：iOS开发非常全的三方库、插件等等
dienangpiao2051的博客
09-23 7490
iOS开发非常全的三方库、插件等等 github排名:https://github.com/trending, github搜索：https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 一、UI 下拉刷新 EGOTableViewPullRefresh- 最早...
iOS 强大第三方资源库
热门推荐
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
android -> 按钮 圆角 & 边框 & 渐变
04-26
NULL 博文链接：https://mft.iteye.com/blog/2357031
Android代码-可设置圆角背景边框的的按钮
08-07
RoundButton 可设置圆角背景边框的的按钮 通过调节色彩明度自动计算按下(pressed)状态颜色 Gradle repositories { maven { url "https://jitpack.io" } } dependencies { compile 'com.github.czy1121:roundbutton:1.1.0' } Usage XML 属性 <!-- 背景色 --> <!-- 边框色 --> <!-- 边框厚度 --> <!-- 边框虚线长度 --> <!-- 边框虚线间隙 --> <!-- 圆角半径，stadium 表示半径为 min(height,width) / 2--> <!-- 自动计算按下(pressed)状态颜色的系数, 值为0时不自动计算 --> License Copyright 2016 czy1121 Licensed under the Apache License, Version 2.0 (the "Licens
Android 实现对话框圆角 模糊图片功能
07-10
Android Studio 实现对话框圆角，毛玻璃模糊效果
Android实现圆角边框
早有蜻蜓立上头
04-12 809
设置边框圆角可以在drawable-mdpi目录里定义一个xml: <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp"
android按钮设置边框,android设置按钮边框和圆角
weixin_42307290的博客
05-26 630
步骤如下：------------------------------------------------------------------------1. 先在res/drawable中定义一个shape.xml文件，具体的颜色你可以自己调android:shape="rectangle" >android:width="3dp"android:color="#ffffff" />...
android仿ios圆角对话框
WindyMing的博客
04-04 695
在日常开发过程中我们大部分会遇到各式各样对话框dialog，当然还有要求和仿ios风格的圆角对话框等等。整理和修改一部分网上提供的源码，以达到需求。记录下以备以后用到。文章最后提供demo源码。下面看下效果。 下面简单介绍实现思路和代码讲解(此处介绍样式五dialog的实现)： 先看下dialog.xml文件: <?xml version="1.0" enco...
android圆形的按钮样式,android – 如何绘制一个完美的圆形按钮？
weixin_31445091的博客
05-26 489
我想绘制一个完美的圆形按钮.我尝试使用以下代码：android:shape="oval" >android:width="3dip"android:color="#065a32" />但即使我更改参数,我也只能绘制椭圆形状：android:width="3dip"/>我的截图：我已经尝试过这个网站的不同链接,但没有一个满足我的需要.编辑：我的getView()代码是：public...
Android自定义View——开关按钮SwitchButton
devChenglei
05-02 6601
在coding的过程中需要用到简单的switch-button，因为Android自带库没有此组件，使用就打算自定义view实现一个开关按钮。 我使用了view的组合，首先思考开关按钮的组成，分为2个部分，一个是底部的圆角矩形，一部分是在开关过程中变换位置的圆。 于是写出按钮的xml布局 layout_switch.xml <?xml version="1.0" encoding="utf
Android自定义View实现开关按钮
托米每天美滋滋
09-08 861
UI图的效果如下 实现的gif效果图如下,后续做些细节上的优化即可 实现思路，通过自定义继承View，通过Canvas，Paint等api绘制出来 分析思路： 以UI 3倍图作为标准，宽为156px，高为90px，则宽高比为 90 ／ 156 高度在dimens已经定义好，3倍图的UI，则对应于30dp 则宽度width ＝ height * 90 / 156; 这里的circ
e4a按钮改背景颜色_Flutter Button 按钮图文分析
weixin_39545329的博客
11-24 1125
Flutter 提供的Button比较多 Widget buildRaisedButton(){ //它默认带有阴影和灰色背景。按下后，阴影会变大 return RaisedButton( child: Text("RaisedButto"), onPressed: () => {}, ///点击事件 ); } Widget buildFlatBu...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值