autojs優秀UI-自定義控件

牙叔教程簡單易懂javascript

教程目的

本篇教程是一個自定義控件的教學演示, 無任何實際功能, 更沒有提現功能, 那只是一個自定義按鈕java

主要演示自動義控件和動畫, 除此以外沒有其餘任何功能 android

再次強調, 本腳本只是UI演示, 無任何其餘功能 canvas

效果展現

視頻演示

autojs自定義控件例子markdown

autojs版本

9.0.4網絡

你將學到如下知識點

toast點九圖的使用
設置toast的顯示位置
toast設置透明圓角背景
裁剪canvas
自定義控件checkbox
自定義控件switch
相對佈局
清空控件背景
重寫下拉框adapter
通知欄沉浸式
設置圓角背景
設置漸變色背景
手指移動懸浮窗
懸浮窗自動吸附邊緣
懸浮窗設置圓環背景
圖片設置爲圓形
縮放控件
屬性動畫
測量控件尺寸
popWindow的彈出
彈窗時背景漸明漸暗
自定義進度條

腳本概況

腳本有UI, 懸浮窗, 以及popWindow
UI中的重點是自定義控件switch和checkbox, 重點是canvas裁剪
UI是幀佈局+相對佈局+縱向佈局
懸浮窗會自動吸附屏幕邊緣, 增長toast提示, 背景是點九圖
popWindow是更新提示用的, 有個自定義的進圖條動畫

代碼講解

1. 導入類

importClass(android.view.View);
importClass(android.graphics.Color);
importClass(android.graphics.drawable.GradientDrawable);
importClass(android.text.Spannable);
importClass(android.text.SpannableStringBuilder);
importClass(android.text.style.ForegroundColorSpan);
importClass(android.graphics.LinearGradient);
importClass(android.graphics.Shader);
importClass(android.graphics.Bitmap);
importClass("android.graphics.BitmapFactory");
importClass(android.graphics.BitmapShader);
importClass(android.view.WindowManager);
importClass(android.widget.ArrayAdapter);
importClass(android.widget.AdapterView);
importClass(android.net.Uri);
importClass(java.util.ArrayList);
importClass(android.graphics.PaintFlagsDrawFilter);
importClass(android.graphics.Color);
importClass(android.animation.ObjectAnimator);
importClass(android.animation.AnimatorListenerAdapter);
importClass(android.util.TypedValue);
複製代碼

2. 重寫下拉框adapter

function getSpinnerAdapter(dataList) {
  let adapter = JavaAdapter(android.widget.SpinnerAdapter, {
    getCount: function () {
      return dataList.length;
    },
    getItem: function (position) {
      return dataList[position];
    },
    getItemId: function (position) {
      return position;
    },
    getViewTypeCount: function () {
      return 1;
    },
    getItemViewType: function (pos) {
      return 0;
    },
    getDropDownView: function (position, convertView, parent) {
      log("getDropDownView");
      if (!convertView) {
        let boxXml = (
          <frame> <TextView id="_text" gravity="center" textColor="#000000" textSize="20sp" /> </frame>
        );
        convertView = ui.inflate(boxXml);
      }
      let item = dataList[position];
      convertView.getChildAt(0).setText(item);
      return convertView;
    },
    getView: function (position, convertView, parent) {
      log("getView");
      if (!convertView) {
        let boxXml = (
          <horizontal> <text id="name" paddingLeft="3" android:layout_width="wrap_content" android:layout_height="match_parent" textColor="#ffffff" gravity="center" textSize="10sp" ></text> <img tint="#ffffff" padding="-18 0 0 0" android:layout_width="30dp" android:layout_height="match_parent" android:layout_gravity="center_vertical" src="@drawable/ic_arrow_drop_down_black_48dp" ></img> </horizontal>
        );
        convertView = ui.inflate(boxXml);
      }
      let item = dataList[position];
      convertView.name.setText(item);
      return convertView;
    },
  });
  return adapter;
}
複製代碼

3. 手指移動懸浮窗

function setOnTouchListener(floatyWindow, childView, clickAction) {
  childView.setOnTouchListener(function (view, event) {
    switch (event.getAction()) {
      case event.ACTION_DOWN:
        log("ACTION_DOWN");
        x = event.getRawX();
        y = event.getRawY();
        windowX = floatyWindow.getX();
        windowY = floatyWindow.getY();
        downTime = new Date().getTime();
        return true;
      case event.ACTION_MOVE:
        log("ACTION_MOVE");
        //移動手指時調整懸浮窗位置
        floatyWindow.setPosition(windowX + (event.getRawX() - x), windowY + (event.getRawY() - y));
        
        return true;
      case event.ACTION_UP:
        log("ACTION_UP");
        log("按下時長: " + (new Date().getTime() - downTime));
        //若是判斷爲長按，退出腳本
        if (new Date().getTime() - downTime > 3000 && event.getRawX() - x < 5 && event.getRawY() - y < 5) {
          exit();
        } else {
          //手指彈起時若是偏移很小則判斷爲點擊
          if (Math.abs(event.getRawY() - y) < 5 && Math.abs(event.getRawX() - x) < 5) {
            clickAction();
          }
        }
        return true;
    }
    return true;
  });
}
複製代碼

4. 獲取控件屬性

function getViewAttr(ballView) {
  let parentView = ballView.getParent();
  let parentViewWidth = parentView.getWidth();
  let parentViewHeight = parentView.getHeight();
  let parentViewLeft = parentView.getLeft();
  let parentViewRight = parentView.getRight();
  let parentViewX = parentView.getX();
  let parentViewY = parentView.getY();
  let parentViewPaddingLeft = parentView.getPaddingLeft();
  let parentViewPaddingRight = parentView.getPaddingRight();

  let ballViewWidth = ballView.getWidth();
  let ballViewHeight = ballView.getHeight();
  let ballViewLeft = ballView.getLeft();
  let ballViewRight = ballView.getRight();
  let ballViewX = ballView.getX();
  let ballViewY = ballView.getY();

  let ball = {
    parentViewWidth: parentViewWidth,
    parentViewHeight: parentViewHeight,
    parentViewLeft: parentViewLeft,
    parentViewRight: parentViewRight,
    parentViewX: parentViewX,
    parentViewY: parentViewY,
    parentViewPaddingRight: parentViewPaddingRight,
    parentViewPaddingLeft: parentViewPaddingLeft,
    ballViewWidth: ballViewWidth,
    ballViewHeight: ballViewHeight,
    ballViewLeft: ballViewLeft,
    ballViewRight: ballViewRight,
    ballViewX: ballViewX,
    ballViewY: ballViewY,
  };
  return ball;
}
複製代碼

5. 設置圓角背景

function setBackgroundRoundedRectangle(view) {
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setStroke(5, colors.parseColor(增量更新按鈕顏色));
  gradientDrawable.setCornerRadius(10);
  gradientDrawable.setSize(50, 50);
  view.setBackground(gradientDrawable);
}
複製代碼

6. 設置PopWindow監聽事件

mPopWindow.setOnDismissListener(
  new PopupWindow.OnDismissListener({
    onDismiss: function () {
      backgroundAlpha(1);
    },
  })
);
複製代碼

聲明

部份內容來自網絡本教程僅用於學習, 禁止用於其餘用途ide