Button的几种常用的xml背景,扁平化,下划线,边框包裹,以及按压效果

简介: Button的几种常用的xml背景,扁平化,下划线,边框包裹,以及按压效果 分享下我项目中用到的几种Button的效果,说实话,还真挺好看的一.标准圆角 效果是这样的 他的实现很简单,我们只需要两个参数,一个圆角的大小,一个颜色standard_button_bg.

Button的几种常用的xml背景,扁平化,下划线,边框包裹,以及按压效果


分享下我项目中用到的几种Button的效果,说实话,还真挺好看的

一.标准圆角

效果是这样的

这里写图片描述

他的实现很简单,我们只需要两个参数,一个圆角的大小,一个颜色

standard_button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角-->
    <corners android:radius="30dp"/>
    <!--颜色-->
    <solid android:color="@color/colorPrimary"/>
</shape>

二.下划线

下划线出现的地方就事一些任务选中上,比如TabLayout就有,效果如下

这里写图片描述

这个实现使用图层来做的

underline_button_bg

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 边框颜色值 -->
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item android:bottom="2dp">
        <shape>
            <solid android:color="#ffffff"/>
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"/>
        </shape>
    </item>
</layer-list>

两个图层,一个就一根线,一个是全背景就形成了

三.边框包裹

这个效果个人觉得用的很多,因为很好看,如下

这里写图片描述

他的实现非常简单,和我们标准的圆角有点类似

parcel_button_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角-->
    <corners android:radius="30dp"/>
    <!--中间颜色-->
    <solid android:color="@android:color/white"/>
    <!--边框/颜色-->
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent"/>
</shape>

只要注意下width的值就好了

四.点击效果

点击效果算是百搭了,这里注意他的思想,你只有了解了他的原理,你就可以把他运用在任何一个button上了,看效果

这里写图片描述

onclick_button_bg

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--点击后-->
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@android:color/darker_gray"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>

    <!--默认-->
    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/colorAccent"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>

</selector>

他的实现很好理解,两个item的选中值相反,其他的,就是标准的shape圆角了

这里只是简单的概括,实际上你掌握了这四个,其他按钮的效果多多少少是能实现出来的,别担心,直接干

有兴趣的可以加入我的骚包群:555974449

Sample:http://download.csdn.net/detail/qq_26787115/9683049

目录
相关文章
|
5月前
|
SQL XML Java
解决关于在idea使用Mybatis时, 编写xml的动态sql语句背景高亮不舒服问题
解决关于在idea使用Mybatis时, 编写xml的动态sql语句背景高亮不舒服问题
504 0
|
8月前
|
XML SQL Java
解决2022.3.1版本中 IDEA中 XML文件屎黄色背景 的方法
解决2022.3.1版本中 IDEA中 XML文件屎黄色背景 的方法
348 0
|
XML Android开发 数据格式
xml 设置 imageview 背景(按下,禁用等)
引用:http://yueguc.iteye.com/blog/620417 做应用时,可能会需要动态改变控件的背景图片,如果仅仅是简单的点击,选中之类的事件,如果靠程序中写监听的代码就显得太麻烦了,在这种情况下,你可以使用selector动态改变控件背景拉:) 1。
805 0
|
XML 数据格式 内存技术
flash读取XML 背景自动适应大小
var bg = new Object();bg.bgdoc_xml = new XML();bg.parse_XML = function() {    function displayXML() {        if (bg.
731 0
|
4天前
|
XML 数据格式
小米备份descript.xml文件
小米备份descript.xml文件
12 0
|
16天前
|
XML Java 数据库连接
mybatis中在xml文件中通用查询结果列如何使用
mybatis中在xml文件中通用查询结果列如何使用
20 0
|
18天前
|
XML JavaScript 前端开发
xml文件使用及解析
xml文件使用及解析
|
1月前
|
XML C# 数据格式
使用C#操作XML文件
使用C#操作XML文件
11 0
|
1月前
|
Java
java实现遍历树形菜单方法——映射文件VoteTree.hbm.xml
java实现遍历树形菜单方法——映射文件VoteTree.hbm.xml
10 0