无需自定义View,彻底解放shape,selector吧

栏目: 编程语言 · XML · 发布时间: 5年前

内容简介:作为一个android程序员,对于shape、selector这两个标签一定不陌生。每当UI设计师给我们设计出一个个button背景的时候,我们就需要去drawable文件夹下去新建一个bg_xxx.xml,然后很多时候区别仅仅是一个边框的颜色或者填充的颜色。这就导致了很多非常相似的.xml文件产生。网上之前也有了一种通过自定义View,在xml中通过设置属性达到shape效果的控件。但是这种自定义的控件不太灵活,归根到底是一个自定义的button,如果我想改造项目的话就得去替换原有的button或者te
无需自定义View,彻底解放shape,selector吧

前言

作为一个android程序员,对于shape、selector这两个标签一定不陌生。每当UI设计师给我们设计出一个个button背景的时候,我们就需要去drawable文件夹下去新建一个bg_xxx.xml,然后很多时候区别仅仅是一个边框的颜色或者填充的颜色。这就导致了很多非常相似的.xml文件产生。

网上之前也有了一种通过自定义View,在xml中通过设置属性达到shape效果的控件。但是这种自定义的控件不太灵活,归根到底是一个自定义的button,如果我想改造项目的话就得去替换原有的button或者textView。接下来就给大家提供一种更加简单的方式:

无需自定义View,直接添加属性便可以实现shape、selector效果。

具体内容

效果展示

话不多说,直接上代码。

使用方法:

1、在BaseActiviy的super.onCreate()之前调用一行代码,仅仅是一个方法

无需自定义View,彻底解放shape,selector吧

2、没有其他操作了,直接layout里开始写控件吧!

布局代码

我们来添加一些实例属性:

无需自定义View,彻底解放shape,selector吧
有没有觉得很熟悉,就是 原生标签的tag名+_+属性名 ,很容易记住,而且不管是Button还是TextView, 只要是View

都可以。

效果

我们来看一下实际效果:

无需自定义View,彻底解放shape,selector吧

修改背景

现在UI设计师告诉我们要改一下背景,没事,我们只需要在xml添加或者修改属性就行。

我们来把圆形改成正方形,加个边框。5秒ok!

无需自定义View,彻底解放shape,selector吧

简单的原理解析

app:xxx

app:xxx属性就不用多说了,这些就是一些自定义属性而已。在这里我把shape、selector的部分属性转换成自定义的属性,这样就方便添加到已有原生控件中。

BackgroundLibrary.inject(this)

这个方法是这个框架唯一需要加入的代码。

inject中实际上是给LayoutInflater添加了一个LayoutInflater.Factory类。而Android的Activity在创建过程(也就是setContentView)中实际上是通过把xml转换成View的对象。而LayoutInflater.Factory相当于这中间的一个后门,它是xml解析创建成View的必经方法,google中的v7support包里很多内容就是通过LayoutInflater.Factory来实现向下兼容的。

在这里,我通过低入侵的方式,加入一个自定义的LayoutInflater.Factory,去解析添加的自定义属性,接下来就简单了。生成系统提供的GradientDrawable、RippleDrawable、StateListDrawable即可。

同时由于AppcompatActivity是已经实现了LayoutInflater.Factory,而Activity又设定一个Activity只能加入一个factory类,因此这里需要在super.onCreate之前调用该方法,利用AppcompatActivity的factory去创建View。

具体原理解释可以参考我的这篇文章: Android 常用换肤方式以及原理分析

具体使用方法:

添加依赖:

implementation 'com.noober.backgorund:core:1.0.1'
复制代码

BaseActivity的super.onCreate之前添加代码:

BackgroundLibrary.inject(context);
复制代码

支持属性,命名规则就是 标签名_标签属性名 ,支持shape所有属性:

<attr name="shape" format="enum">
       <enum name="rectangle" value="0" />
       <enum name="oval" value="1" />
       <enum name="line" value="2" />
       <enum name="ring" value="3" />
   </attr>

   <attr name="solid_color" format="color"/>

   <attr name="corners_radius" format="dimension"/>
   <attr name="corners_bottomLeftRadius" format="dimension"/>
   <attr name="corners_bottomRightRadius" format="dimension"/>
   <attr name="corners_topLeftRadius" format="dimension"/>
   <attr name="corners_topRightRadius" format="dimension"/>

   <attr name="gradient_angle" format="integer"/>
   <attr name="gradient_centerX" format="float"/>
   <attr name="gradient_centerY" format="float"/>
   <attr name="gradient_centerColor" format="color"/>
   <attr name="gradient_endColor" format="color"/>
   <attr name="gradient_startColor" format="color"/>
   <attr name="gradient_gradientRadius" format="dimension"/>
   <attr name="gradient_type" format="enum">
       <enum name="linear" value="0" />
       <enum name="radial" value="1" />
       <enum name="sweep" value="2" />
   </attr>
   <attr name="gradient_useLevel" format="boolean"/>

   <attr name="padding_left" format="dimension"/>
   <attr name="padding_top" format="dimension"/>
   <attr name="padding_right" format="dimension"/>
   <attr name="padding_bottom" format="dimension"/>

   <attr name="size_width" format="dimension">
       <enum name="wrap_content" value="-2" />
       <enum name="match_parent" value="-1" />
   </attr>
   <attr name="size_height" format="dimension">
       <enum name="wrap_content" value="-2" />
       <enum name="match_parent" value="-1" />
   </attr>

   <attr name="stroke_width" format="dimension"/>
   <attr name="stroke_color" format="color"/>
   <attr name="stroke_dashWidth" format="dimension"/>
   <attr name="stroke_dashGap" format="dimension"/>

   <!--以下是selector事件-->
   <attr name="ripple_enable" format="boolean"/>
   <attr name="ripple_color" format="color"/>
   <attr name="unpressed_color" format="color"/>
   <attr name="pressed_color" format="color"/>
复制代码

例如加一个边框背景,如下即可:

<TextView
    android:layout_width="130dp"
    android:layout_height="36dp"
    android:gravity="center"
    android:text="TextView"
    android:textColor="#8c6822"
    android:textSize="20sp"
    app:corners_radius="4dp"
    app:solid_color="#E3B666"
    app:stroke_color="#8c6822"
    app:stroke_width="2dp" />
复制代码

如果需要selector效果,需要同时添加

app:unpressed_color
app:pressed_color
复制代码

如果需要水波纹效果,5.0以上才支持:

app:ripple_enable="true"//打开水波纹开关
app:solid_color="xxx"//设置默认填充颜色
app:ripple_color="xxx"//设置水波纹颜色
复制代码

注意:

1、如果直接给原生控件添加属性,在xml中会如下报红色异常,这时候不用理会即可。

无需自定义View,彻底解放shape,selector吧

但是红色多了,显示总归难受,可以在根节点添加

tools:ignore="MissingPrefix" 
复制代码

即可

无需自定义View,彻底解放shape,selector吧

2、如果Button设置背景的时候文字显示不全,需要设置padding为0,这是button的系统默认风格导致的。

结尾

项目地址: github.com/JavaNoober/…

后续更新完善内容会在项目里标明,大家的 star 是我继续研究的动力☺!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

超级运营术

超级运营术

韩叙 / 中信出版社 / 2017-5

新产品上线,为什么仅仅500次转发能带来300个内测用户? 为什么每一次内容推送,都带来App的一次卸载高峰? 同类活动那么多,怎样做才能超越竞品,占据头条? 为什么有的文案像“小广告”,有的文案像贴心老友? 创业公司与大平台的玩法有何不同? …… 如何从“了解运营”到“精通运营”,可能是运营人*的困惑。《超级运营术》正是对这个问题的全面解答。韩叙总结10年运营......一起来看看 《超级运营术》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具