SuperButton

Project Url: ansnail/SuperButton
Introduction: 这真的可能是最好用的按钮了
More: Author   ReportBugs   
Tags:

引入

Download

implementation 'top.androidman:superfamily:2.1.0'

Github 传送门

写在前面

在版本 1.0 发布后,superbutton 受到了大家的喜爱,作者在项目开发中,写按钮也越来越自如。不过在使用过程中也发现了一些问题总结如下:

  1. 需要在比较复杂的布局中使用渐变背景
  2. 需要在比较复杂的布局中使用圆角
  3. 按钮需要支持边框虚线
  4. 需要在比较复杂的布局中使用阴影
  5. 按钮没有默认点击效果
  6. 没有动态设置方法

等等需求

解决办法一

由于存在以上问题,所以在使用过程中作者采取了一些折中的手段:

  1. 比如把 superbutton 放在布局的最下面,这样看上去就能解决背景是渐变背景的问题
  2. 自己给 superbutton 设置 pressed_color,让按钮具有点击效果
  3. 自己写 shape 给按钮设置虚线边框

但是这个不能从根本上解决问题,所以作者决心从根本上解决这些问题

新的思考

一个复杂的布局根布局一般是 ConstraintLayout、 FrameLayout、LinearLayout 或者 RelativeLayout,如果把 superbutton 的能力如果能赋给这些布局,那么我们在写一个复杂的布局时就能轻而易举的实现所有 superbutton 的背景效果。所以作者对 superbutton 的能力进行了抽取,让 ConstraintLayout、 FrameLayout、LinearLayout 和 RelativeLayout 都具备了 superbutton 除了文字和图标设置以外的所有能力。这也是作者把项目名修改为 superfamily 的原因,作者的愿景是希望做一个易用的库,让写布局变得更简单。

阴影具体的实现

在实现阴影的过程中,作者参考了 cardview 阴影的具体实现,在 5.0 以后由于 Android 原生支持了 elevation,但是设置阴影的具体实现在 native 代码里面,所以暂时没有找到比较好的设置方法。所以作者换了个思路,暂时阴影实现都使用 5.0 以下的实现方式,但是 5.0 以下版本阴影会占用 view 自身的空间,所以使用时需要注意使用 padding,让布局显示正常。

SuperFamily 成员(原生属性仍然可用)

  • SuperButton
  • SuperConstraintLayout
  • SuperFrameLayout
  • SuperLinearLayout
  • SuperRelativeLayout

SuperFamily 成员拥有一些公共属性,即都具有的属性,效果展示如下

效果演示

圆角 颜色渐变 默认点击效果 圆形
有边框布局 带阴影的布局 Selector
这些效果是所有的布局都具有的通用属性,分别解释如下(以 SuperRelativeLayout 为例):

0x1 圆角

效果

代码
<top.androidman.SuperRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:background_normalColor="@color/normal_color"
    app:corner="35dp" />
属性解释
  • 单独设置左下角角度
    app:corner_leftBottom="0dp"
  • 单独设置左上角角度
    app:corner_leftTop="5dp"
  • 单独设置右上角角度
    app:corner_rightTop="22dp"
  • 单独设置右下角角度
    app:corner_rightBottom="0dp"
  • 按钮四个角的圆角角度
    app:corner="10dp"
注意:单独设置角度会覆盖 corner 属性

0x2 颜色渐变

效果

代码
<top.androidman.SuperRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:background_colorOrientation="left_right"
    app:background_endColor="@color/end_color"
    app:background_startColor="@color/start_color"
    app:corner="35dp" />
属性解释
  • 开始颜色
    app:background_startColor="@color/color_14c7de"
  • 结束颜色
    app:background_endColor="@color/color_red"
  • 颜色渐变方向
    app:background_colorOrientation="right_left"
    • top_bottom
      从上到下
    • bottom_top
      从下到上
    • left_right
      从左到右
    • right_left
      从右到左
    • tr_bl
      从右上到左下
    • bl_tr
      从左下到右上
    • br_tl
      从右下到左上
    • tl_br
      从左上到右下
注意:当设置颜色渐变时,background_normalColor 将失效

0x3 默认点击效果

效果

代码
<top.androidman.SuperRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:layout_margin="10dp"
    app:background_normalColor="@color/green"
    app:corner="35dp"
    app:open_pressed_effect="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="开启点击效果"
        android:textColor="@color/color_white"
        android:textSize="22dp" />
</top.androidman.SuperRelativeLayout>
属性解释
  • 开启默认点击效果
    app:open_pressed_effect="true"
注意:open_pressed_effect 属性默认值是 false,没有开启点击效果

0x4 形状

效果

代码
<top.androidman.SuperRelativeLayout
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:layout_margin="10dp"
    app:background_normalColor="@color/green"
    app:shape="circle">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="开启点击效果"
        android:textColor="@color/color_white"
        android:textSize="22dp" />
</top.androidman.SuperRelativeLayout>
属性解释
  • 形状,默认为矩形,可以设置为圆形
    app:shape="circle"

0x4 边框

效果

代码
<top.androidman.SuperRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:background_normalColor="#FDEDED"
    app:border_color="@color/color_14c7de"
    app:border_dashGapWidth="5dp"
    app:border_dashWidth="10dp"
    app:border_width="1dp"
    app:corner="35dp"
    app:corner_leftTop="0dp" />
属性解释
  • 边框宽度
    app:border_width="2dp"
  • 边框颜色
    app:border_color="@color/color_red"
  • 边框虚线宽度
    app:border_dashWidth="5dp"
  • 边框虚线间隙值
    app:border_dashGapWidth="5dp"

0x5 带阴影的布局

效果

代码
<top.androidman.SuperRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="10dp"
    app:background_normalColor="@color/color_14c7de"
    app:corner="10dp"
    app:shadow_endColor="#00FFFFFF"
    app:shadow_size="10dp"
    app:shadow_startColor="@color/start_color" />
属性解释
  • 阴影开始颜色
    app:shadow_startColor="@color/color_text_grey"
  • 阴影开始颜色
    app:shadow_endColor="@color/color_grey_divider_line"
  • 阴影尺寸
    app:shadow_size="10dp"
注意:需要这三个属性同时设置,阴影效果才会展示,当设置阴影时不支持设置 shape 相关属性,border 相关属性,另外需要注意,阴影的尺寸会占用组件的大小,所以在设置阴影的时候需要注意

0x6 Selector

效果

代码
<top.androidman.SuperRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="10dp"
    app:background_normalColor="@color/color_14c7de"
    app:background_pressedColor="@color/end_color"
    app:corner="10dp" />
属性解释
  • 当按钮点下时会显示设置的颜色效果
    app:background_pressedColor="@color/color_accent"

二、SuperButton 的独有属性

效果演示

基本使用 带图标的按钮 没有文字的按钮

代码解释

0x1 基本使用

效果

代码
<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:background_normalColor="@color/color_accent"
    app:corner="10dp"
    app:text="@string/poetry_1"
    app:textColor="@color/color_white"
    app:textSize="22sp" />
属性解释
  • 按钮文字
    app:text="床前明月光"
  • 按钮文字颜色
    app:textColor="@color/color_white"
  • 按钮文字大小
    app:textSize="22sp"
  • 按钮背景颜色
    app:background_normalColor="@color/color_accent"

0x2 带图标的按钮

效果

代码
<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:background_normalColor="@color/color_red"
    app:corner="20dp"
    app:icon="@mipmap/icon_like"
    app:iconAuto="true"
    app:iconHeight="40dp"
    app:iconOrientation="right"
    app:iconPadding="20dp"
    app:iconWidth="40dp"
    app:text="图标在右边"
    app:textColor="@color/color_white"
    app:textSize="22sp" />
属性解释
  • 图标
    app:icon="@mipmap/icon_like"
  • 图标在文字的方向(left、right、top、bottom)
    app:iconOrientation="right"
  • 图标的宽
    app:iconWidth="40dp"
  • 图标的高
    app:iconHeight="40dp"
  • 图标距文字距离
    app:iconPadding="20dp"
  • 根据文字大小缩放图标,默认为 false
    app:iconAuto="true"
注意:iconWidth 和 iconHeight 属性要同时设置才生效,并且设置这两个属性的时候 iconAuto 属性会无效

0x3 没有文字的按钮

效果

代码
<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:background_normalColor="@color/color_red"
    app:corner="20dp"
    app:icon="@mipmap/icon_like"
    app:iconHeight="40dp"
    app:iconOrientation="right"
    app:iconPadding="20dp"
    app:iconWidth="40dp" />
注意:只设置图标不设置文字即可,由于 shape 是通用属性,所以按钮也可以设置

三、SuperLine

效果展示

代码演示(上面从上到下,为了效果把直线宽设置为 5dp)
<top.androidman.SuperLine
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_margin="15dp"
    app:line_color="@color/color_start" />

<top.androidman.SuperLine
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_margin="15dp"
    app:line_endColor="@color/color_end"
    app:line_startColor="@color/color_start" />

<top.androidman.SuperLine
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_margin="15dp"
    app:line_endColor="@color/color_end"
    app:line_startColor="@color/color_start"
    app:line_dashGapWidth="5dp"
    app:line_dashWidth="10dp" />

<top.androidman.SuperLine
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_margin="15dp"
    app:line_color="@color/color_start"
    app:line_dashGapColor="@color/color_accent"
    app:line_dashGapWidth="5dp"
    app:line_dashWidth="10dp" />

<top.androidman.SuperLine
    android:layout_width="5dp"
    android:layout_height="200dp"
    android:layout_margin="15dp"
    app:line_color="@color/color_start"
    app:line_dashGapColor="@color/color_accent"
    app:line_dashGapWidth="5dp"
    app:line_dashWidth="10dp" />
属性介绍
  • 线条方向,两个取值 vertical 和 horizontal
    app:orientation="vertical"
  • 设置直线颜色
    app:line_color="@color/color_start"
  • 直线开始颜色
    app:line_endColor="@color/color_end"
  • 直线结束颜色
    app:line_endColor="@color/color_end"
  • 虚线宽度
    app:line_dashWidth="10dp"
  • 虚线间隙宽度
    app:line_dashGapWidth="5dp"
  • 虚线间隙的颜色
    app:line_dashGapColor="@color/color_accent"
注意:superline 会根据直线的宽和高自动计算直线的方向,所以正常可以不用设置 orientation 属性

四、写在后面

如果以前用过 superbutton 的小伙伴会发现,新版本里面的属性有了一些变化,不过作者已经兼容了全部旧有属性所以大家可以放心使用,下面是部分新旧属性对照,希望小伙伴开始使用新属性

旧属性 新属性 作用
color_normal background_normalColor 正常背景颜色
color_pressed background_pressedColor 按压时的背景颜色
color_start background_startColor 开始颜色
color_end background_endColor 结束颜色
color_direction background_colorOrientation 颜色方向
corner_left_top corner_leftTop 左上角圆角半径
corner_left_bottom corner_leftBottom 左下角圆角半径
corner_right_top corner_rightTop 右上角圆角半径
corner_right_bottom corner_rightBottom 右下角圆角半径
Apps
About Me
GitHub: Trinea
Facebook: Dev Tools