autojs自定义控件色轮
2024-05-14 02:26:10
牙叔教程 简单易懂
效果展示
视频效果
缘起
你想要比别人的界面更漂亮吗?
你想要做自己专用的色彩工具吗?
想要自己的专属功能, 深度定制,
自定义控件可以满足你的要求,
比被人的更好看, 功能更多,
想学习自定义控件的人, 不可错过本教程.
环境
手机: Mi 11 Pro
Android版本: 11
Autojs版本: 9.0.10
你将学到以下知识点
- 定制自己的色轮
- 控件的触摸监听
- 控件触摸动画
- 多控件联动
- 色块的数量调整
- 滑块的使用
- 定义不可滚动的viewpager
- RecyclerView的使用
- 获取控件的bitmap
- RGB与HSL互相转换
- 设置控件背景的另类方法
- 判断触摸区域是否处于某控件区域内
- 字符串按数量分组
- bitmap转img
思路
- 界面展现出来的时候, 要显示色轮, 还要显示色卡
- 色卡的颜色是手指触摸的坐标对应的颜色
- 获取颜色必须有图片, 也就是色轮控件对应的图片
- 色轮的颜色, 可以由滑块调整饱和度和亮度来决定
- 色轮颜色发生变化的时候, 要及时更新色轮对应的bitmap
- 手指移动后, 获取颜色, 然后同步更新到色卡上
- 图片更新后, 要及时回收旧图片
代码讲解
1. ui界面
ui.layout(<non-swipeable-view-pager id="viewpager"><vertical gravity="center"><text id="title2" textSize="33sp" marginBottom="6" textColor="#fbfbfe" bg="#00afff" w="*" gravity="center">牙叔教程</text><color-wheel id="customView"></color-wheel><frame w="100dp" h="100dp"><View id="colorShow" w="100dp" h="100dp" bg="#000000"></View><text id="colorValue" textSize="16sp" textColor="#ffffff" w="*" gravity="center" padding="3"></text></frame>...</vertical><vertical><vertical gravity="center"><text textSize="33sp" marginBottom="6" textColor="#fbfbfe" bg="#00afff" w="*" gravity="center">牙叔教程</text><color-wheel id="customView2" colorCount="6"></color-wheel><androidx.recyclerview.widget.RecyclerViewid="recyclerView"w="300dp"h="350dp"></androidx.recyclerview.widget.RecyclerView><horizontal w="*" margin="9"><text>饱和度: </text><text id="saturationValue2"></text><seekbar id="saturationSeekbar2" max="100" progress="100" w="*" margin="9"></seekbar></horizontal>...</vertical></vertical></non-swipeable-view-pager>
);
2. 设置viewpager展示页面
ui.viewpager.setCurrentItem(pagerNum);
3. 界面显示后, 更新色卡
ui.post(function () {let colorCount = ui.customView2.widget.getColorCount();colorValueList = ui.customView2.widget.getColorValueList();changeColorShowViews(colorCount, colorValueList);
}, 30);
4. 滑块修改饱和度
ui.saturationSeekbar2.setOnSeekBarChangeListener(new android.widget.SeekBar.OnSeekBarChangeListener({onProgressChanged: function (seekbar, i, b) {let value = +(ui.saturationSeekbar2.getProgress() / 100).toFixed(2);ui.saturationValue2.setText(String(value));ui.customView2.widget.setSaturation(value);ui.customView2.widget.updateBitmap();colorAction2();},})
);
5. 滑块修改亮度
ui.lightnessSeekbar2.setOnSeekBarChangeListener(new android.widget.SeekBar.OnSeekBarChangeListener({onProgressChanged: function (seekbar, i, b) {let value = +(ui.lightnessSeekbar2.getProgress() / 100).toFixed(2);ui.lightnessValue2.setText(String(value));ui.customView2.widget.setLightness(value);ui.customView2.widget.updateBitmap();colorAction2();},})
);
6. 滑块修改颜色数量
ui.colorCountSeekbar.setOnSeekBarChangeListener(new android.widget.SeekBar.OnSeekBarChangeListener({onStopTrackingTouch: function (seekbar) {let value = +(ui.colorCountSeekbar.getProgress() / 10).toFixed(0);ui.colorCountValue.setText(String(value));ui.customView2.widget.setColorCount(value);ui.post(function () {colorValueList = ui.customView2.widget.getColorValueList();changeColorShowViews(value, colorValueList);});},})
);
7. 色块的adapter
function createBoxAdapter(boxList) {return RecyclerView.Adapter({onCreateViewHolder: function (parent, viewType) {// 视图创建let view;let holder;view = ui.inflate(boxXml, parent, false);holder = JavaAdapter(RecyclerView.ViewHolder, {}, view);view.bgColor.click(function () {toastLog(view.colorValue.getText().toString().replace(/\n/g, ""));});return holder;},onBindViewHolder: function (holder, position) {// 数据绑定let value = boxList[position];holder.itemView.bgColor.setBackgroundColor(value);value = colors.toString(value);value = group(value.slice(1), 2).join("\n");holder.itemView.colorValue.setText("#\n" + value);},getItemCount: function () {return boxList.length;},});
}
8. 色块的xml
let boxXml = (<card cardCornerRadius="6dp" margin="3"><frame layout_width="wrap_content" layout_height="wrap_content" gravity="center"><View id="bgColor" w="60dp" bg="#000000"></View><textid="colorValue"layout_height="wrap_content"layout_width="wrap_content"text="#000000"textSize="16sp"textColor="#ffffff"padding="3"></text></frame></card>
);
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
— 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
bilibili
牙叔教程
微信公众号 牙叔教程
QQ群
747748653
源码
autojs自定义控件色轮相关推荐
- 【Swift】自定义控件无限轮播 + 无限图片轮播
CocoaPods安装 pod 'PGBannerSwift' 复制代码 使用 1.无限图片轮播 首先引入import PGBannerSwift let banner = PGBanner(fram ...
- cleanmymac3.9.6 for mac_色轮插件配色神器Coolorus 2.6（win+mac）
Coolorus 2.6(win+mac版)下载地址: https://pan.baidu.com/s/1UJJr6KMCtpvyOsu1yKdXNA 密码:anyj Coolorus使用教程 下载地 ...
- 《超越平凡的平面设计: 版式设计原理与应用》—色轮
本节书摘来自异步社区<超越平凡的平面设计: 版式设计原理与应用>一书中的色轮,作者[美]John McWade,更多章节内容可以访问云栖社区"异步社区"公众号查看. 色 ...
- ps插件Coolorus for mac(photoshop色轮插件)
coolorus是一款非常好用的Photoshop色轮插件,这款插件可以给你的ps软件增加一个色环配色面板,选择颜色更加方便.coolorus插件可以帮你轻松的获取所选区域的RGB值,可以添加到ps中 ...
- Adobe Premiere-调色之[创意面板,色轮和匹配,多个Lumetri](三)
创意面板 创意面板的预设可以运用的任何视频上,比如VLOG.特效短片都可以使用预设来完成调色. 注意事项: 使用创意面板预设前, 首先要在基本校正面板里进行一级调色保证原始画面没有问题.不然预设效果会 ...
- DaVinci：色轮
调色页面:色轮 Color:Color Wheels 色轮 Color Wheels调板又称"一级调板" Primaries Palette,用来进行最传统最基础的整体色彩校正,包 ...
- IOS 仿Android色轮代码
IOS 仿Android色轮代码 在android中做色轮相对比较容易,因为Android中有一个角度渐变着色器函数SweepGradient能够很轻松的完成圆环的环形着色绘制工作,在利用Paint的 ...
- 自己动手整色轮，不花钱修Acer投影机
故障描述 投影机是Acer X1220H,连接电源之后按下开机键,随后听到三声"吱--"的声音,该声音很像某个转动部件的转轴摩擦声音.经过三声之后,投影机不亮,LAMP/TEMP灯 ...
- Color Wheel for Mac(色轮工具)
想快速匹配最佳的颜色组合,试试这款色轮工具Color Wheel Mac版吧!Color Wheel mac激活版是一款适用于 macOS 的强大的数字色轮工具.通过 Color Wheel 可以帮助 ...
最新文章
- 数据库设计原则【转】
- 编程之美2.2 不要被阶乘吓倒
- c语言程序设计橙皮,橙皮_中药词典C_中医中药网
- 这些优化 Drupal 网站速度的超简单办法，你忽略了多少？
- wgan 不理解 损失函数_[图像盲去噪与GAN]GCBD翻译理解
- scala 协变和逆变_Scala方差：协变，不变和逆变
- 记nuc8的开箱以及安装hackintosh
- 我的-Android-面试故事---13家面试记录，附面试答案，android星座查询源码
- 数据挖掘——基于R文本情感分析（2）
- ossec支持mysql数据库_开源入侵检测工具ossec安装配置(HIDS)
- Cell Biolabs丨艾美捷丨羟脯氨酸检测试剂盒
- 2月编程语言排行榜谁还没有看？
- 观美剧《傲骨之战》，了解诉讼融资行业现状
- iOS crash报告问题
- Phonics 自然拼读法 ai, oa,ie, ee,or,j Teacher:Lamb
- mac重启后，桌面壁纸失效的问题
- Android自学之路，DrawerLayout must be measured with MeasureSpec.EXACTLY.错误
- 在领悟到什么道理后，你的人生从此轻松了起来？
- 数学分析教程（科大）——2.3笔记+习题
- 《微机原理与接口技术（第三版）》的专有名词缩写你还在死记硬背？？？【更新至第二章 ARM微处理器