KlugLayout

Översikt

Vissa appar är utformade enbart för liggande läge, till exempel en kamerastation på en surfplatta. Användare förväntar sig ändå att bilden är rättvänd hur de än placerar enheten: med knapparna till vänster eller till höger.

KlugLayout sätter Androids skärmorientering till liggande åt båda hållen. Appen förblir i liggande läge men vänder 180 grader med enheten. Den rapporterar också den aktuella skärmrotationen, så att en app kan anpassa sitt eget innehåll, till exempel en kamerabild, efter hur enheten hålls.

Vikbara enheter ändrar skärmen medan appen körs. En Galaxy Z Fold eller Pixel Fold är en surfplatta när den är öppen och en telefon när den är stängd; en Galaxy Z Flip går från sin höga huvudskärm till en liten, nästan kvadratisk yttre skärm. När enheten flyttar appen till den andra skärmen får AIR-scenen inte alltid någon resize-händelse, och startvärdena för skärmstorlek och kameraurtag förblir de från den första skärmen. KlugLayout bevakar detta inbyggt och talar om för appen vilken typ av skärm den befinner sig på nu.

KlugLayout används dagligen i våra appar på Android-surfplattor, vårt proof of concept.

Vikbara enheter

KlugLayout sorterar det aktuella fönstret i en av tre klasser och skickar en händelse varje gång klassen ändras:

När en Fold stängs upphävs låsningen till liggande läge så att den telefonstora yttre skärmen kan använda stående läge, och den återkommer när enheten öppnas igen. Appen får också storlek och kameraurtag för den aktuella skärmen, så att en layout som byggs efter vikningen passar den skärm den visas på.

I våra appar loggar tittarsidan ut och in igen vid varje vikning eller byte till yttre skärm, så att livesändningar alltid startar rent på den nya skärmen. På Flips yttre skärm läggs gränssnittet ut för en vanlig telefon och skalas ned så att det passar.

Testat i Android-emulatorn med enhetsprofilerna Pixel 9 Pro Fold och Galaxy Z Flip.

iPhone Duo

iPhone Duo är Apples första vikbara enhet: en telefon när den är stängd, en liten surfplatta när den är öppen. AIR följer inte med av sig självt. När enheten öppnas kan iOS behålla appen i sitt letterboxade telefonfönster, ingen resize-händelse kommer, och startvärdena för skärmen förblir de från den yttre skärmen.

KlugLayout identifierar på iOS vilken skärm appen visas på och skickar samma DEVICE_TYPE_CHANGED-händelse som på Android: "phone" när Duo är stängd, "tablet" när den är öppen. Samma kod fungerar på båda plattformarna.

Status: grundlayouterna är lösta. Stängda och öppnade layouter, vikning och uppvikning medan appen körs, rotation av den öppnade enheten och centrerade inbyggda dialoger fungerar. Streaming och kamerainställningar måste fortfarande testas på den riktiga enheten.

Det finns ingen anledning att vänta på AIR 52: från april 2027 måste uppladdningar till App Store byggas med iOS 27 SDK, och från och med då möter en AIR-app iPhone Duo som den vikbara enhet den är. KlugLayout hanterar det redan i dag, med AIR 51.4.1.

Testat i Xcode 27-simulatorn (iPhone Duo) med HARMAN AIR 51.4.1.

Funktioner

• Fristående: ett ANE, inget kärnbibliotek eller beroende-ANE:er att lägga till
• Liggande läge åt båda hållen, vänder med enheten
• Identifiering av vikning: surfplatta, telefon eller Flips yttre skärm, med en händelse vid varje ändring
• iPhone Duo: telefon när den är stängd, surfplatta när den är öppen, med samma händelse som på Android
• Låsningen till liggande läge släpps automatiskt medan en Fold är stängd
• Storlek och kameraurtag för den aktuella skärmen, även efter vikning
• Inget byte till stående läge
• Aktuell skärmrotation: 0, 90, 180 eller 270 grader
• Aktivt från appens start
• Gör ingenting på andra plattformar, så koden kan ligga kvar i en plattformsoberoende app

Plattformar som stöds

Kom igång

Lägg till tillägget i din applikationsbeskrivning (application descriptor):

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

Appar som riktar sig mot Android 16 bör dessutom tillåta en fast orientering på stora skärmar med den här egenskapen (property) inuti <application> i manifest-tilläggen:

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

Kodexempel

Fyra kompletta flöden, hämtade från det API som körs i våra appar. Anrop returnerar direkt; ändringar av skärmen kommer som en StatusEvent. Fullständig 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-översikt

Händelser

Köp KlugLayout

En årslicens för en AIR-applikation, med alla uppdateringar i 12 månader. Efter betalning får du tillägget, ActionScript-biblioteket och dokumentationen via e-post, vanligtvis inom en arbetsdag. Licens och villkor

Krav