KlugLayout

Überblick

Manche Apps sind nur für das Querformat entworfen, zum Beispiel eine Kamerastation auf einem Tablet. Nutzer erwarten trotzdem, dass das Bild richtig herum steht, egal wie sie das Gerät hinlegen: mit den Tasten links oder rechts.

KlugLayout stellt die Android-Bildschirmausrichtung auf Querformat auf beiden Seiten. Die App bleibt im Querformat, dreht sich aber um 180 Grad mit dem Gerät. Außerdem meldet es die aktuelle Display-Rotation, damit eine App ihre eigenen Inhalte, etwa ein Kamerabild, an die Haltung des Geräts anpassen kann.

Faltbare Geräte ändern den Bildschirm, während die App läuft. Ein Galaxy Z Fold oder Pixel Fold ist aufgeklappt ein Tablet und zugeklappt ein Smartphone; ein Galaxy Z Flip wechselt von seinem hohen Hauptdisplay auf ein kleines, fast quadratisches Außendisplay. Wenn das Gerät die App auf das andere Display verschiebt, erhält die AIR-Stage nicht immer ein Resize-Ereignis, und die Startwerte für Bildschirmgröße und Kameraaussparung bleiben die des ersten Displays. KlugLayout beobachtet das nativ und teilt der App mit, auf welcher Art von Bildschirm sie sich gerade befindet.

KlugLayout ist in unseren Apps auf Android-Tablets täglich im Einsatz, unserem Praxisbeweis.

Faltbare Geräte

KlugLayout ordnet das aktuelle Fenster einer von drei Klassen zu und sendet bei jedem Klassenwechsel ein Ereignis:

Wenn ein Fold zugeklappt ist, wird die Querformat-Sperre ausgesetzt, damit der Außenbildschirm in Smartphone-Größe das Hochformat nutzen kann; beim erneuten Aufklappen kehrt sie zurück. Die App erhält außerdem Größe und Kameraaussparung des aktuellen Displays, sodass ein nach dem Falten aufgebautes Layout zum angezeigten Bildschirm passt.

In unseren Apps meldet sich die Betrachterseite bei jedem Falt- oder Cover-Wechsel ab und wieder an, damit Live-Streams auf dem neuen Bildschirm immer sauber starten. Auf dem Flip-Cover wird die Oberfläche für ein normales Smartphone aufgebaut und passend verkleinert.

Getestet im Android-Emulator mit den Geräteprofilen Pixel 9 Pro Fold und Galaxy Z Flip.

iPhone Duo

Das iPhone Duo ist Apples erstes faltbares Gerät: zugeklappt ein Smartphone, aufgeklappt ein kleines Tablet. AIR folgt dem nicht von selbst. Wird das Gerät aufgeklappt, kann iOS die App in ihrem Smartphone-Fenster mit Letterbox belassen, es kommt kein Resize-Ereignis an, und die Startwerte des Bildschirms bleiben die des äußeren Displays.

KlugLayout erkennt unter iOS, auf welchem Display sich die App befindet, und sendet dasselbe DEVICE_TYPE_CHANGED-Ereignis wie unter Android: "phone", wenn das Duo zugeklappt ist, "tablet", wenn es aufgeklappt ist. Derselbe Code bedient beide Plattformen.

Stand: Die grundlegenden Layouts sind gelöst. Zugeklappte und aufgeklappte Layouts, Falten und Entfalten während die App läuft, Drehen des aufgeklappten Geräts und zentrierte native Dialoge funktionieren. Streaming und Kameraeinstellungen müssen noch auf dem echten Gerät getestet werden.

Es gibt keinen Grund, auf AIR 52 zu warten: Ab April 2027 müssen App-Store-Uploads mit dem iOS-27-SDK gebaut werden, und von da an begegnet eine AIR-App dem iPhone Duo als dem faltbaren Gerät, das es ist. KlugLayout bewältigt das schon heute, mit AIR 51.4.1.

Getestet im Xcode-27-Simulator (iPhone Duo) mit HARMAN AIR 51.4.1.

Funktionen

• Eigenständig: eine ANE, keine Kernbibliothek und keine abhängigen ANEs, die Sie ergänzen müssten
• Querformat auf beiden Seiten, mit Drehung zusammen mit dem Gerät
• Falterkennung: Tablet, Smartphone oder Flip-Cover-Screen, mit einem Ereignis bei jeder Änderung
• iPhone Duo: Smartphone zugeklappt, Tablet aufgeklappt, mit demselben Ereignis wie unter Android
• Querformat-Sperre wird automatisch gelöst, solange ein Fold zugeklappt ist
• Größe und Kameraaussparung des aktuellen Displays, auch nach dem Falten
• Kein Wechsel ins Hochformat
• Aktuelle Display-Rotation: 0, 90, 180 oder 270 Grad
• Von Beginn der App an aktiv
• Tut auf anderen Plattformen nichts, sodass der Code in einer plattformübergreifenden App bleiben kann

Unterstützte Plattformen

Erste Schritte

Fügen Sie die Erweiterung Ihrem Application Descriptor hinzu:

<extensions>
    <extensionID>com.klug.layout</extensionID>
</extensions>

Apps, die auf Android 16 zielen, sollten auf großen Bildschirmen zusätzlich eine feste Ausrichtung zulassen, mit dieser Property innerhalb von <application> der Manifest-Ergänzungen:

<property android:name="android.window.PROPERTY_COMPAT_ALLOW_RESTRICTED_RESIZABILITY"
          android:value="true"/>

Codebeispiele

Vier vollständige Abläufe, entnommen der API, die in unseren Apps läuft. Aufrufe kehren sofort zurück; Änderungen des Bildschirms kommen als StatusEvent an. Vollständige Dokumentation →

import com.klug.layout.KlugLayout;
import flash.display.StageAspectRatio;
import flash.events.StageOrientationEvent;

var layout:KlugLayout = KlugLayout.getInstance();

// isSupported is false on desktop platforms: every call below is then a no-op,
// so this code can stay in a cross-platform app
stage.autoOrients = true;
stage.setAspectRatio( StageAspectRatio.LANDSCAPE );   // first AIR's landscape ...
layout.setSensorLandscape();                          // ... then both sides on Android
                                                      // (on iOS LANDSCAPE already allows both sides)

// turn your own content, such as a camera picture, with the device
updatePicture();
stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGE, function( e:StageOrientationEvent ):void {
    updatePicture();
});

function updatePicture():void
{
    var rotation:int = layout.displayRotation;   // 0, 90, 180 or 270; -1 = unknown
    if ( rotation != -1 ) rotateCameraPicture( rotation );   // your app function
}

import flash.events.StatusEvent;

layout.addEventListener( StatusEvent.STATUS, onLayout );
layout.watchFold( stage );   // pass the stage: iOS needs it for the iPhone Duo

// events report changes only; read the class once for the start
var startClass:String = layout.deviceClass;   // "phone", "tablet", "cover" or "" (unknown)
showLayoutFor( startClass != "" ? startClass : chooseFromStage() );   // your own default

function onLayout( e:StatusEvent ):void
{
    if ( e.code != KlugLayout.DEVICE_TYPE_CHANGED ) return;
    showLayoutFor( e.level );   // "tablet" or "phone"; "cover" on a Galaxy Z Flip (Android)
}

// fold-only behaviour, kept away from normal phones and tablets
if ( layout.isFoldable ) enableFoldHints();   // your app function

function showLayoutFor( deviceClass:String ):void
{
    // size of the current window in pixels, also after the device moved the app
    // to its other display; -1 = unknown, then fall back to the stage
    var w:int = layout.windowWidth  > 0 ? layout.windowWidth  : stage.stageWidth;
    var h:int = layout.windowHeight > 0 ? layout.windowHeight : stage.stageHeight;

    // top inset of the current display (Android: camera cutout, from Android 9)
    var top:int = Math.max( 0, layout.safeInsetTop );   // -1 = unknown

    if ( deviceClass == "tablet" )
        buildTabletViews( w, h, top );            // your app functions
    else
    {
        buildPhoneViews( w, h, top );
        if ( deviceClass == "cover" ) scaleToFit( w, h );   // phone layout, scaled down
    }
}

// while a Fold is closed the lock is suspended on its own and comes back when it is opened.
// release() is for screens where the app itself leaves landscape (Android; no-op on iOS).
function openPortraitScreen():void
{
    layout.release();                                   // remove the landscape lock
    stage.setAspectRatio( StageAspectRatio.PORTRAIT );  // AIR decides again
}

function openStationScreen():void
{
    stage.setAspectRatio( StageAspectRatio.LANDSCAPE );
    layout.setSensorLandscape();                        // both landscape sides again
}

API-Übersicht

Ereignisse

KlugLayout kaufen

Eine Jahreslizenz für eine AIR-Anwendung, mit allen Updates für 12 Monate. Nach der Zahlung erhalten Sie die Erweiterung, die ActionScript-Bibliothek und die Dokumentation per E-Mail, in der Regel innerhalb eines Werktags. Lizenz und Bedingungen

Voraussetzungen