Add preview animations for layout preference
This commit is contained in:
MM20
parent
ec4fe2acc3
commit
261e91f443
@ -217,4 +217,12 @@ val OpenSourceLicenses = arrayOf(
|
||||
licenseText = R.raw.license_apache_2,
|
||||
url = "https://source.android.com/"
|
||||
),
|
||||
OpenSourceLibrary(
|
||||
name = "Lottie",
|
||||
copyrightNote = "Copyright (c) 2017 Airbnb",
|
||||
description = "Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web",
|
||||
licenseName = R.string.mit_license_name,
|
||||
licenseText = R.raw.license_mit,
|
||||
url = "https://airbnb.design/lottie/"
|
||||
),
|
||||
)
|
||||
2770
base/src/main/res/raw/lottie_scaffold_pager.json
Normal file
2770
base/src/main/res/raw/lottie_scaffold_pager.json
Normal file
File diff suppressed because it is too large
Load Diff
2949
base/src/main/res/raw/lottie_scaffold_pulldown.json
Normal file
2949
base/src/main/res/raw/lottie_scaffold_pulldown.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -381,6 +381,8 @@
|
||||
<string name="grant_permission">Grant</string>
|
||||
<!-- Appearance preference title -->
|
||||
<string name="preference_screen_appearance">Appearance</string>
|
||||
<string name="preference_layout">Layout</string>
|
||||
<string name="preference_layout_summary">General arrangement of search bar, widgets and search results</string>
|
||||
<string name="preference_theme">Theme</string>
|
||||
<string name="preference_theme_light">Light</string>
|
||||
<string name="preference_theme_dark">Dark</string>
|
||||
|
||||
@ -379,6 +379,10 @@ dependencyResolutionManagement {
|
||||
alias("tinypinyin")
|
||||
.to("com.github.promeg", "tinypinyin")
|
||||
.version("2.0.2")
|
||||
|
||||
alias("lottie")
|
||||
.to("com.airbnb.android", "lottie-compose")
|
||||
.version("5.0.3")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,6 +105,8 @@ dependencies {
|
||||
implementation(libs.coil.core)
|
||||
implementation(libs.coil.compose)
|
||||
|
||||
implementation(libs.lottie)
|
||||
|
||||
implementation(project(":material-color-utilities"))
|
||||
|
||||
implementation(project(":base"))
|
||||
|
||||
@ -3,12 +3,11 @@ package de.mm20.launcher2.ui.settings.appearance
|
||||
import android.graphics.drawable.ColorDrawable
|
||||
import androidx.appcompat.app.AppCompatActivity
|
||||
import androidx.appcompat.content.res.AppCompatResources
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.lazy.grid.GridCells
|
||||
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
|
||||
import androidx.compose.foundation.lazy.grid.items
|
||||
@ -18,12 +17,16 @@ import androidx.compose.runtime.*
|
||||
import androidx.compose.runtime.livedata.observeAsState
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.toArgb
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.window.Dialog
|
||||
import androidx.lifecycle.viewmodel.compose.viewModel
|
||||
import com.airbnb.lottie.LottieProperty
|
||||
import com.airbnb.lottie.compose.*
|
||||
import com.google.accompanist.pager.ExperimentalPagerApi
|
||||
import com.google.accompanist.pager.HorizontalPager
|
||||
import com.google.accompanist.pager.HorizontalPagerIndicator
|
||||
@ -50,6 +53,13 @@ fun AppearanceSettingsScreen() {
|
||||
PreferenceScreen(title = stringResource(id = R.string.preference_screen_appearance)) {
|
||||
item {
|
||||
PreferenceCategory {
|
||||
val layout by viewModel.layout.observeAsState()
|
||||
LayoutPreference(
|
||||
title = stringResource(id = R.string.preference_layout),
|
||||
summary = stringResource(id = R.string.preference_layout_summary),
|
||||
value = layout, onValueChanged = {
|
||||
viewModel.setLayout(it)
|
||||
})
|
||||
val theme by viewModel.theme.observeAsState()
|
||||
ListPreference(
|
||||
title = stringResource(id = R.string.preference_theme),
|
||||
@ -77,10 +87,6 @@ fun AppearanceSettingsScreen() {
|
||||
navController?.navigate("settings/appearance/colorscheme")
|
||||
}
|
||||
)
|
||||
val layout by viewModel.layout.observeAsState()
|
||||
LayoutPreference(title = "Layout", value = layout, onValueChanged = {
|
||||
viewModel.setLayout(it)
|
||||
})
|
||||
Preference(
|
||||
title = stringResource(R.string.preference_cards),
|
||||
summary = stringResource(R.string.preference_cards_summary),
|
||||
@ -513,14 +519,74 @@ fun LayoutPreference(
|
||||
count = layouts.size,
|
||||
state = pagerState,
|
||||
modifier = Modifier
|
||||
.height(150.dp)
|
||||
.fillMaxWidth()
|
||||
.padding(bottom = 16.dp)
|
||||
.background(MaterialTheme.colorScheme.secondary)
|
||||
) {
|
||||
when (layouts[it]) {
|
||||
AppearanceSettings.Layout.PullDown -> PullDownLayoutPreview()
|
||||
AppearanceSettings.Layout.Pager -> PagerLayoutPreview()
|
||||
else -> {}
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.height(250.dp)
|
||||
.width(141.dp)
|
||||
.background(MaterialTheme.colorScheme.secondary)
|
||||
) {
|
||||
|
||||
val composition by rememberLottieComposition(
|
||||
LottieCompositionSpec.RawRes(
|
||||
when (layouts[it]) {
|
||||
AppearanceSettings.Layout.PullDown -> R.raw.lottie_scaffold_pulldown
|
||||
AppearanceSettings.Layout.Pager -> R.raw.lottie_scaffold_pager
|
||||
else -> 0
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
val dynamicProperties = rememberLottieDynamicProperties(
|
||||
rememberLottieDynamicProperty(
|
||||
property = LottieProperty.COLOR,
|
||||
value = MaterialTheme.colorScheme.primaryContainer.toArgb(),
|
||||
keyPath = arrayOf("Pointer", "**")
|
||||
),
|
||||
rememberLottieDynamicProperty(
|
||||
property = LottieProperty.COLOR,
|
||||
value = MaterialTheme.colorScheme.surface.toArgb(),
|
||||
keyPath = arrayOf("SearchBar", "**")
|
||||
),
|
||||
rememberLottieDynamicProperty(
|
||||
property = LottieProperty.COLOR,
|
||||
value = MaterialTheme.colorScheme.surface.toArgb(),
|
||||
keyPath = arrayOf("Favorites", "**")
|
||||
),
|
||||
rememberLottieDynamicProperty(
|
||||
property = LottieProperty.COLOR,
|
||||
value = MaterialTheme.colorScheme.surface.toArgb(),
|
||||
keyPath = arrayOf("Apps", "**")
|
||||
),
|
||||
rememberLottieDynamicProperty(
|
||||
property = LottieProperty.COLOR,
|
||||
value = Color.White.toArgb(),
|
||||
keyPath = arrayOf("ClockWidget", "**")
|
||||
)
|
||||
)
|
||||
|
||||
/*LaunchedEffect(null) {
|
||||
val drw = LottieDrawable()
|
||||
drw.composition = composition
|
||||
val list = drw.resolveKeyPath(KeyPath("**"))
|
||||
list.forEach {
|
||||
Log.d("MM20", it.keysToString())
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
val progress by animateLottieCompositionAsState(
|
||||
composition,
|
||||
iterations = LottieConstants.IterateForever
|
||||
)
|
||||
|
||||
LottieAnimation(
|
||||
composition = composition,
|
||||
progress = progress,
|
||||
dynamicProperties = dynamicProperties
|
||||
)
|
||||
}
|
||||
}
|
||||
HorizontalPagerIndicator(pagerState = pagerState)
|
||||
@ -530,15 +596,6 @@ fun LayoutPreference(
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun PullDownLayoutPreview() {
|
||||
}
|
||||
|
||||
|
||||
@Composable
|
||||
fun PagerLayoutPreview() {
|
||||
}
|
||||
|
||||
|
||||
@Composable
|
||||
private fun getShapeName(shape: IconSettings.IconShape?): String? {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user