From 1c40e9d8d18fd49713330c65593612875d2d54d3 Mon Sep 17 00:00:00 2001 From: "takahiro.tominaga" Date: Tue, 6 Dec 2022 21:43:46 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20API=20=E9=80=9A=E4=BF=A1=E5=BE=85?= =?UTF-8?q?=E3=81=A1=E6=99=82=E3=81=AB=E3=82=A4=E3=83=B3=E3=82=B8=E3=82=B1?= =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=83=BC=E3=82=92=E8=A1=A8=E7=A4=BA=20(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../code_check/presentation/main/MainView.kt | 5 +- .../code_check/presentation/theme/Colors.kt | 8 +- .../code_check/presentation/user/UserView.kt | 3 + .../util/CustomCircularProgressIndicator.kt | 83 +++++++++++++++++++ 4 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/util/CustomCircularProgressIndicator.kt diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt index da06c53..d5e8166 100644 --- a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt +++ b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt @@ -20,6 +20,7 @@ import jp.co.yumemi.android.code_check.models.Repository import jp.co.yumemi.android.code_check.presentation.MainActivity.Companion.updateLastSearchDate import jp.co.yumemi.android.code_check.presentation.main.component.OneRepository import jp.co.yumemi.android.code_check.presentation.main.component.RecentSearched +import jp.co.yumemi.android.code_check.presentation.util.CustomCircularProgressIndicator import jp.co.yumemi.android.code_check.presentation.util.SearchBar import jp.co.yumemi.android.code_check.presentation.util.TestTags @@ -44,7 +45,7 @@ fun MainView( }.collect { if (it.visibleItemsInfo.isNotEmpty()) { val info = it.visibleItemsInfo[0] - if (lastIndex != info.index ) { + if (lastIndex != info.index) { // Scroll された Index 分、呼び出し元に返してあげる val diff = lastIndex - info.index onScroll(diff) @@ -61,6 +62,8 @@ fun MainView( .fillMaxSize() .testTag(TestTags.MAIN_VIEW) ) { + CustomCircularProgressIndicator(visible = uiState.isLoading) + Column( modifier = Modifier .fillMaxSize() diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/theme/Colors.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/theme/Colors.kt index faabbeb..d562305 100644 --- a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/theme/Colors.kt +++ b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/theme/Colors.kt @@ -20,7 +20,9 @@ val myLightColorScheme = lightColorScheme( onPrimary = Color.White, background = Color.White, onBackground = Color.Black, - secondary = SecondaryGreen, + secondary = Color.White, + onSecondary = SecondaryGreen, + outline = Color.Gray, ) @SuppressLint("ConflictingOnColor") @@ -29,5 +31,7 @@ val myDarkColorScheme = darkColorScheme( onPrimary = PrimaryBlue, background = Color(0xFF1A1C19), onBackground = Color(0xFFDAE1FD), - secondary = SecondaryGreen, + secondary = Color(0xFF454845), + onSecondary = SecondaryGreen, + outline = Color.Gray, ) diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/user/UserView.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/user/UserView.kt index a02519e..7d69d31 100644 --- a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/user/UserView.kt +++ b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/user/UserView.kt @@ -19,6 +19,7 @@ import jp.co.yumemi.android.code_check.models.User import jp.co.yumemi.android.code_check.presentation.MainActivity import jp.co.yumemi.android.code_check.presentation.util.SearchBar import jp.co.yumemi.android.code_check.presentation.user.component.OneUser +import jp.co.yumemi.android.code_check.presentation.util.CustomCircularProgressIndicator import jp.co.yumemi.android.code_check.presentation.util.TestTags @Composable @@ -75,6 +76,8 @@ fun UserViewMain( .fillMaxSize() .testTag(TestTags.USER_VIEW) ) { + CustomCircularProgressIndicator(visible = uiState.isLoading) + Column( modifier = Modifier .fillMaxSize() diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/util/CustomCircularProgressIndicator.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/util/CustomCircularProgressIndicator.kt new file mode 100644 index 0000000..2902a27 --- /dev/null +++ b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/util/CustomCircularProgressIndicator.kt @@ -0,0 +1,83 @@ +package jp.co.yumemi.android.code_check.presentation.util + +import android.content.res.Configuration +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.core.tween +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.CircularProgressIndicator +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import jp.co.yumemi.android.code_check.presentation.theme.CustomTheme + + +@Composable +fun CustomCircularProgressIndicator( + size: Dp = 24.dp, + visible: Boolean = true, + durationMillis: Int = 200, +) { + AnimatedVisibility( + modifier = Modifier + .fillMaxSize(), + visible = visible, + enter = fadeIn(tween(durationMillis)), + exit = fadeOut(tween(durationMillis)), + ) { + Box( + modifier = Modifier + .fillMaxSize(), + contentAlignment = Alignment.Center, + ) { + + CircularProgressIndicator( + modifier = Modifier + .shadow( + elevation = size / 3, + shape = CircleShape, + ambientColor = MaterialTheme.colorScheme.outline, + ) + .clip(CircleShape) + .background(MaterialTheme.colorScheme.secondary) + .padding(size / 2) + .size(size), + color = MaterialTheme.colorScheme.onSecondary, + strokeWidth = 4.dp, + ) + } + } +} + +@Preview( + showBackground = true, +) +@Composable +fun CustomCircularProgressIndicatorPreview() { + CustomTheme { + CustomCircularProgressIndicator() + } +} + +@Preview( + showBackground = true, + uiMode = Configuration.UI_MODE_NIGHT_YES, +) +@Composable +fun CustomCircularProgressIndicatorWithNightModePreview() { + CustomTheme { + CustomCircularProgressIndicator() + } +}