android UI 设计 shape selector

前言

在我们的日常开发当中,通常会因为UI需求去编写大量的shape和selector资源,下面介绍一个框架能够替代shape和selector资源,直接在xml文件中写就行了,非常的方便,传送门

实例效果

image

使用方式

第一步: 在module的build.gradle文件下做如下依赖

implementation 'com.noober.background:core:1.2.0'

第二步: 在BaseActivity中的super.onCreate之前调用如下代码

BackgroundLibrary.inject(this);

第三部: 直接在xml文件中添加属性即可

支持的自定义属性

下面是所有的自定义属性，使用方法和shape、selector完全一样

shape类

支持shape的所有属性，命名规则就是标签名_标签属性名：

名称	类型
shape	rectangle、oval、line、ring(暂时不支持)
solid_color	color
corners_radius	dimension
corners_bottomLeftRadius	dimension
corners_bottomRightRadius	dimension
corners_topLeftRadius	dimension
corners_topRightRadius	dimension
gradient_angle	integer
gradient_centerX	float
gradient_centerY	float
gradient_centerColor	color
gradient_endColor	color
gradient_startColor	color
gradient_gradientRadius	dimension
gradient_type	linear、radial、sweep
gradient_useLevel	boolean
size_width	dimension
size_height	dimension
stroke_width	dimension
stroke_color	color
stroke_dashWidth	dimension
stroke_dashGap	dimension

selector类

支持selector的所有属性：

名称	类型
checkable_drawable	color、reference
checked_drawable	color、reference
enabled_drawable	color、reference
selected_drawable	color、reference
pressed_drawable	color、reference
focused_drawable	color、reference
focused_hovered	color、reference
focused_activated	color、reference
unCheckable_drawable	color、reference
unChecked_drawable	color、reference
unEnabled_drawable	color、reference
unSelected_drawable	color、reference
unPressed_drawable	color、reference
unFocused_drawable	color、reference
unFocused_hovered	color、reference
unFocused_activated	color、reference

其他属性

名称	类型	备注
ripple_enable	boolean	是否开启点击的水波纹效果
ripple_color	color	水波纹颜色（如果开启，一定要有这个属性能生效）
unpressed_color	color	没有按下的时候的颜色（早版本的属性，可以被pressed_drawable替换）
pressed_color	color	按下时候的颜色（早版本的属性，可以被unPressed_drawable替换）

使用例子

1, 边框+背景+圆角

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

等同于

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp"/>
<solid android:color="#E3B666"/>
<stroke android:color="#E3B666" android:width="2dp"/>
</shape>

效果图:

 

2, 渐变

<Button
android:id="@+id/btn"
android:layout_width="130dp"
android:layout_height="36dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:padding="0dp"
android:text="跳转到列表"
android:textColor="#4F94CD"
android:textSize="20sp"
app:corners_radius="2dp"
app:gradient_angle="0"
app:gradient_endColor="#4F94CD"
app:gradient_startColor="#63B8FF" />

等同于

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp"/>
<gradient android:angle="0" 
          android:startColor="#63B8FF"
          android:endColor="#4F94CD"/>
</shape>

效果图:

 

3, 点击效果

 

第一个点赞效果:

<TextView
  android:layout_marginTop="5dp"
  android:layout_width="20dp"
  android:layout_height="20dp"
  app:pressed_drawable="@drawable/circle_like_pressed"
  app:unPressed_drawable="@drawable/circle_like_normal" />

等同于

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
    android:drawable="@drawable/circle_like_pressed" />
<item android:state_pressed="false"
    android:drawable="@drawable/circle_like_normal" />
</selector>

第二个按钮效果：

<Button
  android:layout_width="300dp"
  android:layout_height="50dp"
  android:layout_marginTop="5dp"
  android:gravity="center"
  android:padding="0dp"
  android:text="有波纹触摸反馈的按钮"
  android:textColor="@android:color/white"
  android:textSize="20sp"
  app:corners_radius="20dp"
  app:pressed_drawable="#71C671"
  app:ripple_color="#71C671"
  app:ripple_enable="true"
  app:stroke_color="#8c6822"
  app:stroke_width="2dp"
  app:unPressed_drawable="#7CFC00" />

使用其实基本和selector shape一样。

使用注意

1、selector的相关属性，如果传入的drawable不是颜色的资源，会覆盖掉shape设置的属性
2、在根布局添加

    tools:ignore="MissingPrefix"

可以防止报红
3、因为layoutInflater限制了只能有一个factory，如果有其他库已经使用了setFactory方法，比如换肤的库，只需要在其他库调用layoutInflater.setFactory之后调用

BackgroundLibrary.inject2(context);

这样其他的库与本库同样可以生效。
4、selector一个item表示多个属性，暂时无法实现，如下：

 <item android:state_pressed="true" android:state_focused="true"
    android:drawable="@drawable/button_pressed" />

因为无法用一个属性去表示两种状态，有思路的同学可以告诉我
5、fragment使用无需任何处理，其Activity调用inject即可
6、listView，recyclerView使用也无需任何处理。
如果不生效，只需要

//在调用inflate只需调用一次context，保证adapter创建View时传入的是同一个context即可
BackgroundLibrary.inject(context);

View item = LayoutInflater.from(context).inflate(xxx)

7、自定义View中调用了inflate，同listView一样处理即可

作者：妖孽那里逃
链接：https://www.jianshu.com/p/ae5f25460dd6
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。