UI - Getting Started

老猫10/27/23About 2 min

The ui module lets you build Android user interfaces in Auto.js Pro v9. In v9, UI scripts run on the Node.js engine and use the Activity class to create and manage screens.

For Android developers: Auto.js UI is built on top of Android Views. If something is not documented here, you can often find details in Android docs.

Enable the Node.js engine

Scripts that use the UI module must start with "nodejs"; (or "ui nodejs"; if you want the UI flavor + Node.js):

"nodejs";

// ... your code ...

"ui nodejs";

// ... your code ...

Basic concepts

Widget / View: A UI element such as text, button, image, input box, progress bar, checkbox, etc.
Layout: A container that arranges its children (for example vertical stacks children top-to-bottom; horizontal lays them out left-to-right).

Create a screen with `Activity`

In v9 you typically import from ui/activity, then:

Create a class that extends Activity
Provide an XML layout via the layoutXml getter (or build a JSON view tree via setContentView())
Call setMainActivity() to set the entry screen

Minimal example

"nodejs";
const { Activity, setMainActivity } = require("ui/activity");

class MainActivity extends Activity {
  get layoutXml() {
    return `
      <vertical>
        <button text="First button"/>
        <button text="Second button"/>
      </vertical>
    `;
  }
}

setMainActivity(MainActivity);

Horizontal layout example

"nodejs";
const { Activity, setMainActivity } = require("ui/activity");

class MainActivity extends Activity {
  get layoutXml() {
    return `
      <horizontal>
        <button text="First button"/>
        <button text="Second button"/>
      </horizontal>
    `;
  }
}

setMainActivity(MainActivity);

Both widgets and layouts can have attributes:

"nodejs";
const { Activity, setMainActivity } = require("ui/activity");

class MainActivity extends Activity {
  get layoutXml() {
    return `
      <vertical bg="#ff0000">
        <button text="First button" textSize="20sp"/>
        <button text="Second button"/>
      </vertical>
    `;
  }
}

setMainActivity(MainActivity);

Build UI with `setContentView()`

Instead of returning XML, you can build the view tree in onCreate():

"nodejs";
const { Activity, setMainActivity, MATCH_PARENT, WRAP_CONTENT } = require("ui");

class MainActivity extends Activity {
  onCreate() {
    super.onCreate();

    this.setContentView({
      type: "vertical",
      bg: "#ffffff",
      children: [
        {
          type: "text",
          text: "Hello Auto.js Pro",
          textSize: "20sp",
          width: MATCH_PARENT,
          height: WRAP_CONTENT,
        },
        {
          type: "button",
          text: "Click me",
          width: WRAP_CONTENT,
          height: WRAP_CONTENT,
        },
      ],
    });
  }
}

setMainActivity(MainActivity);

Start another `Activity`

Use startActivity() to navigate to another screen:

"nodejs";
const { Activity, setMainActivity, startActivity } = require("ui/activity");

class MainActivity extends Activity {
  get layoutXml() {
    return `
      <vertical>
        <button id="btnStart" text="Open second screen"/>
      </vertical>
    `;
  }

  onCreate() {
    super.onCreate();

    // Access a view by id
    const btnStart = this.contentView.findViewById("btnStart");
    btnStart.on("click", () => {
      startActivity(SecondActivity);
    });
  }
}

class SecondActivity extends Activity {
  get layoutXml() {
    return `
      <vertical>
        <text text="This is the second screen"/>
        <button text="Back" id="btnBack"/>
      </vertical>
    `;
  }

  onCreate() {
    super.onCreate();

    const btnBack = this.contentView.findViewById("btnBack");
    btnBack.on("click", () => {
      this.finish(); // Close current Activity
    });
  }
}

setMainActivity(MainActivity);

Terminology

Child view / widget: A widget inside a layout.
Parent view / parent layout: The layout that directly contains a widget.

Differences from v8 UI

Import style: v9 uses modules such as require("ui/activity") instead of v8 global ui.
How to render: v9 uses Activity + layoutXml / setContentView() instead of v8 "ui"; + ui.layout().
Engine: v9 UI requires "nodejs"; at the top of the script.