Android-Arsenal – Outlook

ūü¶č 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

ūüĆó Siehe dunkles Thema

Dunkles Thema

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

Sehen Sie, wie Sie einen Snapshot importieren

Einschließlich SCHNAPPSCHUSS

Filmmaterial der aktuellen Entwicklungsversion von Butterfly, die folgen, ist verf√ľgbar die neuesten Versionen.

Um Snapshot-Versionen in Ihr Projekt zu importieren, f√ľgen Sie das folgende Code-Snippet zu Ihrer Gradle-Datei hinzu.

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

F√ľgen Sie dann die untere Abh√§ngigkeit zu Ihrer eigenen hinzu Modul‘S build.gradle Datei.

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.