Tag Archives: AndroidArsenal

🦋 Butterfly hilft Ihnen beim Erstellen einer anpassbaren und anpassbaren Benutzeroberfläche für Android mit Jetpack WindowManager.
Es unterstützt auch nützliche Funktionen für Jetpack Compose und LiveData-Integration.

Überblick

Demo-Projekt

Das Demoprojekt wurde mit erstellt Stream-Chat-SDK für Jetpack Compose. Um das Demoprojekt zu verstehen, wäre es hilfreich, wenn Sie sich die folgenden Links ansehen:

Herunterladen

Gradl

Fügen Sie die folgenden Codes zu Ihren eigenen hinzu Wurzel build.gradle Datei (nicht Ihr build.gradle-Dateimodul).

allprojects {
    repositories {
        mavenCentral()
    }
}

Fügen Sie dann die unten stehende Abhängigkeit zu Ihrer eigenen hinzu Modul‘S build.gradle Datei.

dependencies {
    implementation "io.getstream:butterfly:1.0.1"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.2"
}

Hinweis: Der Schmetterling beinhaltet Jetpack WindowManager für interne Fensterberechnung. Wenn Sie also WindowManager in Ihrem Projekt verwenden, stellen Sie sicher, dass Ihr Projekt dieselbe Version verwendet, oder deaktivieren Sie die Abhängigkeit, um Ihre eigene anzupassen.

SCHNAPPSCHUSS

repositories {
   maven { url 'https://oss.sonatype.org/content/repositories/snapshots/' }
}

dependencies {
    implementation "io.getstream:butterfly:1.0.2-SNAPSHOT"
}

Installieren Sie den Faltungsemulator

Wenn Sie keine zusammenklappbaren Geräte oder Emulatoren haben, können Sie eine zusammenklappbare Emulatorumgebung einrichten, indem Sie die folgenden Anweisungen befolgen:

👉 Suchen Installieren Sie den Faltungsemulator (Surface Duo 2)

Benutzen

Schmetterling verwendet Jetpack WindowManagerDaher wäre es hilfreich zu verstehen, ob Sie Hintergrundwissen darüber haben Fenstermanager APIs.

Fenstergröße

WindowSize stellt Haltepunkte dar, die die Größe des Bildschirms darstellen, auf dem das Layout angepasst wird, um am besten zum Inhalt zu passen und die Anforderungen des Layouts zu erfüllen. Butterfly folgt drei Breakpoints Material Design.

• WindowSize.Compact: Die meisten Telefone im Hochformat. (0-599 dp-Bereich)
• WindowSize.Medium: Die meisten Falt- und Tablets im Hochformat. (Bereich 600-839 dp)
• WindowSize.Expanded: Die meisten Tablets im Querformat. (840+ dp-Bereich)

Sie können eine Kopie erhalten WindowSize Klasse sind getWindowSize() Methode auf Ihrem Aktivität oder Fragment folgendermaßen:

val windowSize: WindowSize = getWindowSize()
when (windowSize) {
    is WindowSize.Compact -> // the window size is compact.
    is WindowSize.Medium -> // the window size is medium.
    is WindowSize.Expanded -> // the window size is expanded.
}

GlobalWindowSize

Sie können vordefinierte Haltepunkte anpassen, die früher waren getWindowSize() mit GlobalWindowSize Objektklasse wie folgt:

GlobalWindowSize.compactWindowDpSize = 600
GlobalWindowSize.mediumWindowDpSize = 840

Sie können die Werksfunktion auch vollständig anpassen WindowSize Klasse wie folgt:

GlobalWindowSize.windowSizeFactory = { windowPixelSize ->
    when {
        windowPixelSize.width < 0 -> throw IllegalArgumentException("Can't be negative")
        windowPixelSize.width < 600.dp2Px() -> WindowSize.Compact(windowPixelSize)
        windowPixelSize.width < 840.dp2Px() -> WindowSize.Medium(windowPixelSize)
        else -> WindowSize.Expanded(windowPixelSize)
    }
}

Haltung

Schaltzustand: FLAT ich HALF-OPENED von Google.

Die Positionsklasse stellt die Positionen des Geräts auf einem flexiblen Bildschirm oder Scharnier zwischen zwei physischen Anzeigefeldern dar.

• Körperhaltung.TableTop – Die Position des Geräts ist im Modus des Tisches (halb offen mit einem horizontalen Scharnier).
• Haltung.Buch – Die Position des Geräts ist im Buchmodus (halb offen mit vertikalen Scharnieren).
• Haltung.Normal – Die Position des Geräts befindet sich im Normalmodus.

Sie können die Haltung als Kotlin Flow an sich selbst beobachten Aktivität oder Fragment folgendermaßen:

lifecycleScope.launch(Dispatchers.Main) {
    lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        postureFlow.collect { posture ->
            when (posture) {
                Posture.Normal -> // posture is Normal
                is Posture.TableTop -> // posture is TableTop
                is Posture.Book -> // posture is Book
            }
        }
        windowLayoutInfo.collect(::onWindowLayoutInfoUpdated)
    }
}

Hinweis: Stellen Sie sicher, dass Ihr Projekt enthält Koroutinen ich androidx.lifecycle:lifecycle-runtime-ktx:2.4.0 Abhängigkeiten.

WindowLayoutInfo

WindowLayoutInfo enthält eine Liste Anzeigefunktion-s befindet sich im Fenster. Sie können beobachten WindowLayoutInfo folgendermaßen:

lifecycleScope.launch(Dispatchers.Main) {
    lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        windowLayoutInfo.collect { windowLayoutInfo ->
            // something stuff            
        }
    }
}

Sie können auch die folgenden Informationen von erhalten WindowLayoutInfo wie in den folgenden Erweiterungen:

val isSeparating: Boolean = WindowLayoutInfo.isSeparating
val occlusionType: FoldingFeature.OcclusionType = WindowLayoutInfo.occlusionType 
val orientation: FoldingFeature.Orientation = WindowLayoutInfo.orientation
val state: FoldingFeature.State = WindowLayoutInfo.state

Faltfunktion

Faltfunktion was das Falten eines flexiblen Bildschirms oder Scharniers zwischen zwei physischen Bildschirmplatten beschreibt. Sie können die folgenden Erweiterungen verwenden, um den Überlappungsstatus und die Geräteposition zu überprüfen:

val foldingFeature = windowLayoutInfo.displayFeatures.findFoldingFeature()
val posture = foldingFeature?.toPosture()
val isTableTopPosture = foldingFeature?.isTableTopPosture
val isBookPosture = foldingFeature?.isBookPosture
val isHalfOpened = foldingFeature?.isHalfOpened
val isFlat = foldingFeature?.isFlat
val isVertical = foldingFeature?.isVertical
val isHorizontal = foldingFeature?.isHorizontal

Scharniergröße

Wenn Ihr Klappgerät klappbar ist, können Sie die Scharniergröße mit den folgenden Erweiterungen erhalten:

val hingePxSize: Int = foldingFeature.hingePxSize
val hingeDpSize: Int = foldingFeature.hingeDpSize
val hingeWidthPxSize: Int = foldingFeature.hingeWidthPxSize
val hingeHeightPxSize: Int = foldingFeature.hingeHeightPxSize
val hingeWidthDpSize: Int = foldingFeature.hingeWidthDpSize
val hingeHeightDpSize: Int = foldingFeature.hingeHeightDpSize

WindowInfoActivity

Schmetterlingsträger WindowInfoActivitydie Fensterkonfigurationen und -aktualisierungen überwacht WindowLayoutInfo. Es gibt eine Vorgabe windowSize Eigentum und onWindowLayoutInfoUpdated abstrakte Methode wie im folgenden Beispiel:

class MainActivity : WindowInfoActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // windowSize property will be initialized lazily.
        when (windowSize) {
            is WindowSize.Compact -> 
            ...
        }
    }

    override fun onWindowLayoutInfoUpdated(windowLayoutInfo: WindowLayoutInfo) {
        val foldingFeature = windowLayoutInfo.displayFeatures.findFoldingFeature() ?: return
        when (val posture = foldingFeature.toPosture()) {
            Posture.Normal -> Log.d(tag, "[Posture.Normal] ${posture.size}")
            is Posture.TableTop -> Log.d(tag, "[Posture.TableTop] ${posture.size}")
            ...
        }
    }
}

Vordefiniert windowSize Die Eigenschaft wird faul und initialisiert onWindowLayoutInfoUpdated wird aktualisiert wann WindowLayoutInfo Konfiguration geändert. Da das gleiche Konzept, können Sie erweitern WindowInfoFragment für dich Fragment.

Schmetterling für Jetpack Compose

Butterfly unterstützt Jetpack Compose, um anpassbare und anpassbare Benutzeroberflächen zu erstellen. Fügen Sie zuerst die unten stehende Sucht zu Ihrer eigenen hinzu Modul build.gradle Datei.

dependencies {
    implementation "io.getstream:butterfly-compose:1.0.1"
}

WindowDpSize

WindowDpSize stellt Haltepunkte dar, die die Bildschirmgröße darstellen, bei der das Layout so angepasst wird, dass es am besten zum Inhalt passt und die Anforderungen des Layouts erfüllt. Butterfly folgt drei Breakpoints Material Design.

Sie können sich ein Beispiel vorstellen WindowDpSize Klasse sind rememberWindowDpSize() Methode auf Ihrem Aktivität oder Fragment folgendermaßen:

val windowDpSize: WindowDpSize = rememberWindowDpSize()
when (windowDpSize) {
    is WindowSize.Compact -> MainScreenRegular()
    is WindowSize.Medium -> MainScreenMedium()
    is WindowSize.Expanded -> MainScreenExpanded()
}

Hinweis: Auch WindowSizeSie können auch vordefinierte Haltepunkte anpassen, die früher waren rememberWindowDpSize mit GlobalWindowSize Objektklasse.

Haltung

Sie können eine bekommen Zustand von Haltung um anpassbare und anpassbare Benutzeroberflächen zu erstellen postureState Verlängerung auf Ihrem Aktivität ich Fragment folgendermaßen:

val postureState: State<Posture> = postureState
when (postureState.value) {
    Posture.Normal -> // posture is Normal
    is Posture.TableTop -> // posture is TableTop
    is Posture.Book -> // posture is Book
}

WindowLayoutInfo

WindowLayoutInfo enthält eine Liste Anzeigefunktion-s befindet sich im Fenster. Du kannst es bekommen Zustand des WindowLayoutInfo folgendermaßen:

val windowLayoutInfoState: State<WindowLayoutInfo> = windowLayoutInfoState
val foldingFeature = windowLayoutInfoState.value.displayFeatures.findFoldingFeature()
...

ZusammensetzungLokal

Sie können Beispiele weiterleiten WindowDpSize ich Posture string Zusammensetzung implizit wie folgt:

CompositionLocalProvider(LocalWindowDpSize provides rememberWindowDpSize()) {
    val windowDpSize = LocalWindowDpSize.current
    ...
}

CompositionLocalProvider(LocalPosture provides postureState.value) {
    val posture = LocalPosture.current
    ...                
}

Scharniergröße

Wenn Ihr Klappgerät klappbar ist, können Sie die Scharniergröße mit den folgenden Erweiterungen erhalten:

val hingeDp: Dp = FoldingFeature.hingeDp
val hingeDpSize: DpSize = FoldingFeature.hingeDpSize
val hingeWidthDp: Dp = FoldingFeature.hingeWidthDp
val hingeHeightDp: Dp = FoldingFeature.hingeHeightDp

Butterfly für LiveData-Integration

Schmetterlingsträger Lebensdaten Integration, mit der Sie Änderungen beobachten können, die aussehen wie Lebensdaten. Fügen Sie zuerst die unten stehende Sucht zu Ihrer eigenen hinzu Modul build.gradle Datei.

dependencies {
    implementation "io.getstream:butterfly-livedata:1.0.1"
}

Sie können beobachten Lebensdaten von Posture ich WindowLayoutInfo auf deinem Aktivität ich Fragment wie im folgenden Beispiel unten:

postureLiveData().observe(this) { posture ->
    // do something
}

windowLayoutInfoLiveData().observe(this) { windowLayoutInfo ->
    // do something
}

Ist diese Bibliothek nützlich für Sie? ❤️

Unterstützen Sie dies durch Ihren Beitritt Sterngucker für dieses Depot. ⭐️
Folgen Sie auch Strom auf Twitter für unsere nächsten Kreationen!

Copyright 2022 Stream.IO, Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.