Tooth uncle tutorial is easy to understand

Results show

Video effect demonstration

www.bilibili.com/video/BV1NL…

origin

Do you want to have a prettier interface than everyone else?

Do you want to make your own color tool?

They want their own features, deep customization,

Custom controls can meet your requirements,

Better looking, more functional than anyone else,

Those who want to learn about custom controls should not miss this tutorial.

The environment

Phone: Mi 11 Pro

Android version: 11

Autojs version: 9.0.10

Here’s what you’ll learn

  • Customize your own color wheel
  • Control’s touch listener
  • Control touch animation
  • Multi-control linkage
  • Adjust the number of color blocks
  • Use of slider
  • Define a viewpager that is not scrollable
  • The use of RecyclerView
  • Gets the bitmap of the control
  • RGB and HSL convert to each other
  • Alternative method of setting control background
  • Determines whether the touch region is within a control region
  • Strings are grouped by number
  • Turn bitmap img

Train of thought

  1. When the interface is displayed, the color wheel should be displayed, and the color card should be displayed
  2. The color of the color card is the color corresponding to the coordinates touched by your finger
  3. To get a color, you must have a picture, which corresponds to the color wheel control
  4. The color of the color wheel can be determined by adjusting the saturation and brightness of the slider
  5. When the color wheel changes, update the bitmap corresponding to the color wheel in time
  6. After the finger moves, get the color, and then synchronously update to the color card
  7. Recycle old pictures after update

The code on

1. UI interface
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">Tooth tertiary tutorial</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">Tooth tertiary tutorial</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>Saturation:</text>
          <text id="saturationValue2"></text>
          <seekbar id="saturationSeekbar2" max="100" progress="100" w="*" margin="9"></seekbar>
        </horizontal>.</vertical>
    </vertical>
  </non-swipeable-view-pager>
);
Copy the code
2. Set the ViewPager display page
ui.viewpager.setCurrentItem(pagerNum);
Copy the code
3. Update the color card after the interface is displayed
ui.post(function () {
  let colorCount = ui.customView2.widget.getColorCount();
  colorValueList = ui.customView2.widget.getColorValueList();
  changeColorShowViews(colorCount, colorValueList);
}, 30);
Copy the code
4. Slider to modify saturation
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(); }}));Copy the code
5. Adjust brightness by slider
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(); }}));Copy the code
6. Slider to modify the number of colors
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); }); }}));Copy the code
7. Adapter of color blocks
function createBoxAdapter(boxList) {
  return RecyclerView.Adapter({
    onCreateViewHolder: function (parent, viewType) {
      // View creation
      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) {
      // Data binding
      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 () {
      returnboxList.length; }}); }Copy the code
8. Color block 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>
);
Copy the code

Quotes.

Ideas are the most important, other Baidu, Bing, StackOverflow, Github, Android docs, AutoJS docs, and last but not least, ask in the group

The statement

This tutorial is intended for learning purposes only and is not intended for any other use