The autojs floating window simulates the toast bubble, and it is placed at the bottom of the screen and centered

Uncle Tooth Tutorial is simple and easy to understand

Effect

This blue bubble is actually a floating window, its position is at the bottom of the screen;

This is Xiaomi MIUI, there are three diamonds at the bottom (recent, desktop, return), and the position of the floating window is on the upper layer of the three diamonds

Why not just use toast?

Because toast can be displayed on the autojs interface, it cannot be displayed on the non-autojs interface, at least my mobile phone is like this;

The floating window can basically be displayed on any interface, so use the floating window to simulate the toast

Target

The toast simulated by the floating window is placed at the bottom of the screen and centered

interface

Since it is a simulated toast, the interface should also be similar to toast, so our calling method is probably like this

let floatyToast = require("./floatyToast.js");
floatyToast.toast("牙叔教程");

Floating window action division

• Initialize the floating window
• Show floating window
• hide floating window
• Timing (because toast defaults to 2 seconds)
• Modify text

Initialize the floating window

There are two main steps here

• Adjust the bubble style
• transparency

Adjust the bubble style

Basic styles: font size, font color, padding

let w = floaty.rawWindow(<text textSize="30sp" w="wrap_content" h="wrap_content" textColor="#ffffff" padding="6"></text>);

Rounded corner style, rounded rectangle bubble

setBackgroundRoundRounded(w.content, colors.parseColor("#3f51b5"));
function setBackgroundRoundRounded(view, color) {
    let gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.RECTANGLE);
    gradientDrawable.setColor(color);
    gradientDrawable.setCornerRadius(60);
    view.setBackgroundDrawable(gradientDrawable);
}

transparency

In the beginning, the user definitely did not call the bubble, so he should not be seen by the user,

We add transparency, so users can't see it

let w = floaty.rawWindow(<text alpha="0"></text>);

\

Show floating window

First of all, the bubble needs to display the text, the first step is to modify the text content

w.content.setText(msg);

After modifying the text content, the width and height of the floating window will change, because the width and height depend on the text content.

let w = floaty.rawWindow(<text w="wrap_content" h="wrap_content" ></text>);

\

Since it will be centered for a while, we have to calculate the coordinates of the upper left corner of the floating window,

This needs to consider the width and height of the device and the width and height of the floating window

let ww = w.getWidth();
let wh = w.getHeight();
let dw = device.width;
let dh = device.height;
// 悬浮窗置于底部中央
let x = (dw - ww) / 2;
let y = dh - wh;
w.setPosition(x, y);

After modifying the text, the width and height of the floating window will not necessarily change immediately. If you want to be safe, you can delay 200ms to obtain the width and height of the floating window.

ui.post(function () {
    ...
}, 200);

Finally, we need to change the transparency to 1, and the floating window can see it

w.content.attr("alpha", 1);

hide floating window

There are two ways to hide the floating window,

• move off screen
• Modify transparency

Both can be used, we can choose one, such as moving outside the screen

w.setPosition(-66666, -66666);

\

Timing (because toast defaults to 2 seconds)

Timing, this action should start timing as soon as the bubble is displayed,

At the same time, considering that the text on the bubbles may change frequently, for example, the text changes every 200ms.

After the text changes, we should retime

const SHOW_DURATION = 2000;
let floatyToastTimer = null;
function floatyToast(msg) {
    if (floatyToastTimer) {
        clearTimeout(floatyToastTimer);
    }
    ui.run(function () {
        w.content.setText(msg);
    });
    floatyToastTimer = setTimeout(() => {
        hide();
    }, SHOW_DURATION);
}

\

Modify text

w.content.setText("牙叔教程");

surroundings

Phone: Xiaomi 11pro
MIUI: 13.0.12
Android version: 12
Autojs version: 9.1.22

famous quotes

思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问 --- 牙叔教程\

声明

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

微信公众号 牙叔教程