是时候放弃shape、selector XML写法,一行代码解决基本UI需求

简介: 是时候放弃shape、selector XML写法,一行代码解决基本UI需求

我们在写项目的时候,总是会写很多的shape.xml文件、selector.xml文件,虽然不难,但是有时候还是挺烦的,有很多很多的xml文件,增大apk不说,主要是写起来还是挺烦的(个人觉得)。所以写了个代码方式去实现。

1.shape

先上张图,看一下效果

image.png

1.1 矩形

rectFill.rect(getResColor(R.color.fillColor))复制代码

1.2 带边框的矩形

rectFillAndStroke.rect(getResColor(R.color.fillColor), dpToPx(3f),getResColor(R.color.strokeColor))复制代码

1.3 圆角矩形

roundRectWithStroke.roundRect(getResColor(R.color.fillColor),cornerRadius = dpToPx2(10f),    strokeWidth = dpToPx(3f),strokeColor = getResColor(R.color.strokeColor))复制代码

1.4 圆角矩形(四个角不同)

roundRect5.roundRect(getResColor(R.color.fillColor),dpToPx(3f),getResColor(R.color.strokeColor),
leftTopCornerRadiusX = dpToPx2(10f),leftTopCornerRadiusY = dpToPx2(5f),
rightTopCornerRadiusX = dpToPx2(5f),rightTopCornerRadiusY = dpToPx2(10f),
leftBottomCornerRadiusX = dpToPx2(10f),leftBottomCornerRadiusY = dpToPx2(20f),
rightBottomCornerRadiusX = dpToPx2(8f),rightBottomCornerRadiusY = dpToPx2(14f))复制代码

1.5 椭圆

ovelRect1.ovel(getResColor(R.color.fillColor),
cornerRadiusX = dpToPx2(50f), cornerRadiusY = dpToPx2(30f),
strokeWidth = dpToPx(3f),strokeColor = getResColor(R.color.strokeColor))复制代码

1.6 渐变

val gradientColors = intArrayOf(Color.YELLOW,Color.BLUE,Color.GREEN)
gradient.gradient(gradientColors)
gradient1.gradient(gradientColors,GradientDrawable.Orientation.LEFT_RIGHT)
gradient2.gradient(gradientColors,GradientDrawable.Orientation.BL_TR)复制代码

2.selector

selector一般都是一些状态类的ui变化,常见的就是点击,选中

先上张图,看一下效果

image.png

2.1 点击状态

背景

val pressedDrawable = buildDrawable(Color.parseColor("#8B9EB3"), dpToPx2(5f))
val normalDrawable = buildDrawable(Color.parseColor("#4498F2"), dpToPx2(5f))
btnPressed.pressed(normalDrawable,pressedDrawable)复制代码

文字颜色

btnPressed.pressedTextColor(Color.WHITE,Color.GRAY)复制代码

2.2 enable状态

背景

val normalDrawable = buildDrawable(Color.parseColor("#4498F2"), dpToPx2(5f))
val unenableDrawable = buildDrawable(Color.parseColor("#A8A9AC"), dpToPx2(10f))
btnUnenable.enable(normalDrawable,unenableDrawable,false)复制代码

文字颜色

btnUnenable.enabledTextColor(Color.WHITE,Color.GRAY,false)复制代码

2.3 多状态叠加

背景

val pressedDrawable = buildDrawable(Color.parseColor("#8B9EB3"), dpToPx2(5f))
val normalDrawable = buildDrawable(Color.parseColor("#4498F2"), dpToPx2(5f))
val unenableDrawable = buildDrawable(Color.parseColor("#A8A9AC"), dpToPx2(10f))
val sd = buildStateListDrawable()
          .pressed(pressedDrawable)
          .enable(unenableDrawable,false)
          .normal(normalDrawable)
btnMuilti.setStateDrawable(sd)复制代码

文字颜色

val colorState = ColorStateBuilder()
                    .enableTextColor(Color.GRAY,false)
                    .pressedTextColor(Color.LTGRAY)
                    .normalTextColor(Color.WHITE)
                    .build()
btnMuilti.setTextColor(colorState)复制代码

2.4 imageview图标状态

点击变换不同图标

iv_back.pressed(R.drawable.back,R.drawable.back_pressed)复制代码

enable不同图标

iv_back.enable(R.drawable.back,R.drawable.back_pressed,false)复制代码

2.5 radiobutton、checkbox图标状态

radiobutton

radioButton.checkedTextColor(Color.parseColor("#bfbfbf"),Color.parseColor("#1296db"))
radioButton.leftCheckedCompoundDrawable(R.drawable.ic_radio_normal,R.drawable.ic_radiobutton_checked)复制代码

checkbox

checkBox2.checkedTextColor(Color.parseColor("#bfbfbf"),Color.parseColor("#1296db"))
checkBox2.leftCheckedCompoundDrawable(R.drawable.checkbox_unchecked,R.drawable.checkbox_checked)复制代码

3.总结

代码本身没什么技术难度,我也就不瞎逼逼什么原理了,主要就是封装一下使用而已,简化工作流程。唯一要注意的是使用前要先注入application,ApplactionInject.inject(this)  其实也就是获得一个全局的Context,大家都懂,省得很多方法都要加Context参数 。

总体使用还是很方便的,基本上一行代码就能搞定基本的UI需求,在也不需要像以前一样需要写烦人的xml了,大大减少xml的文件数量

相关文章
|
7月前
|
存储 测试技术 UED
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
170 1
|
4月前
|
XML Java 数据格式
Spring5入门到实战------11、使用XML方式实现AOP切面编程。具体代码+讲解
这篇文章是Spring5框架的AOP切面编程教程,通过XML配置方式,详细讲解了如何创建被增强类和增强类,如何在Spring配置文件中定义切入点和切面,以及如何将增强逻辑应用到具体方法上。文章通过具体的代码示例和测试结果,展示了使用XML配置实现AOP的过程,并强调了虽然注解开发更为便捷,但掌握XML配置也是非常重要的。
Spring5入门到实战------11、使用XML方式实现AOP切面编程。具体代码+讲解
|
4月前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
56 0
|
6月前
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
93 6
|
7月前
|
XML Java 数据格式
idea注释顶格不美观的问题--代码与XML
idea注释顶格不美观的问题--代码与XML
54 6
|
7月前
|
监控 Linux Windows
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
78 1
|
存储 前端开发 C语言
代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!
代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!
160 0
|
7月前
|
存储 传感器 监控
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
255 0
|
7月前
|
XML Java 数据格式
spring通过文件属性注入bean和基于xml的bean的自动装配以及spring-eel表达式的使用加代码合集
spring通过文件属性注入bean和基于xml的bean的自动装配以及spring-eel表达式的使用加代码合集
94 0
|
前端开发
前端项目实战肆拾贰-​react-admin+material ui-提高效率-直接单大屏操作-右代码左边演示
前端项目实战肆拾贰-​react-admin+material ui-提高效率-直接单大屏操作-右代码左边演示
55 0