autojs

Autojs实现Element Plus风格开关 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
"ui";

function createElSwitch(checked, onChange) {
    var ctx = activity;

    var TRACK_WIDTH = 150;
    var TRACK_HEIGHT = 80;
    var THUMB_DIAM = 76;
    var THUMB_MARGIN = (TRACK_HEIGHT - THUMB_DIAM) / 2;
    var thumbLeftClosed = THUMB_MARGIN;
    var thumbLeftOpened = TRACK_WIDTH - THUMB_MARGIN - THUMB_DIAM;

    var container = new android.widget.FrameLayout(ctx);
    container.setLayoutParams(
        new android.view.ViewGroup.LayoutParams(TRACK_WIDTH, TRACK_HEIGHT)
    );
    container.setClickable(true);

    // ---- 轨道 ----
    var track = new android.view.View(ctx);
    track.setLayoutParams(new android.widget.FrameLayout.LayoutParams(TRACK_WIDTH, TRACK_HEIGHT));
    var trackBg = new android.graphics.drawable.GradientDrawable();
    trackBg.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
    trackBg.setCornerRadius(TRACK_HEIGHT / 2);
    if (checked) {
        trackBg.setColor(android.graphics.Color.parseColor("#409EFF"));
    } else {
        trackBg.setColor(android.graphics.Color.parseColor("#DCDFE6"));
    }
    track.setBackground(trackBg);
    container.addView(track);

    // ---- 滑块 ----
    var thumb = new android.view.View(ctx);
    var thumbParams = new android.widget.FrameLayout.LayoutParams(THUMB_DIAM, THUMB_DIAM);
    thumbParams.gravity = android.view.Gravity.CENTER_VERTICAL;
    if (checked) {
        thumbParams.leftMargin = thumbLeftOpened;
    } else {
        thumbParams.leftMargin = thumbLeftClosed;
    }
    thumb.setLayoutParams(thumbParams);
    var thumbBg = new android.graphics.drawable.GradientDrawable();
    thumbBg.setShape(android.graphics.drawable.GradientDrawable.OVAL);
    thumbBg.setColor(android.graphics.Color.parseColor("#FFFFFF"));
    // 细边框模拟阴影
    thumbBg.setStroke(1, android.graphics.Color.parseColor("#33000000"));
    // 轻微 elevation（Android 5.0+）
    if (android.os.Build.VERSION.SDK_INT >= 21) {
        thumb.setElevation(2);
    }
    thumb.setBackground(thumbBg);
    container.addView(thumb);

    // ---- 状态逻辑 ----
    var isChecked = !!checked;

    function updateSwitch(on) {
        isChecked = !!on;
        var td = track.getBackground();
        if (td instanceof android.graphics.drawable.GradientDrawable) {
            td.setColor(android.graphics.Color.parseColor(isChecked ? "#409EFF" : "#DCDFE6"));
        }
        var lp = thumb.getLayoutParams();
        lp.leftMargin = isChecked ? thumbLeftOpened : thumbLeftClosed;
        thumb.setLayoutParams(lp);
    }

    container.setOnClickListener(function(v) {
        var newState = !isChecked;
        updateSwitch(newState);
        if (onChange) onChange(newState);
    });

    container.isSwitchOn = function() { return isChecked; };
    container.setSwitchOn = function(on) { updateSwitch(on); };

    return container;
}

// ---------- 布局示例 ----------
ui.layout(
    <vertical padding="16" gravity="center">
        <linear gravity="center_vertical">
            <text text="消息通知" textSize="16sp" textColor="#303133" layout_weight="1" />
            <frame id="switchContainer" w="auto" h="auto" />
        </linear>
    </vertical>
);

var mySwitch = createElSwitch(false, function(checked) {
    toast("状态：" + (checked ? "开启" : "关闭"));
});
ui.switchContainer.addView(mySwitch);