欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

BackgroudLibrary 通过标签直接生成shape，无需再写shape.xml，你值得拥有！！！

程序员文章站 2022-07-12 20:52:14
...
BackgroundLibrary
Hello，时隔多日，我球球又给大家来整活了，话不多说，喜欢的朋友点赞收藏➕关注，开冲！

BackgroudLibrary 通过标签直接生成shape，无需再写shape.xml，你值得拥有！！！


A framework for directly generating shape through Tags, no need to write shape.xml again（通过标签直接生成shape，无需再写shape.xml）

上述描述为BackgroundLibrary在GitHub的官方描述，可以看出，它相当于一个类库，来帮助我们更加简洁的在布局文件中编写shape，不用再写繁琐的shape.xml，可以说是开发必备了。但是他有一个缺点就是不能实时显示效果，不过这对于我这种写一点测试一点的人来说，影响并不是很大。下面是GitHub官方源码地址：

BackgroundLibrary



使用方法
依旧是添加依赖： 
implementation "com.android.support:appcompat-v7:$supportVersion"
implementation 'com.noober.background:core:1.6.3'

如果项目使用了androidx： 
implementation "androidx.appcompat:appcompat:$supportVersion" 
implementation 'com.noober.background:core:1.6.3'

接下来可以通过配置Live Templates，使我们在编写布局文件的时候能进行自动提示代码：

以Android studio3.2为例:
mac:进入目录MacintoshHD\user\xxx\Library\Preferences\AndroidStudio3.2\templates
windows:进入目录C:\Users\XXX.AndroidStudio3.2\config\templates
如果templates不存在，手动创建文件夹即可； 在templates下面加入文件BackgroundLibrary.xml 重启as即可。


使用示例


  • 1、边框+背景+圆角

<TextView
    android:layout_width="130dp"
    android:layout_width="130dp"
    android:layout_height="36dp"
    android:gravity="center"
    android:text="TextView"
    android:textColor="#8c6822"
    android:textSize="20sp"
    app:bl_corners_radius="4dp"
    app:bl_solid_color="#E3B666"
    app:bl_stroke_color="#8c6822"
    app:bl_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:bl_corners_radius="2dp"
    app:bl_gradient_angle="0"
    app:bl_gradient_endColor="#4F94CD"
    app:bl_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、点击效果



点赞


BackgroudLibrary 通过标签直接生成shape，无需再写shape.xml，你值得拥有！！！


android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="5dp"
app:bl_pressed_drawable="@drawable/circle_like_pressed"
app:bl_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>

通过代码设置 
Drawable drawable4 = new DrawableCreator.Builder().setCornersRadius(dip2px(20))
        .setPressedDrawable(ContextCompat.getDrawable(this, R.drawable.circle_like_pressed))
        .setUnPressedDrawable(ContextCompat.getDrawable(this, R.drawable.circle_like_normal))
        .build();
tv.setClickable(true);
tv.setBackground(drawable4);


有波纹触摸反馈的按钮 
<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:bl_corners_radius="20dp"
        app:bl_pressed_drawable="#71C671"
        app:bl_ripple_color="#71C671"
        app:bl_ripple_enable="true"
        app:bl_stroke_color="#8c6822"
        app:bl_stroke_width="2dp"
        app:bl_unPressed_drawable="#7CFC00" />

通过代码设置 
Drawable drawable3 = new DrawableCreator.Builder().setCornersRadius(dip2px(20))
        .setRipple(true, Color.parseColor("#71C671"))
        .setSolidColor(Color.parseColor("#7CFC00"))
        .setStrokeColor(Color.parseColor("#8c6822"))
        .setStrokeWidth(dip2px(2))
        .build();
btn.setBackground(drawable3);

4、点击文字变色 
<Button
    android:layout_width="300dp"
    android:layout_height="50dp"
    android:layout_marginTop="5dp"
    android:gravity="center"
    android:padding="0dp"
    android:text="点击文字变色"
    app:bl_pressed_textColor="#919DAF"
    app:bl_unPressed_textColor="@android:color/holo_red_dark"/>

5、点击填充边框变色属性 
<TextView
    android:layout_width="180dp"
    android:layout_height="36dp"
    android:layout_marginTop="15dp"
    android:gravity="center"
    android:text="点击边框变色"
    android:textColor="@android:color/black"
    android:textSize="18dp"
    android:textStyle="bold"
    android:clickable="true"
    app:bl_pressed_solid_color="#FFDEAD"
    app:bl_unPressed_solid_color="#E9967A"
    app:bl_stroke_width="1dp"
    app:bl_pressed_stroke_color="#C6E2FF"
    app:bl_unPressed_stroke_color="#98FB98"/>

6、设置drawableLeft 
    <Button
        android:id="@+id/btn_like"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        app:bl_position="left"
        android:background="@null"
        android:text="点赞+1"
        app:bl_pressed_drawable="@drawable/circle_like_pressed"
        app:bl_unPressed_drawable="@drawable/circle_like_normal" />

    <Button
        android:id="@+id/btn_like2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        app:bl_position="left"
        android:background="@null"
        android:text="未点赞"
        app:bl_selected_textColor="#fbdc4a"
        app:bl_unSelected_textColor="@android:color/black"
        app:bl_selected_drawable="@drawable/circle_like_pressed"
        app:bl_unSelected_drawable="@drawable/circle_like_normal" />

7、设置帧动画 
<View
        android:id="@+id/v_anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:bl_oneshot="false"
        app:bl_duration="50"
        app:bl_anim_auto_start="true"
        app:bl_frame_drawable_item0="@drawable/img00"
        app:bl_frame_drawable_item1="@drawable/img01"
        app:bl_frame_drawable_item2="@drawable/img02"
        app:bl_frame_drawable_item3="@drawable/img03"
        app:bl_frame_drawable_item4="@drawable/img04"
        app:bl_frame_drawable_item5="@drawable/img05"
        app:bl_frame_drawable_item6="@drawable/img06"
        app:bl_frame_drawable_item7="@drawable/img07"
        app:bl_frame_drawable_item8="@drawable/img08"
        app:bl_frame_drawable_item9="@drawable/img09"
        app:bl_frame_drawable_item10="@drawable/img10"
        app:bl_frame_drawable_item11="@drawable/img11"
        app:bl_frame_drawable_item12="@drawable/img12"
        app:bl_frame_drawable_item13="@drawable/img13"
        app:bl_frame_drawable_item14="@drawable/img14"/>


常用属性 
bl_solid_color	背景色
bl_corners_radius	圆角
bl_corners_bottomLeftRadius		↙️圆角
bl_corners_bottomRightRadius	↘️圆角
bl_corners_topLeftRadius	↖️圆角
bl_corners_topRightRadius	↗️圆角
bl_stroke_width		边框宽度
bl_stroke_color		边框颜色

其实很多时候我们只需要自定义一点点的按钮或者textview的样式，但是有时候让人蛋疼的就是，很多不同的样式其实相差就只有那么一点点，要是放在以前我们就得写一大堆的shape，用的时候还得一个个找，现在，只需要在布局文件写就好了，nice


本文很多的????都是借鉴它GitHub原文，如有冒犯，请私信


我是分割线

小结


总的来说，BackgroundLibrary这是一条非常好用的内裤，让我彻底摆脱了包括写和找shape.xml文件的烦恼，麻麻再也不用担心我为找样式而烦恼了。可能美中不足的一点就是他不能实时显示效果，但是他官方也给出了相对应的办法，不过我嫌麻烦就没弄，感兴趣的小伙伴可以点击下方的超链接：

如何进行预览


可能已经有小伙伴已经过上了使用Jetpack的舒适生活（羡慕），本球最近也在努力的学习databinding，room等相关知识，不得不说，哇！JetPack这条内裤真的是太舒服了，这里给大家推荐个腾讯的网课，那里有相关于Jetpack，mvvm，flutter等一系列的Android学习课程（绝对不是打广告！！！），喜欢的小伙伴可以尝试看看，地址我放下面啦，我们下期再见！????

BackgroudLibrary 通过标签直接生成shape，无需再写shape.xml，你值得拥有！！！

腾讯网课

相关标签： BackgroundLibrary android

上一篇： Python 人脸五官关键点检测 + 自动识别人脸给头像戴口罩

下一篇： 牛吃草问题-数学题

推荐阅读