牙叔教程 简单易懂
效果展示
缘起
你想要比别人的界面更漂亮吗?
你想要做自己专用的色彩工具吗?
想要自己的专属功能, 深度定制,
自定义控件可以满足你的要求,
比被人的更好看, 功能更多,
想学习自定义控件的人, 不可错过本教程.
环境
手机: 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.RecyclerView id="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> <text id="colorValue" layout_height="wrap_content" layout_width="wrap_content" text="#000000" textSize="16sp" textColor="#ffffff" padding="3" ></text> </frame> </card> );
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
