autojs自定义控件色轮

牙叔教程 简单易懂

效果展示

效果.gif

视频效果

https://www.bilibili.com/video/bv1NL4y1z7rB

缘起

你想要比别人的界面更漂亮吗?

你想要做自己专用的色彩工具吗?

想要自己的专属功能, 深度定制,

自定义控件可以满足你的要求,

比被人的更好看, 功能更多,

想学习自定义控件的人, 不可错过本教程.

环境

手机: Mi 11 Pro

Android版本: 11

Autojs版本: 9.0.10

你将学到以下知识点

• 定制自己的色轮
• 控件的触摸监听
• 控件触摸动画
• 多控件联动
• 色块的数量调整
• 滑块的使用
• 定义不可滚动的viewpager
• RecyclerView的使用
• 获取控件的bitmap
• RGB与HSL互相转换
• 设置控件背景的另类方法
• 判断触摸区域是否处于某控件区域内
• 字符串按数量分组
• bitmap转img

思路

1. 界面展现出来的时候, 要显示色轮, 还要显示色卡
2. 色卡的颜色是手指触摸的坐标对应的颜色
3. 获取颜色必须有图片, 也就是色轮控件对应的图片
4. 色轮的颜色, 可以由滑块调整饱和度和亮度来决定
5. 色轮颜色发生变化的时候, 要及时更新色轮对应的bitmap
6. 手指移动后, 获取颜色, 然后同步更新到色卡上
7. 图片更新后, 要及时回收旧图片

代码讲解

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文档, 最后才是群里问问
--- 牙叔教程

声明

部分内容来自网络
本教程仅用于学习, 禁止用于其他用途