Android告别Shape.xml

天下苦shape.xml久已，特别是遇上不靠谱的UI，圆角+背景色+边框，三个属性就能给你折腾出来几百种组合，每个组合都要写对应的shape.xml，太折腾人了！

在这里插入图片描述

展示

效果图

在这里插入图片描述

代码

/**
 * 设置shape
 */
@BindingAdapter(
    // 圆角(dp)
    "shape_radius",
    // 背景色 (支持ID/颜色值字符串)
    // 设置渐变色后,背景色无效
    "shape_bg_color",
    // 边框宽度
    "shape_border_width",
    // 边框颜色 (支持ID/颜色值字符串)
    "shape_border_color",
    // 虚线宽度
    "shape_dash_width",
    // 虚线空格宽度
    "shape_dash_gap",
    // 渐变开始颜色 (支持ID/颜色值字符串)
    "shape_gradient_start_color",
    // 渐变结束颜色 (支持ID/颜色值字符串)
    "shape_gradient_end_color",
    /**
     * 渐变方向
     * 0: 左->右
     * 90: 下->上
     * 只能为45的倍数
     * 默认 270
     */
    "shape_gradient_angle",
    requireAll = false
)
fun setShape(
    view: View,
    radius: Any? = null,
    bgColor: Any? = null,
    borderWidth: Any? = null,
    borderColor: Any? = null,
    dashWidth: Any? = null,
    dashGap: Any? = null,
    gradientStartColor: Any? = null,
    gradientEndColor: Any? = null,
    gradientAngle: Int? = null
) {
    val shapeUtils = createShapeUtils(view)
    //圆角
    radius?.let {
        shapeUtils.setCornerRadius(getSize(it).toFloat())
    }
    //背景色
    bgColor?.let {
        shapeUtils.setColor(getColor(it))
    }
    //边框
    borderWidth?.let {
        borderColor?.let { color ->
            //虚线信息为空,则为实线
            if (dashWidth == null || dashGap == null) {
                shapeUtils.setStroke(getSize(it), getColor(color))
            } else {
                shapeUtils.setStroke(
                    getSize(it),
                    getColor(color),
                    getSize(dashWidth).toFloat(),
                    getSize(dashGap).toFloat()
                )
            }
        }
    }
    //渐变
    gradientStartColor?.let { startColor ->
        gradientEndColor?.let { endColor ->
            shapeUtils.setColors(intArrayOf(getColor(startColor), getColor(endColor)))
        }
    }
    //渐变角度
    gradientAngle?.let { angle ->
        shapeUtils.setOrientation(angle)
    }
    shapeUtils.setDrawable(view)
}

/**
 * 设置圆角
 * 这里只设置圆角,不设置背景色,边框等
 * 并且,不可以与上面方法中的"shape_radius"同时使用
 *
 * 根据设置逻辑,left,right,top,bottom四个会相互冲突,只能设置其中一个,并且只生效最后一个(是代码处理逻辑的最后一个,不是xml中的最后一个)
 *
 * 如果设置了top_left,top_right,bottom_left,bottom_right,则会忽略left,right,top,bottom
 *
 * top_left,top_right,bottom_left,bottom_right 设置某一个,都判定为设置了四个,其余未设置的,默认为0
 */
@BindingAdapter(
    // 左侧圆角
    "shape_radius_left",
    // 上侧圆角
    "shape_radius_top",
    // 右侧圆角
    "shape_radius_right",
    // 下侧圆角
    "shape_radius_bottom",
    // 左上圆角
    "shape_radius_top_left",
    // 右上圆角
    "shape_radius_top_right",
    // 左下圆角
    "shape_radius_bottom_left",
    // 右下圆角
    "shape_radius_bottom_right",
    requireAll = false
)
fun setShapeRadius(
    view: View,
    radiusLeft: Any? = null,
    radiusTop: Any? = null,
    radiusRight: Any? = null,
    radiusBottom: Any? = null,
    radiusTopLeft: Any? = null,
    radiusTopRight: Any? = null,
    radiusBottomLeft: Any? = null,
    radiusBottomRight: Any? = null
) {
    val shapeUtils = createShapeUtils(view)
    // 判定是否设置了四个圆角
    if (radiusTopLeft != null || radiusTopRight != null || radiusBottomLeft != null || radiusBottomRight != null) {
        shapeUtils.setCornerRadius(
            getSize(radiusTopLeft).toFloat(),
            getSize(radiusTopRight).toFloat(),
            getSize(radiusBottomRight).toFloat(),
            getSize(radiusBottomLeft).toFloat(),
        )
    } else {
        // 判定是否设置了左侧圆角
        if (radiusLeft != null) {
            shapeUtils.setCornerRadiusLeft(getSize(radiusLeft).toFloat())
        }
        // 判定是否设置了上侧圆角
        if (radiusTop != null) {
            shapeUtils.setCornerRadiusTop(getSize(radiusTop).toFloat())
        }
        // 判定是否设置了右侧圆角
        if (radiusRight != null) {
            shapeUtils.setCornerRadiusRight(getSize(radiusRight).toFloat())
        }
        // 判定是否设置了下侧圆角
        if (radiusBottom != null) {
            shapeUtils.setCornerRadiusBottom(getSize(radiusBottom).toFloat())
        }
    }
    shapeUtils.setDrawable(view)
}

/**
 * 创建shape工具
 * [ShapeUtils] 是Shape工具类,可以在代码库中获取
 */
private fun createShapeUtils(view: View): ShapeUtils {
    return if (view.background is GradientDrawable) {
        ShapeUtils.newShape(view.background as GradientDrawable)
    } else {
        ShapeUtils.newShape()
    }
}

/**
 * 获取颜色
 */
private fun getColor(color: Any): Int {
    return if (color is Int) {
        color
    } else {
        Color.parseColor(color.toString())
    }
}

/**
 * 获取尺寸
 * 这里只支持dp
 * [SizeUtils] 是尺寸工具类,可以在代码库中获取
 */
private fun getSize(size: Any?): Int {
    return try {
        SizeUtils.dp2px(size.toString().toFloat())
    } catch (e: Exception) {
        0
    }
}

使用

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".ui.shpe.ShapeActivity">

        <TextView
            shape_bg_color="@{@color/orange}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="背景色"
            android:textColor="@color/black" />

        <TextView
            shape_bg_color="@{@color/orange}"
            shape_radius="@{20}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="背景色 + 圆角"
            android:textColor="@color/black" />

        <TextView
            shape_bg_color="@{@color/orange}"
            shape_border_color="@{@color/red}"
            shape_border_width="@{1}"
            shape_radius="@{20}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="背景色 + 圆角 + 边框"
            android:textColor="@color/black" />

        <TextView
            shape_bg_color="@{@color/orange}"
            shape_border_color="@{@color/red}"
            shape_border_width="@{1}"
            shape_dash_gap="@{3}"
            shape_dash_width="@{5}"
            shape_radius="@{20}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="背景色 + 圆角 + 虚线边框"
            android:textColor="@color/black" />

        <TextView
            shape_border_color="@{@color/red}"
            shape_border_width="@{1}"
            shape_dash_gap="@{3}"
            shape_dash_width="@{5}"
            shape_gradient_end_color="@{@color/white}"
            shape_gradient_start_color="@{@color/orange}"
            shape_radius="@{20}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="渐变色 + 圆角 + 虚线边框"
            android:textColor="@color/black" />

        <TextView
            shape_border_color="@{@color/red}"
            shape_border_width="@{1}"
            shape_dash_gap="@{3}"
            shape_dash_width="@{5}"
            shape_gradient_angle="@{90}"
            shape_gradient_end_color="@{@color/white}"
            shape_gradient_start_color="@{@color/orange}"
            shape_radius="@{20}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="渐变色 + 圆角 + 虚线边框 + 90度旋转"
            android:textColor="@color/black" />

        <TextView
            shape_bg_color="@{@color/orange}"
            shape_border_color="@{@color/red}"
            shape_border_width="@{1}"
            shape_dash_gap="@{3}"
            shape_dash_width="@{5}"
            shape_radius_top="@{8}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="背景色 + Top圆角 + 虚线边框"
            android:textColor="@color/black" />

        <TextView
            shape_bg_color="@{@color/orange}"
            shape_border_color="@{@color/red}"
            shape_border_width="@{1}"
            shape_dash_gap="@{3}"
            shape_dash_width="@{5}"
            shape_radius_bottom_right="@{8}"
            shape_radius_top_left="@{8}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="背景色 + TopLeft圆角 + BottomRight圆角 + 虚线边框"
            android:textColor="@color/black" />

    </androidx.appcompat.widget.LinearLayoutCompat>
</layout>

解析

实现方式是依托于DataBinding，如果同学不喜欢使用DataBinding，那么这篇文章就帮不到您了。

通过@BindingAdapter注释，实现布局xml中访问Kotlin代码的能力，通过设置shape的各种属性值，轻松实现View的背景色、圆角、渐变色、边框的功能设置。

其中圆角的设置做了比较多的需求适配，所以单独又拆分出了一个方法。

注意： 任何View都可以通过该方法实现背景Shape的自定义

缺点

  • 必须搭配DataBinding框架使用
  • 无法实时渲染，也就是在编码过程中，无法在AndroidStudio中实时看到样式，需要运行到手机

代码仓库

仓库地址

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/6745.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

44学习自动化运维工具 Chef 的基本用法，包括厨师编写、节点管理

44学习自动化运维工具 Chef 的基本用法，包括厨师编写、节点管理

Chef是一种自动化运维工具&#xff0c;它允许您定义基础设施的状态&#xff0c;并根据需要管理这些状态。在这里&#xff0c;我们将学习Chef的基本用法&#xff0c;包括如何编写和管理Cookbook和Node。 安装Chef 在使用Chef之前&#xff0c;您需要在管理节点和目标节点上安装…
阅读更多...
图最短路径算法

图最短路径算法

图最短路径算法迪杰斯特拉算法弗洛伊德算法BFS迪杰斯特拉算法 求原点0到其他点的最短路径 #include<iostream> #include<vector> #include<string.h> #define N 10 #define INF 65535 using namespace std;int graph[N][N]; int dist[N]; int parent[N];/…
阅读更多...
达梦数据库DISQL常用命令

达梦数据库DISQL常用命令

1.帮助 HELP 作用&#xff1a;可以帮助用户查看其他命令的具体用法。用户可以看到其他命令系统显示的内容。 语法如下&#xff1a; HELP <command> 示例如下&#xff1a; 2.输出文件 SPOOL 作用&#xff1a;将屏幕显示的内容输出到指定文件 语法如下&#xff1a; …
阅读更多...
JVM 类的加载过程

JVM 类的加载过程

文章目录1 类的生命周期2 类加载过程2.1 加载2.2 验证2.3 准备2.4 解析2.5 初始化3 类卸载1 类的生命周期 类从被加载到虚拟机内存中开始到卸载出内存为止&#xff0c;它的整个生命周期可以简单概括为 7 个阶段&#xff1a;&#xff1a;加载&#xff08;Loading&#xff09;、…
阅读更多...
和开振学Spring boot 3.0之Spring MVC：③Spring MVC的配置

和开振学Spring boot 3.0之Spring MVC：③Spring MVC的配置

我们前面两篇做了基本的开发&#xff0c;相信大家对Spring MVC的流程有了基本的了解&#xff0c;这些我们来确认一下一些细节。 1、Spring MVC是如何初始化的 在Servlet 3.0规范中&#xff0c;web.xml再也不是一个必需的配置文件。为了适应这个规范&#xff0c;Spring MVC从3…
阅读更多...
【数据结构】七种常见的排序

【数据结构】七种常见的排序

目录 1、排序的概念即运用 1.1、排序的概念 1.2、常见排序算法的分类 2、插入排序 2.1、排序原理 2.2、直接插入排序 2.3、希尔排序&#xff08;缩小增量排序&#xff09; 3、选择排序 3.1、直接选择排序 3.2、堆排序 4、选择排序 4.1、冒泡排序 4.2、快速排序 …
阅读更多...
Android---Jetpack之Room

Android---Jetpack之Room

目录 应用实现 数据库升级 异常处理 Schema 文件 销毁和重建策略 预填充数据库 Android 采用 SQLite 作为数据库存储&#xff0c;开源社区常见的 ORM(Object Relational Mapping)库有ORMLite、GreenDAO等。Room 和其它库一样&#xff0c;也是在 SQLite 上提供了一层封装。…
阅读更多...
一文懂交叉熵Cross-Entropy

一文懂交叉熵Cross-Entropy

本文翻译自https://naokishibuya.medium.com/demystifying-cross-entropy-e80e3ad54a8 交叉熵由交叉&#xff08;Cross&#xff09;和熵&#xff08;Entropy&#xff09;两部分组成&#xff0c;在机器学习中常常被定义为损失函数的目标。在二分类任务中&#xff0c;更有二分类交…
阅读更多...
利用SVM识别汽车车牌（python代码，带有GUI界面）

利用SVM识别汽车车牌（python代码，带有GUI界面）

1.效果图
阅读更多...
数据结构和算法_链表合并

数据结构和算法_链表合并

阅读更多...
QT学习笔记（智能家居物联网项目实验2）

QT学习笔记（智能家居物联网项目实验2）

物联网项目综合测试 打开 4/01_smarthome/01_smarthome/01_smarthome.pro 项目&#xff0c;此项目为智能家居物联网 UI 界面控制端。 打开 4/01_smarthome/esp8266/esp8266.pro 项目&#xff0c;此项目设备端&#xff08;被控端&#xff09;。 打开上面两个项目如下。 项…
阅读更多...
ToBeWritten之MOST协议、Flex Rat总线、车载以太网

ToBeWritten之MOST协议、Flex Rat总线、车载以太网

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…
阅读更多...
C/C++每日一练(20230402)

C/C++每日一练(20230402)

目录 1. 找最大数和最小数 ※ 2. 数组排序 ※ 3. 按要求完成数据的输入输出 ※ &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 标注 ※ 为入门基础题&#xff0c;今天什么好日子CSDN…
阅读更多...
一个有完整业务连的淘宝API接口

一个有完整业务连的淘宝API接口

支持的业务类型 1、卖家平台&#xff08;包括淘宝网&#xff0c;天猫等&#xff09;&#xff1a;搜索、店铺信息维护、交易订单处理、发货管理、数据查询与统计分析。 2、买家平台&#xff08;包括淘宝&#xff0c;天猫等&#xff09;&#xff1a;搜索&#xff0c;发布信息&a…
阅读更多...
银行数字化转型导师坚鹏：金融科技如何赋能银行数字化转型

银行数字化转型导师坚鹏：金融科技如何赋能银行数字化转型

金融科技如何赋能银行数字化转型课程背景&#xff1a; 数字化背景下&#xff0c;很多银行存在以下问题&#xff1a; 不清楚5G如何赋能银行数字化转型&#xff1f; 不清楚金融科技如何赋能银行数字化转型&#xff1f; 不了解银行数字化转型标杆成功案例&#xff1f; 课程特色…
阅读更多...
旅游市场迎来“开门红”，VR云游带来全新体验

旅游市场迎来“开门红”，VR云游带来全新体验

旅游业是一个充满活力和吸引力的行业&#xff0c;可以促进当地经济发展和提高生活水平。在清明时节&#xff0c;春暖花开&#xff0c;各地旅游市场正在回暖&#xff0c;而各大景区也纷纷推出了优惠措施&#xff0c;吸引大批的游客前来游玩&#xff0c;旅游市场迎来了“开门红”…
阅读更多...
ServletAPI的使用

ServletAPI的使用

目录 一、HttpServlet 1.1 HttpServlet的核心方法 1.2 Servlet的生命周期 1.3 代码示例&#xff1a;通过postman来发送请求 1.4 代码示例&#xff1a;通过ajax来发送请求 二、HttpServletRequest 2.1 代码示例&#xff1a;打印请求信息&#xff1a; 2.2 代码示例&#…
阅读更多...
强化学习——初探强化学习

强化学习——初探强化学习

本文引自&#xff1a;《 动手学强化学习 》 第 1 章 初探强化学习 1.1 简介 亲爱的读者&#xff0c;欢迎来到强化学习的世界。初探强化学习&#xff0c;你是否充满了好奇和期待呢&#xff1f;我们想说&#xff0c;首先感谢你的选择&#xff0c;学习本书不仅能够帮助你理解强…
阅读更多...
COI实验室技能：python控制相机的方法——采集、处理、显示、实时

COI实验室技能：python控制相机的方法——采集、处理、显示、实时

COI实验室技能&#xff1a;python控制相机的方法——采集、处理、显示、实时本文介绍如何利用python控制办公摄像头、工业相机和科研相机。将数据采集和处理统一到python代码中。   主要围绕解决采用什么库、掌握这个库的控制相机方法(参数配置、读取数据等等)、结合自己的算…
阅读更多...
Go 反射

Go 反射

目录 什么是反射 反射的弊端 reflect 包 Go 提供的反射方法 type Type 类型 type Kind 类型 TypeOf ValueOf 什么是反射 ​反射&#xff08;reflection&#xff09;是在 Java 出现后迅速流行起来的一种概念&#xff0c;通过反射可以获取丰富的类型信息&#xff0c;并可…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发