美文网首页
RWidgetHelper的使用介绍

RWidgetHelper的使用介绍

作者: 雨田Android开发 | 来源:发表于2018-10-29 11:45 被阅读0次

说明

在Android开发中经常需要实现，基础控件的：圆角，边框，Gradient渐变，State各个状态的UI样式

基于快速开发，优化代码，简化使用的目的推出一套基于基础控件的封装

优点

1.不再编写大量的 selector 实现圆角效果，不再低声下气恳求美术切图

2.不在代码中各种 if else 判断 State 状态，改变UI样式

3.所有控件继承原生控件，添加 Helper 实现，基础API通用，代码包大小几乎忽略不计

4.一套 RWidgetHelper 控件几乎可以实现基础开发所有需求，不再到处找控件

5....太多了自己发掘吧~~

缺点

我写的东西怎么可能优缺点？？？ 非要说一个，只能是现在的版本功能相对简单，后续版本迭代中不断添加常用功能

效果图一览

示例效果图，不限于如此，更多使用详细参考相关属性

[图片上传失败...(image-16e10d-1540784698274)] [图片上传失败...(image-92b4f4-1540784698274)]

通用属性

  1. corner_radius 指定四周圆角
  1. corner_radius_xx 指定某一方向圆角
  1. border_color_xx 各个state状态边框颜色
  1. border_width_xx 各个state状态边框宽度
  1. border_dash_width 虚线边框 宽度
  1. border_dash_gap 虚线边框 间隔
  1. background_xx 各个state状态背景颜色
  1. gradient_orientation 渐变的方向
  1. gradient_type 渐变的样式
  1. gradient_radius 渐变半径
  1. gradient_centerX 渐变中心点X坐标（0.0-1.0）
  1. gradient_centerY 渐变中心点Y坐标（0.0-1.0）

使用

Gradle （版本号根据更新历史使用最新版）

compile 'com.ruffian.library:RWidgetHelper:1.0.2'

1.RTextView

1.特点

  1. RTextView 让你从此不再编写和管理大量 selector 文件（这个太可恨了）
  1. RTextView 改造了 drawableLeft/drawableXXX 图片的大小，从此你不在需要使用 LinearLayout + ImageView + TextView 就能够直接实现文字带图片的功能，关键还能设置icon大小
  1. RTextView 能够直接设置各种圆角效果： 四周圆角，某一方向圆角，甚至椭圆，圆形都简单实现。 边框效果，虚线边框都是一个属性搞定
  1. RTextView 不仅能够定义默认状态的背景，边框，连按下/点击状态通通一起搞定
  1. RTextView 按下变色支持：背景色，边框，文字，drawableLeft/xxx （这个赞啊）
  1. RTextView 支持指定字体样式

2.效果图

示例效果图，不限于如此，更多使用详细参考相关属性

[图片上传失败...(image-5244e8-1540784698273)] [图片上传失败...(image-5ea357-1540784698273)]

[图片上传失败...(image-a535e0-1540784698273)]

3.属性说明

开发者根据实际需要选择使用对应的功能属性

属性 说明
corner_radius 圆角 四周
corner_radius_top_left 圆角 左上
corner_radius_top_right 圆角 右上
corner_radius_bottom_left 圆角 左下
corner_radius_bottom_right 圆角 右下
border_dash_width 虚线边框 宽度
border_dash_gap 虚线边框 间隔
border_width_normal 边框宽度 默认
border_width_pressed 边框宽度 按下
border_width_unable 边框宽度 不可点击
border_color_normal 边框颜色 默认
border_color_pressed 边框颜色 按下
border_color_unable 边框颜色 不可点击
background_normal 背景颜色 默认
background_pressed 背景颜色 按下
background_unable 背景颜色 不可点击
text_color_normal 文字颜色 默认
text_color_pressed 文字颜色 按下
text_color_unable 文字颜色 不可点击
icon_src_normal drawable icon 默认
icon_src_pressed drawable icon 按下
icon_src_unable drawable icon 不可点击
icon_height drawable icon 高
icon_width drawable icon 宽
icon_direction drawable icon 位置{left,top,right,bottom}
text_typeface 字体样式

4.使用

4.1 XML使用

<com.ruffian.library.widget.RTextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:gravity="center"
    android:text="文本控件"

    //背景颜色 对应三个状态
    rtv:background_normal="#3F51B5"
    rtv:background_pressed="#FF450F21"
    rtv:background_unable="#c3c3c3"

    //边框颜色 对应三个状态
    rtv:border_color_normal="#FF4081"
    rtv:border_color_pressed="#3F51B5"
    rtv:border_color_unable="#c3c3c3"

    //边框宽度 对应三个状态 一般设置相同值
    rtv:border_width_normal="3dp"
    rtv:border_width_pressed="4dp"
    rtv:border_width_unable="5dp"

    //虚线边框 1.虚线边框宽度 2.虚线间隔
    rtv:border_dash_width="10dp"
    rtv:border_dash_gap="4dp"

    //圆角度数 1.四周统一值 2.四个方向各个值
    //xml:  通过xml 设置了 corner_radius ，则 corner_radius_xxx 不起作用
    //java: 通过java代码设置 corner_radius_xxx ，则 corner_radius 不起作用
    rtv:corner_radius="10dp"
    rtv:corner_radius_top_left="10dp"
    rtv:corner_radius_bottom_left="15dp"
    rtv:corner_radius_bottom_right="20dp"
    rtv:corner_radius_top_right="25dp"

    //drawableXXX icon 对应三个状态
    rtv:icon_src_normal="@mipmap/icon_phone_normal"
    rtv:icon_src_pressed="@mipmap/icon_phone_pressed"
    rtv:icon_src_unable="@mipmap/icon_phone_unable"

    //drawableXXX icon 方向 {上,下,左,右}
    rtv:icon_direction="top"

    //drawableXXX icon 宽/高
    rtv:icon_height="30dp"
    rtv:icon_width="30dp"

    //文字颜色 对应三个状态
    rtv:text_color_normal="#c3c3c3"
    rtv:text_color_pressed="#3F51B5"
    rtv:text_color_unable="#FF4081"

    //字体样式
    rtv:text_typeface="fonts/RobotoMono-Thin.ttf"
    />

4.2 以上属性均提供Java代码 get/set 方法

    RTextView textView = (RTextView) findViewById(R.id.text1);
    //获取Helper
    RTextViewHelper tvHelper = textView.getHelper();
    tvHelper.setIconNormal(getDrawable(R.mipmap.ic_launcher))
             .setIconHeight(10)
             .setIconWidth(20)
             .setIconDirection(RTextViewHelper.ICON_DIR_TOP);

4.3 备注

1\. 圆角边框，圆角背景等属性需要配合 `background_xxx` 自定义背景属性使用，原生 `background` 没有效果

2.REditText

REditText 使用方法跟 RTextView 完全一致

[图片上传失败...(image-f6d08a-1540784698273)]

3. RLinearLayout / RRelativeLayout / RView

RLinearLayout

RRelativeLayout

RView

这三个控件只支持基本属性

属性 说明
corner_radius 圆角 四周
corner_radius_top_left 圆角 左上
corner_radius_top_right 圆角 右上
corner_radius_bottom_left 圆角 左下
corner_radius_bottom_right 圆角 右下
border_dash_width 虚线边框 宽度
border_dash_gap 虚线边框 间隔
border_width_normal 边框宽度 默认
border_width_pressed 边框宽度 按下
border_width_unable 边框宽度 不可点击
border_color_normal 边框颜色 默认
border_color_pressed 边框颜色 按下
border_color_unable 边框颜色 不可点击
background_normal 背景颜色 默认
background_pressed 背景颜色 按下
background_unable 背景颜色 不可点击

[图片上传失败...(image-ffb150-1540784698272)] [图片上传失败...(image-afb939-1540784698272)]

4. RImageView

RImageView 不再提供背景各个state背景颜色,提供了各个state的icon

1.圆形图片

2.圆角图片

3.指定某一方向圆角图片

4.边框

5.各个state状态的图片 默认/按下/不可点击

[图片上传失败...(image-40022-1540784698272)]

属性说明

属性 说明
corner_radius 圆角 四周
corner_radius_top_left 圆角 左上
corner_radius_top_right 圆角 右上
corner_radius_bottom_left 圆角 左下
corner_radius_bottom_right 圆角 右下
border_width 边框宽度
border_color 边框颜色
icon_src_normal icon 默认
icon_src_pressed icon 按下
icon_src_unable icon 不可点击
is_circle 是否圆形图片

xml使用

<com.ruffian.library.widget.RImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginLeft="10dp"
            //边框    
            app:border_color="@color/colorAccent"
            app:border_width="2dp"
            //圆角相关
            app:corner_radius="10dp"
            app:corner_radius_bottom_left="10dp"
            app:corner_radius_bottom_right="10dp"
            app:corner_radius_top_left="10dp"
            app:corner_radius_top_right="10dp"
            //state状态资源
            app:icon_src_normal="@mipmap/icon_man"
            app:icon_src_pressed="@mipmap/icon_man_pressed"
            app:icon_src_unable="@mipmap/icon_man_pressed"
            //是否圆形
            app:is_circle="true" />

Java代码使用

    RImageView imageView = (RImageView) findViewById(R.id.iv);
    //获取Helper
    RImageViewHelper ivHelper=imageView.getHelper();
    ivHelper.setIconNormal(getDrawable(R.mipmap.icon_man))
            .setIconPressed(getDrawable(R.mipmap.icon_man_pressed));

5. Gradient 渐变使用

Gradient 渐变作用于所有View，是通用属性

  1. gradient_orientation 渐变的方向
  1. gradient_type 渐变的样式
  1. gradient_radius 渐变半径
  1. gradient_centerX 渐变中心点X坐标（0.0-1.0）
  1. gradient_centerY 渐变中心点Y坐标（0.0-1.0）

[图片上传失败...(image-add7d6-1540784698272)]

属性说明

属性 说明
gradient_orientation 渐变的方向 参考 GradientDrawable.Orientation:TOP_BOTTOM，TR_BL...
gradient_type 渐变的样式 linear线性，radial径向，sweep扫描式 默认：linear
gradient_radius 渐变半径 默认:（宽或高最小值）/ 2
gradient_centerX 渐变中心点X坐标（0.0-1.0） 0.5表示中间 默认:0.5
gradient_centerY 渐变中心点Y坐标（0.0-1.0） 0.5表示中间 默认:0.5
background_xxx 渐变颜色值，大于2个颜色值则有渐变效果，否则默认背景颜色

xml使用

        <com.ruffian.library.widget.RTextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:text="左到右"
            android:textColor="@android:color/white"
            android:textSize="11sp"
            app:background_normal="@array/array_l_r"
            app:background_pressed="#74EBD5"
            app:corner_radius="10dp"
            app:gradient_radius="100dp"
            app:gradient_centerX="0.5"
            app:gradient_centerY="0.5"
            app:gradient_type="linear"
            app:gradient_orientation="LEFT_RIGHT" />

        array.xml
        <?xml version="1.0" encoding="utf-8"?>
        <resources xmlns:tools="http://schemas.android.com/tools" tools:ignore="MissingTranslation">

            <!--左到右-->
            <array name="array_l_r">
                <item>#74EBD5</item>
                <item>#9FACE6</item>
            </array>

        </resources>
background_XXX 如果使用array(大于2个颜色值)则有渐变效果； 如果 app:background_normal="#74EBD5" 这类单个颜色值则是默认背景颜色

相关文章

  • RWidgetHelper的使用介绍

    说明 在Android开发中经常需要实现，基础控件的：圆角，边框，Gradient渐变，State各个状态的UI样...

  • 3.STREAM

    1.Stream使用介绍 2.FS的使用介绍 3.Buffer使用介绍 4.Events使用介绍 5.有个例子可以看下

  • Vim的使用介绍

    Vim是什么 Vim是从vi发展出来的一个文本编辑器，其代码补充，编译及错误跳转方便编程的功能特别丰富，在程序员中...

  • Lucene的使用介绍

    今天介绍第二个任务——由得到的XML获得索引，将使用到Lucene包。 本文作者：龙鹏本文前提：已经获得XML文件...

  • Markdown的使用介绍

    1、标题 一个#代表一级标题，N（N<=6）个#号代表N级标题，N越大，字体越小。 例如： 以上是1-4级标题 编...

  • Git的使用介绍

    git的使用 git是什么？ git其实就是一个分布式版本版本控制系统，和集中式版本控制工具不同，它采用了分布式版...

  • VIM的使用介绍

    VIM简介 Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。[...

  • MQTTClient的使用介绍

    开篇 最近在使用MQTTClient实现一个类似于消息推送的服务，说实话，真没怎么使用过MQTTClient，也不...

  • markdown的使用介绍

    markdown 的使用介绍 markdown 是一种标记语言，它可以使用者不需要考虑文章格式和排版，使用mark...

  • ExoPlayer的使用介绍

    版权声明：本文为博主原创文章，转载请注明出处。推荐：欢迎关注我创建的Android TV 简书专题，会定期给大家分...

网友评论

      本文标题：RWidgetHelper的使用介绍

      本文链接：https://www.haomeiwen.com/subject/cchbtqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|RWidgetHelper的使用介绍|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！