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

最新推荐文章于 2021-05-26 16:21:25 发布
最新推荐文章于 2021-05-26 16:21:25 发布
阅读量2k 收藏
点赞数
分类专栏： Android开发笔记 文章标签： android iOS风格 圆角 边框 自定义按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fantasytomelody/article/details/20546827
版权
本文介绍如何使用XML定义不同风格的按钮，包括左右边框、四边边框等样式，并通过代码实现按钮状态变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有图有真相！绝不含糊！

    


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


再来看一下代码，主要是用xml实现的（代码见传送门: http://download.youkuaiyun.com/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.youkuaiyun.com/detail/u013127097/6996029


Android按钮圆角技巧：从基础到高级
m0_74337424的博客
03-15 25
在Android开发中，UI设计是一个非常重要的部分，特别是当涉及到按钮样式时。一个圆润的按钮不仅能提高用户体验，还能让应用的界面更加美观。本文将详细介绍如何在Android中创建圆角按钮，并结合实例展示从基础到高级的实现方法。
Android圆形按钮示例
culing2941的博客
09-14 9545
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...
Android开发Button控件的圆角，边框
LUFANZHENG的专栏
07-13 3022
android:shape="rectangle" >                         android:width="0.8dp"         android:color="#DF8C02" />                             android:bottom="10dp"         and
android 按钮圆角属性,安卓实现圆角边框按钮，以及样式运用
weixin_39601657的博客
05-26 568
安卓的按钮没有 border 属性，更别谈 border-radius 了，好在 background 可以曲线求国，看效果：按钮一、在 res/drawable/ 下新建一 XML 文件，内容如下：按钮二、在 res/drawable/ 下新建一 XML 文件，内容如下：然后在布局文件中，Button 控件中分别指明 android:background="@drawable/刚才建立的 XML...
Android实现Iphone风格圆角开关按钮教程
总结以上知识点，通过XML文件来实现一个无图片资源、具有Iphone风格圆角边框的Android开关按钮是完全可行的，通过组合使用`shape`、`selector`和布局叠加等技术，可以很好地达到定制化和美观的目的。在开发过程中，...
android自定义开关控件-SlideSwitch的实例
09-01
本文将详细介绍如何创建一个自定义的开关控件——SlideSwitch，该控件模仿了iPhone上的滑动开关，并提供了类似百度魔拍的视觉效果。 一、原理 SlideSwitch控件的核心在于自定义View的绘制和触摸事件处理。首先，它...
Android开发 仿iPhone风格对话框示例源码
05-30
Android开发 仿iPhone风格对话框示例源码 这个对话框完全继承、仿照AlertDialog，只是实现了自定义效果。 另外，没有实现setIcon，因为iphone中的对话框多数都没有图标。 附件包含例子、jar包、jar包源码。
android -> 按钮 圆角 & 边框 & 渐变
04-26
NULL 博文链接：https://mft.iteye.com/blog/2357031
Android实现圆角边框
早有蜻蜓立上头
04-12 848
设置边框圆角可以在drawable-mdpi目录里定义一个xml: <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp"
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按钮设置边框,android设置按钮边框和圆角
weixin_42307290的博客
05-26 654
步骤如下：------------------------------------------------------------------------1. 先在res/drawable中定义一个shape.xml文件，具体的颜色你可以自己调android:shape="rectangle" >android:width="3dp"android:color="#ffffff" />...
android仿ios圆角对话框
WindyMing的博客
04-04 720
在日常开发过程中我们大部分会遇到各式各样对话框dialog，当然还有要求和仿ios风格的圆角对话框等等。整理和修改一部分网上提供的源码，以达到需求。记录下以备以后用到。文章最后提供demo源码。下面看下效果。 下面简单介绍实现思路和代码讲解(此处介绍样式五dialog的实现)： 先看下dialog.xml文件: <?xml version="1.0" enco...
android圆形的按钮样式,android – 如何绘制一个完美的圆形按钮？
weixin_31445091的博客
05-26 515
我想绘制一个完美的圆形按钮.我尝试使用以下代码：android:shape="oval" >android:width="3dip"android:color="#065a32" />但即使我更改参数,我也只能绘制椭圆形状：android:width="3dip"/>我的截图：我已经尝试过这个网站的不同链接,但没有一个满足我的需要.编辑：我的getView()代码是：public...
Android自定义View——开关按钮SwitchButton
devChenglei
05-02 6663
在coding的过程中需要用到简单的switch-button，因为Android自带库没有此组件，使用就打算自定义view实现一个开关按钮。 我使用了view的组合，首先思考开关按钮的组成，分为2个部分，一个是底部的圆角矩形，一部分是在开关过程中变换位置的圆。 于是写出按钮的xml布局 layout_switch.xml <?xml version="1.0" encoding="utf
Android自定义View实现开关按钮
托米每天美滋滋
09-08 884
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 1185
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、付费专栏及课程。

余额充值