Jetpack Compose Semantics-Design — KI-Agenten das UI verstehen lassen

Einführung

Jetpack Compose hat intern einen Mechanismus namens Semantics Tree. Dies ist die "UI-Bedeutungsstruktur", auf die Barrierefreiheit, UI-Tests und automatisierte KI-Operationen verweisen.

Durch eine sorgfältige Gestaltung der Semantics können KI-Agenten UI-Elemente auf dem Bildschirm nicht als "Farbe, Position, Größe" verstehen, sondern als "Was ist diese Schaltfläche, Was passiert wenn ich drücke, Welcher Status liegt vor" verstehen.

Wichtigste Semantics-Attribute

contentDescription

Erforderlich für UI-Elemente, deren Bedeutung nur visuell nicht verständlich ist, wie nur Icon-Schaltflächen.

IconButton(
    onClick = onDelete,
    modifier = Modifier.semantics {
        contentDescription = "削除"
    }
) {
    Icon(Icons.Default.Delete, contentDescription = null)
}

KI und Barrierefreiheit erkennen es als "Schaltfläche zum Löschen (klickbar)".

role

Wenn Sie role auf Custom UI setzen, kann KI den UI-Typ deutlich verstehen.

Modifier.semantics {
    role = Role.Button
}

Mit nur Box(clickable) ist es "etwas Klickbares", aber wenn Sie role hinzufügen, wird es als spezifische Art wie Button / Switch / Checkbox / Tab übermittelt.

stateDescription

Ein Attribut zur Vermittlung des aktuellen Status an die KI.

Modifier.semantics {
    stateDescription =
        if (subscribed) "購読中"
        else "未購読"
}

Nicht nur TalkBack, sondern auch KI-Agenten nutzen es bei statusbasierten Entscheidungen wie "Gerade angehalten, also Wiedergabeschaltfläche drücken".

testTag

Eines der wichtigsten Attribute bei KI-Automatisierung und UI-Tests.

Modifier.testTag("login_button")

Durch die Vergabe eines eindeutigen Identifikators können Elemente stabil von Compose UI Test, Appium, UIAutomator Integration und MCP-basierten Agenten abgerufen werden.

UIAutomator-Integration — erforderliche Einstellungen

Da Compose keine View-Hierarchie direkt generiert, kann testTag möglicherweise nicht von UIAutomator referenziert werden. Dies wird durch Konfiguration des Root gelöst:

Scaffold(
    modifier = Modifier.semantics {
        testTagsAsResourceId = true
    }
)

Dadurch wird testTag von UIAutomator als resource-id referenzierbar.

Praxis: Design, das von KI am leichtesten verstanden wird

Button(
    onClick = login,
    modifier = Modifier
        .testTag("login_button")
        .semantics {
            contentDescription = "ログイン"
            role = Role.Button
        }
) {
    Text("ログイン")
}

Komplexe UI in einer Bedeutung zusammenfassen

UI, die aus mehreren Elementen wie Icon, Text und Badge besteht, kann mit clearAndSetSemantics als eine Bedeutung dargestellt werden.

Modifier.clearAndSetSemantics {
    contentDescription = "商品をカートに追加"
    role = Role.Button
}

KI kann die visuelle Komplexität und Verschachtelungsstruktur ignorieren und nur die logische Bedeutung empfangen.

Effekte des Semantics-Designs

1. Automatisierung wird robuster gegen UI-Änderungen

Die Identifikation durch testTag hängt nicht von Koordinaten, OCR oder Textänderungen ab. Selbst wenn sich die Position oder das Aussehen der Schaltfläche ändert, funktioniert die Automatisierung weiterhin, wenn das Tag gleich ist.

2. MCP ermöglicht Bildschirm-Semantik-Analyse

Durch das Abrufen des Semantics Tree können Bildschirminformationen als leichte strukturierte Daten wie folgt verarbeitet werden:

[
  {"role": "Button", "label": "ログイン", "enabled": true, "tag": "login_button"},
  {"role": "TextField", "label": "メールアドレス"}
]

3. Screenshot-Abhängigkeit reduzieren und Token sparen

Bildanalyse verbraucht viele Token. Mit Semantics Tree können dieselben Informationen als leichte Textdaten an KI übergeben werden. Besonders effektiv in Szenarien, in denen Sie Kontextverbrauch sparen möchten, wie lange Automatisierung und vollständiges Bildschirmscannen.

4. KI versteht den Bildschirm als Zustandsmaschine

Aus den Informationen in stateDescription kann KI den aktuellen Status erkennen und kontextbasierte Entscheidungen wie "Gerade angehalten, also Wiedergabeschaltfläche drücken" treffen.

5. Automatische Testfall-Generierung durch KI

Aus Semantics können Übergangsinformationen wie "Login-Schaltfläche existiert → drücken → Startseite wird angezeigt" abgerufen und für die automatische Testfall-Generierung angewendet werden.

Rolle, die dem Web ARIA entspricht

Das Äquivalent von HTML / ARIA / DOM in der Web-Entwicklung ist der Compose Semantics Tree in Android. KI-Agenten verstehen Apps durch "Bedeutungs-DOM" statt "visueller UI".

Die Stärke von Compose liegt in der Trennung von "Aussehen" und "Bedeutung". Dies ist die Essenz des Semantics-Designs und die Grundlage für die KI-Zusammenarbeit.

Zusammenfassung

Wenn Sie MCP, UIAutomator und KI-Agenten nutzen, ist die standardmäßige Zuweisung von testTag und semantics zu jedem Komponente die Grundlage für stabile Automatisierung.