El Arsenal de Android РDise̱o

🦋 Butterfly ayuda a crear interfaces de usuario adaptables y receptivas para Android con Jetpack WindowManager.
Además, admite funciones útiles para la integración de Jetpack Compose y LiveData.

Avance

🌗 Ver tema oscuro

tema oscuro

Proyecto de demostración

El proyecto de demostración creado con el Stream Chat SDK para Jetpack Compose. Sería útil para comprender el proyecto de demostración si revisa los siguientes enlaces:

Descargar

Graduado

Añade los siguientes códigos a los tuyos raíz build.gradle (no el archivo del módulo build.gradle).

allprojects {
    repositories {
        mavenCentral()
    }
}

Luego, agregue la dependencia a continuación a la suya módulo‘S build.gradle Archivo.

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

Nota: la mariposa incluye Gestor de ventanas Jetpack para calcular la ventana internamente. Entonces, si está usando WindowManager en su proyecto, asegúrese de que su proyecto use la misma versión o excluya la dependencia para adaptar la suya.

INSTANTE

Descubra cómo importar la instantánea

Incluyendo la INSTANTÁNEA

Hay disponibles instantáneas de la versión de desarrollo actual de Butterfly, que rastrea las últimas versiones.

Para importar versiones instantáneas a su proyecto, agregue el fragmento de código a continuación a su gradle.

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

Luego, agrega la siguiente dependencia a la tuya módulo‘S build.gradle Archivo.

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

Configurar el emulador plegable

Si no tiene dispositivos plegables o emuladores, puede configurar un entorno de emulación plegable siguiendo las instrucciones a continuación:

👉 Echa un vistazo a la Configurar el emulador plegable (Surface Duo 2)

Uso

La mariposa usa Gestor de ventanas Jetpackpor lo que sería útil comprender si tiene una comprensión básica de Administrador de ventanas API.

Tamaño de ventana

WindowSize representa los puntos de interrupción, que son el tamaño de pantalla en el que un diseño se ajustará al contenido más adecuado y se ajustará a los requisitos del diseño receptivo. Butterfly sigue tres puntos de quiebre de diseño de materiales.

  • Tamaño de ventana.Compacto: la mayoría de los teléfonos en modo vertical. (rango 0-599 dp)
  • Tamaño de ventana.Medio: la mayoría de los pliegues y tabletas en modo vertical. (rango 600-839 dp)
  • Tamaño de ventana.Expandido: la mayoría de las tabletas en modo horizontal. (capacidad 840+ dp)

Puede obtener una instancia de WindowSize clase con getWindowSize() método en su Ocupaciones o Fragmento como sigue a continuación:

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.
}

Tamaño de ventana global

Puede personalizar los puntos de interrupción predeterminados, como antes getWindowSize() con GlobalWindowSize clase de objeto de la siguiente manera:

GlobalWindowSize.compactWindowDpSize = 600
GlobalWindowSize.mediumWindowDpSize = 840

Además, puede personalizar completamente una función de fábrica del WindowSize clase de la siguiente manera:

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)
    }
}

Postura

Estado de plegado: FLAT Y HALF-OPENED desde Google.

La clase de postura representa las posiciones del dispositivo en la pantalla flexible o una bisagra entre dos paneles de pantalla físicos.

  • Postura.TableTop – La ubicación del dispositivo es en modo sobremesa (medio abierto con cremallera horizontal).
  • Postura Libro – La postura del dispositivo es en modo libro (medio abierto con bisagra vertical).
  • Postura: Normal – La postura del dispositivo está en modo normal.

Puedes observar la postura como un flujo de Kotlin sobre ti. Ocupaciones o Fragmento como sigue a continuación:

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)
    }
}

Nota: asegúrese de que su proyecto incluya Corrutina Y androidx.lifecycle:lifecycle-runtime-ktx:2.4.0 adicciones

WindowLayoutInfo

WindowLayoutInfo contiene la lista de Función de pantalla-s ubicado dentro de la ventana. Puedes observar el WindowLayoutInfo como sigue a continuación:

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

función plegable

función plegable que describe un pliegue en la pantalla flexible o una bisagra entre dos paneles de pantalla físicos. Puede utilizar las siguientes extensiones para controlar los estados de plegado y las posiciones de los dispositivos:

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

WindowInfoActivity

Soportes de mariposa WindowInfoActivityque realiza un seguimiento de las configuraciones de ventana y actualiza el archivo WindowLayoutInfo. Tiene un valor por defecto windowSize propiedad e onWindowLayoutInfoUpdated método abstracto como en el siguiente ejemplo:

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}")
            ...
        }
    }
}

El valor por defecto windowSize la propiedad se inicializará perezosamente y el onWindowLayoutInfoUpdated se actualizará cuando el WindowLayoutInfo configuración modificada. Al igual que el concepto en sí, puede ampliar WindowInfoFragment para tu Fragmento.

Esfera de mariposa jetpack

Butterfly es compatible con Jetpack Compose para crear interfaces de usuario adaptables y receptivas. Primero, agregue la dependencia a continuación a la suya formularios build.gradle Archivo.

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

Ventana DimensionDp

WindowDpSize representa puntos de interrupción, que es el tamaño de pantalla en el que un diseño se ajustará al contenido más adecuado y se ajustará a los requisitos de diseño receptivo. Butterfly sigue tres puntos de quiebre de diseño de materiales.

Puedes recordar un ejemplo de WindowDpSize clase con rememberWindowDpSize() método en su Ocupaciones o Fragmento como sigue a continuación:

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

Nota: igualmente el WindowSizetambién puede personalizar los puntos de interrupción predeterminados, como antes rememberWindowDpSize con el Tamaño de ventana global clase de objeto

Postura

puedes conseguir un Expresar desde Postura para crear interfaces de usuario adaptables y receptivas con el postureState extensión en su Ocupaciones Y Fragmento como sigue a continuación:

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 contiene la lista de Función de pantalla-s ubicado dentro de la ventana. Puedes obtener el Expresar de El WindowLayoutInfo como sigue a continuación:

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

ComposiciónLocal

Puede cambiar las instancias de WindowDpSize Y Posture a través de la Composición implícitamente de la siguiente manera:

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

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

Integración de Butterfly para LiveData

Soportes de mariposa Datos en tiempo real integración para permitir la observación de cambios de diseño tales como Datos en tiempo real. Primero, agregue la dependencia a continuación a la suya formularios build.gradle Archivo.

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

Puedes observar Datos en tiempo real desde Posture Y WindowLayoutInfo en tu Ocupaciones Y Fragmento como en el siguiente ejemplo:

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

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

¿Encuentra útil esta biblioteca? ❤️

Apoyalo uniéndote observadores de estrellas por este depósito. ⭐️
Además, sigue Fluir en Twitter para nuestras próximas creaciones!

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.

.

About MiReal

Compruebe también

¡Anuncio de la versión beta de Compose for Wear OS!

Publicado por Ksenia ShumelchykIngeniero de relaciones con desarrolladores y John Nichol, líder técnico de Compose …

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

holiganbet giriş
- elexbet yeni giriş -

bahsegel bahis

- anadolu casino giriş -
betboo giriş
-

Personel Sağlık

- istanbul eskort - izmir eskort - mersin eskort - adana eskort - antalya eskort - eskort mersin - mersin eskort bayan - eskort adana