autojs自定義控件Switch

牙叔教程 簡單易懂

使用場景

自定義控件

效果展現

autojs版本

8.8.20-0

爲何自定義控件

爲了UI界面漂亮

怎樣自定義控件

autojs軟件自帶的示例 / 界面控件 / 自定義控件 , 這是簡單的例子, 能夠看看

商店裏面也有一些自定義控件例子,

好比

自定義控件Switch(這是大柒寫的, 跟我寫的自定義不同),

MagicIndicator(這是沐泠寫的)

Shape3.0

ShimmerButton

自定義控件

等等

自定義控件思路

通常咱們是爲了修改控件的顏色, 形狀, 佈局, 以及運動效果,

對應的修改思路以下:

顏色: 修改控件背景, 前景, 其中使用頻率最高的是view.setBackgroundDrawable

形狀: 使用canvas畫形狀

佈局: CustomView.prototype.render

運動效果: animation

自定義控件難點

主要是距離的計算

必須搞清楚 margin, padding, view.getMeasuredHeight();

getLeft(), getWidth(), getX(), getPaddingLeft(), rect, drawRoundRect

他們之間的關係;

尤爲是涉及到了文字, 文字居中更難,必須瞭解 getFontMetricsInt()

本教程的自定義Switch能夠定義的屬性

文字顏色

文字大小

軌道寬高

軌道顏色

軌道圓角

進度條顏色

小球圓角

小球顏色

小球點擊事件

代碼講解

1. 中止其餘腳本, 主要方便測, 否則腳本運行的多了, 容易報錯

engines.all().map((ScriptEngine) => {
  if (engines.myEngine().toString() !== ScriptEngine.toString()) {
    ScriptEngine.forceStop();
  }
});
複製代碼

2. 導入用到的類

importClass(android.graphics.PaintFlagsDrawFilter);
importClass(android.graphics.Color);
importClass(android.animation.ObjectAnimator);
importClass(android.animation.AnimatorListenerAdapter);
importClass(android.util.TypedValue);
複製代碼

3. UI界面

ui.layout(
  <vertical gravity="center"> <text textSize="30sp" text="牙叔教程" textStyle="bold" w="*" gravity="center"></text> <custom-view id="customView" textColor="#5e35b1" trackColor="#0091ea" progressBarColor="#ffeb3b" ballColor="#ff8a65" w="200dp" h="80dp" textSize="30sp" trackRadius="60" ballRadius="60" ></custom-view> <custom-view ... ></custom-view> <custom-view ... ></custom-view> </vertical>
);
複製代碼

自定義控件主要代碼

1. 全部單位統一轉換爲px

const displayMetrics = context.getResources().getDisplayMetrics();
const all_2Px = (value) => {
  if (value.indexOf("px") >= 0) {
    let result = value.replace("px", "");
    return parseInt(result);
  } else if (value.indexOf("dp") >= 0) {
    let result = parseFloat(value.replace("dp", ""));
    result = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, result, displayMetrics);
    return parseInt(result);
  } else if (value.indexOf("in") >= 0) {
    let result = parseFloat(value.replace("in", ""));
    result = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_IN, result, displayMetrics);
    return parseInt(result);
  } else if (value.indexOf("mm") >= 0) {
    let result = parseFloat(value.replace("mm", ""));
    result = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_MM, result, displayMetrics);
    return parseInt(result);
  } else if (value.indexOf("pt") >= 0) {
    let result = parseFloat(value.replace("pt", ""));
    result = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PT, result, displayMetrics);
    return parseInt(result);
  } else if (value.indexOf("sp") >= 0) {
    let result = parseFloat(value.replace("sp", ""));
    result = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, result, displayMetrics);
    return parseInt(result);
  } else {
    return parseInt(value);
  }
};
複製代碼

2. render

CustomView.prototype.render = function () {
  return (
    <LinearLayout margin="6 6 6 6" padding="2 2 2 2" h="60dp" w="300dp" gravity="center_vertical"> <card id="ball" w="53dp" h="53dp" cardCornerRadius="25dp" cardElevation="3dp"> <View layout_width="match_parent" layout_height="match_parent"></View> </card> </LinearLayout>
  );
};
複製代碼

3. 註冊自定義控件

ui.registerWidget("custom-view", CustomView);
複製代碼

4. 定義各類屬性

this.defineAttr("textColor", (view, attr, value, defineSetter) => {
  textColor = colors.parseColor(value);
});
this.defineAttr("w", (view, attr, value, defineSetter) => {
  view.attr("w", value);
});
this.defineAttr("h", (view, attr, value, defineSetter) => {
  view.attr("h", value);
});
this.defineAttr("trackRadius", (view, attr, value, defineSetter) => {
  trackRadius = all_2Px(value);
});
this.defineAttr("ballRadius", (view, attr, value, defineSetter) => {
  ballRadius = all_2Px(value);
});
this.defineAttr("textSize", (view, attr, value, defineSetter) => {
  textSize = all_2Px(value);
});
this.defineAttr("trackColor", (view, attr, value, defineSetter) => {
  trackColor = colors.parseColor(value);
});
this.defineAttr("progressBarColor", (view, attr, value, defineSetter) => {
  progressBarColor = colors.parseColor(value);
});
this.defineAttr("ballColor", (view, attr, value, defineSetter) => {
  ballColor = colors.parseColor(value);
  view.getChildAt(0).getChildAt(0).setBackgroundColor(ballColor);
});
​``` 複製代碼

5. 定義點擊事件對應的動畫

view.ball.on("click", () => {
  log("click");
  moveBall(view.ball);
  view.widget.clickAction();
});
複製代碼

6. 定義動畫監聽

animator.addUpdateListener(
  new android.animation.ValueAnimator.AnimatorUpdateListener({
    onAnimationUpdate: function (valueAnimator) {
      drawProgressBar(ballView.getParent(), valueAnimator, ball);
    },
  })
);
複製代碼

聲明

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