Merge pull request #16 from LeoAndo/preview_screen

Previewできる仕組みにしゅうせい
LeoAndo · Jul 31, 2023 · b112d76 · b112d76
2 parents f44c7f5 + ccf8d29
commit b112d76
Show file tree

Hide file tree

Showing 14 changed files with 360 additions and 177 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
diff --git a/app/src/arithmetic/kotlin/com/leoleo/androidapptemplate/ui/quiz/Quiz.kt b/app/src/arithmetic/kotlin/com/leoleo/androidapptemplate/ui/quiz/Quiz.kt
@@ -13,17 +13,17 @@ internal enum class Quiz(
         listOf(
             QuestionData(
                 messageResId = R.string.quiz_01_question_01,
-                answers = listOf("2", "3", "4", "5", "6"),
+                answerResId = R.array.quiz_01_question_01_answers,
                 answerIndex = 0
             ),
             QuestionData(
                 messageResId = R.string.quiz_01_question_02,
-                answers = listOf("12", "16", "18"),
+                answerResId = R.array.quiz_01_question_02_answers,
                 answerIndex = 1
             ),
             QuestionData(
                 messageResId = R.string.quiz_01_question_03,
-                answers = listOf("155", "152", "151", "150"),
+                answerResId = R.array.quiz_01_question_03_answers,
                 answerIndex = 2
             ),
         )
@@ -34,17 +34,17 @@ internal enum class Quiz(
         listOf(
             QuestionData(
                 messageResId = R.string.quiz_02_question_01,
-                answers = listOf("2", "8", "1", "0"),
+                answerResId = R.array.quiz_02_question_01_answers,
                 answerIndex = 3
             ),
             QuestionData(
                 messageResId = R.string.quiz_02_question_02,
-                answers = listOf("2", "0", "1", "8"),
+                answerResId = R.array.quiz_02_question_02_answers,
                 answerIndex = 1
             ),
             QuestionData(
                 messageResId = R.string.quiz_02_question_03,
-                answers = listOf("-92", "90", "95", "-95"),
+                answerResId = R.array.quiz_02_question_03_answers,
                 answerIndex = 3
             ),
         )
@@ -54,17 +54,17 @@ internal enum class Quiz(
         listOf(
             QuestionData(
                 messageResId = R.string.quiz_03_question_01,
-                answers = listOf("2", "8", "1", "0"),
+                answerResId = R.array.quiz_03_question_01_answers,
                 answerIndex = 2
             ),
             QuestionData(
                 messageResId = R.string.quiz_03_question_02,
-                answers = listOf("2", "64", "1", "8"),
+                answerResId = R.array.quiz_03_question_02_answers,
                 answerIndex = 1
             ),
             QuestionData(
                 messageResId = R.string.quiz_03_question_03,
-                answers = listOf("3440", "3442", "3444", "3448"),
+                answerResId = R.array.quiz_03_question_03_answers,
                 answerIndex = 2
             ),
         )

diff --git a/app/src/arithmetic/res/values/strings.xml b/app/src/arithmetic/res/values/strings.xml
@@ -10,4 +10,58 @@
     <string name="quiz_03_question_01" translatable="false">１ X １ ＝ ？</string>
     <string name="quiz_03_question_02" translatable="false">８ X ８ ＝ ？</string>
     <string name="quiz_03_question_03" translatable="false">２８ X １２３ ＝ ？</string>
+    <string-array name="quiz_01_question_01_answers">
+        <item>2</item>
+        <item>3</item>
+        <item>4</item>
+        <item>5</item>
+        <item>6</item>
+    </string-array>
+    <string-array name="quiz_01_question_02_answers">
+        <item>12</item>
+        <item>16</item>
+        <item>18</item>
+    </string-array>
+    <string-array name="quiz_01_question_03_answers">
+        <item>155</item>
+        <item>152</item>
+        <item>151</item>
+        <item>150</item>
+    </string-array>
+    <string-array name="quiz_02_question_01_answers">
+        <item>2</item>
+        <item>8</item>
+        <item>1</item>
+        <item>0</item>
+    </string-array>
+    <string-array name="quiz_02_question_02_answers">
+        <item>2</item>
+        <item>0</item>
+        <item>1</item>
+        <item>8</item>
+    </string-array>
+    <string-array name="quiz_02_question_03_answers">
+        <item>-92</item>
+        <item>90</item>
+        <item>95</item>
+        <item>-95</item>
+    </string-array>
+    <string-array name="quiz_03_question_01_answers">
+        <item>2</item>
+        <item>8</item>
+        <item>1</item>
+        <item>0</item>
+    </string-array>
+    <string-array name="quiz_03_question_02_answers">
+        <item>2</item>
+        <item>64</item>
+        <item>1</item>
+        <item>8</item>
+    </string-array>
+    <string-array name="quiz_03_question_03_answers">
+        <item>3440</item>
+        <item>3442</item>
+        <item>3444</item>
+        <item>3448</item>
+    </string-array>
 </resources>
diff --git a/app/src/main/kotlin/com/leoleo/androidapptemplate/ui/quiz/CompactMainScreen.kt b/app/src/main/kotlin/com/leoleo/androidapptemplate/ui/quiz/CompactMainScreen.kt
@@ -41,6 +41,8 @@ internal fun CompactMainScreen(
         viewModel.changeUiState(throwable.message ?: "error.")
     }
 
+    val title = stringResource(id = viewModel.uiState.selectedQuestion.titleResId)
+
     CompactMainScreenStateless(
         modifier = modifier,
         snackbarHostState = snackbarHostState,
@@ -60,7 +62,7 @@ internal fun CompactMainScreen(
         },
         onClickAnswerButton = { index ->
             scope.launch(coroutineExceptionHandler) {
-                viewModel.changeUiState(pagerState.currentPage, index)
+                viewModel.changeUiState(pagerState.currentPage, index, title)
                 val msg =
                     if (viewModel.uiState.selectedQuestion.data[pagerState.currentPage].answerIndex == index) {
                         "Is the correct answer!"

diff --git a/app/src/main/kotlin/com/leoleo/androidapptemplate/ui/quiz/ExpandedMainScreen.kt b/app/src/main/kotlin/com/leoleo/androidapptemplate/ui/quiz/ExpandedMainScreen.kt
@@ -3,7 +3,9 @@ package com.leoleo.androidapptemplate.ui.quiz
 import android.widget.Toast
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -17,6 +19,7 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.leoleo.androidapptemplate.ui.component.AppSurface
 import com.leoleo.androidapptemplate.ui.component.ErrorContent
+import com.leoleo.androidapptemplate.ui.preview.PreviewTabletDevice
 import kotlinx.coroutines.CoroutineExceptionHandler
 import kotlinx.coroutines.launch
 
@@ -28,72 +31,123 @@ internal fun ExpandedMainScreen(
 ) {
     val drawerState = rememberDrawerState(DrawerValue.Closed)
     val pagerState = rememberPagerState()
-    val pagerScrollState = rememberScrollState()
     val scope = rememberCoroutineScope()
     val coroutineExceptionHandler = CoroutineExceptionHandler { _, throwable ->
         viewModel.changeUiState(throwable.message ?: "error.")
     }
     val context = LocalContext.current
+    val title = stringResource(id = viewModel.uiState.selectedQuestion.titleResId)
     BackHandler(enabled = drawerState.isOpen) { scope.launch { drawerState.close() } }
 
+    ExpandedMainScreenStateless(
+        modifier = modifier,
+        drawerState = drawerState,
+        uiState = viewModel.uiState,
+        pagerState = pagerState,
+        onClickDrawerItem = { index ->
+            viewModel.changeUiState(index)
+            scope.launch {
+                drawerState.close()
+                pagerState.scrollToPage(page = 0)
+            }
+        },
+        onClickResetButton = {
+            scope.launch(coroutineExceptionHandler) {
+                viewModel.resetUiState()
+                pagerState.scrollToPage(page = 0)
+            }
+        },
+        onClickAnswerButton = { index ->
+            scope.launch(coroutineExceptionHandler) {
+                viewModel.changeUiState(pagerState.currentPage, index, title)
+                val msg =
+                    if (viewModel.uiState.selectedQuestion.data[pagerState.currentPage].answerIndex == index) {
+                        "Is the correct answer!"
+                    } else {
+                        "Incorrect!"
+                    }
+                pagerState.scrollToPage(page = pagerState.currentPage + 1)
+                // TODO: できれば Android ViewのToastを辞めたい
+                Toast.makeText(context, msg, Toast.LENGTH_SHORT).show()
+            }
+        }
+    )
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+private fun ExpandedMainScreenStateless(
+    modifier: Modifier = Modifier,
+    drawerState: DrawerState,
+    uiState: QuizUiState,
+    pagerScrollState: ScrollState = rememberScrollState(),
+    pagerState: PagerState,
+    onClickDrawerItem: (Int) -> Unit,
+    onClickResetButton: () -> Unit,
+    onClickAnswerButton: (Int) -> Unit,
+) {
     AppSurface(modifier) {
         DismissibleNavigationDrawer(drawerState = drawerState, drawerContent = {
             DismissibleDrawerSheet {
                 Spacer(Modifier.height(12.dp))
                 Quiz.values().forEachIndexed { index, quiz ->
                     NavigationDrawerItem(
                         label = { Text(stringResource(id = quiz.titleResId)) },
-                        selected = quiz == viewModel.uiState.selectedQuestion,
-                        onClick = {
-                            viewModel.changeUiState(index)
-                            scope.launch {
-                                drawerState.close()
-                                pagerState.scrollToPage(page = 0)
-                            }
-                        },
+                        selected = quiz == uiState.selectedQuestion,
+                        onClick = { onClickDrawerItem(index) },
                         modifier = Modifier.padding(horizontal = 12.dp)
                     )
                 }
             }
         }, content = {
-            if (viewModel.uiState.errorMessage.isNullOrBlank()) {
+            if (uiState.errorMessage.isNullOrBlank()) {
                 MainContent(modifier = Modifier
                     .fillMaxSize()
                     .padding(8.dp)
                     .verticalScroll(pagerScrollState),
                     pagerState = pagerState,
-                    selectedQuestion = viewModel.uiState.selectedQuestion,
-                    isFinishedQuiz = viewModel.uiState.isFinishedQuiz,
-                    collectAnswerCount = viewModel.uiState.collectAnswerCount,
-                    onClickResetButton = {
-                        scope.launch(coroutineExceptionHandler) {
-                            viewModel.resetUiState()
-                            pagerState.scrollToPage(page = 0)
-                        }
-                    },
-                    onClickAnswerButton = { index ->
-                        scope.launch(coroutineExceptionHandler) {
-                            viewModel.changeUiState(pagerState.currentPage, index)
-                            val msg =
-                                if (viewModel.uiState.selectedQuestion.data[pagerState.currentPage].answerIndex == index) {
-                                    "Is the correct answer!"
-                                } else {
-                                    "Incorrect!"
-                                }
-                            pagerState.scrollToPage(page = pagerState.currentPage + 1)
-                            // TODO: できれば Android ViewのToastを辞めたい
-                            Toast.makeText(context, msg, Toast.LENGTH_SHORT).show()
-                        }
-                    })
+                    selectedQuestion = uiState.selectedQuestion,
+                    isFinishedQuiz = uiState.isFinishedQuiz,
+                    collectAnswerCount = uiState.collectAnswerCount,
+                    onClickResetButton = { onClickResetButton() },
+                    onClickAnswerButton = { index -> onClickAnswerButton(index) })
             } else {
                 ErrorContent(
                     modifier = Modifier
                         .fillMaxSize()
                         .wrapContentSize()
                         .padding(8.dp),
-                    errorMessage = viewModel.uiState.errorMessage ?: "error.",
+                    errorMessage = uiState.errorMessage,
                 )
             }
         })
     }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@PreviewTabletDevice
+@Composable
+fun Prev_ExpandedMainScreen_Initial() {
+    ExpandedMainScreenStateless(
+        drawerState = rememberDrawerState(DrawerValue.Closed),
+        uiState = QuizUiState(),
+        pagerState = rememberPagerState(),
+        onClickDrawerItem = {},
+        onClickResetButton = { },
+        onClickAnswerButton = {},
+    )
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@PreviewTabletDevice
+@Composable
+fun Prev_ExpandedMainScreen_Error() {
+    ExpandedMainScreenStateless(
+        drawerState = rememberDrawerState(DrawerValue.Closed),
+        uiState = QuizUiState(errorMessage = "error..."),
+        pagerState = rememberPagerState(),
+        onClickDrawerItem = {},
+        onClickResetButton = { },
+        onClickAnswerButton = {},
+    )
 }
diff --git a/app/src/main/kotlin/com/leoleo/androidapptemplate/ui/quiz/MainContent.kt b/app/src/main/kotlin/com/leoleo/androidapptemplate/ui/quiz/MainContent.kt
@@ -23,14 +23,13 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringArrayResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.hilt.navigation.compose.hiltViewModel
 import com.leoleo.androidapptemplate.R
 import com.leoleo.androidapptemplate.ui.component.AppSurface
-import com.leoleo.androidapptemplate.ui.component.ErrorContent
 import com.leoleo.androidapptemplate.ui.preview.PreviewPhoneDevice
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -43,7 +42,6 @@ internal fun MainContent(
     collectAnswerCount: Int,
     onClickResetButton: () -> Unit,
     onClickAnswerButton: (Int) -> Unit,
-    viewModel: MainContentViewModel = hiltViewModel()
 ) {
 
     Column(
@@ -70,25 +68,24 @@ internal fun MainContent(
             }
         }
 
-        viewModel.uiState.errorMessage?.let {
-            ErrorContent(
-                modifier = Modifier
-                    .wrapContentSize()
-                    .padding(12.dp), errorMessage = it
-            )
-        }
-
         AnimatedVisibility(isFinishedQuiz) {
             Column(horizontalAlignment = Alignment.CenterHorizontally) {
                 if (collectAnswerCount == selectedQuestion.data.size) {
-                    Text(stringResource(id = R.string.completed_msg), style = MaterialTheme.typography.titleLarge)
-                    viewModel.addCompleteData(stringResource(id = selectedQuestion.titleResId))
+                    Text(
+                        stringResource(id = R.string.completed_msg),
+                        style = MaterialTheme.typography.titleLarge
+                    )
                 }
-                Text(stringResource(id = R.string.format_finished_msg, formatArgs = arrayOf(collectAnswerCount)))
+                Text(
+                    stringResource(
+                        id = R.string.format_finished_msg,
+                        formatArgs = arrayOf(collectAnswerCount)
+                    )
+                )
                 Button(onClick = { onClickResetButton() }) { Text(stringResource(id = R.string.retry)) }
             }
         }
-        selectedQuestion.data[pagerState.currentPage].answers.forEachIndexed { index, answerText ->
+        stringArrayResource(id = selectedQuestion.data[pagerState.currentPage].answerResId).forEachIndexed { index, answerText ->
             Button(
                 onClick = { onClickAnswerButton(index) },
                 modifier = Modifier.fillMaxWidth(), enabled = !isFinishedQuiz,