compose view practice

compose_prac.kt

@Composable
fun LoginScreen(
    navController: NavHostController,
    modifier: Modifier = Modifier,
    viewModel: ApiViewModel,
    context: Context
) {
    var id by remember {
        mutableStateOf("")
    }
    var password by remember {
        mutableStateOf("")
    }
    val coroutineScope = rememberCoroutineScope { Dispatchers.IO }
    fun login() {
        val imm: InputMethodManager =
            (context as Activity).getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
        var view = (context as Activity).currentFocus
        if(view == null){
            view = View(context)
        }
        imm.hideSoftInputFromWindow(view.windowToken,0)
        coroutineScope.launch {
            val rs = viewModel.login(id, password, "4mation")
            rs.filterResponse { exc, code, apiError ->
                Log.d(":LoginScreen", "LoginScreen: $apiError")
            }.data?.let {
                Log.d(":LoginScreen", "LoginScreen: $it")
            }

        }
    }
    val focusRequester = remember { FocusRequester() }
    fun paddingBottomModifier(bottom: Int) = modifier
        .fillMaxWidth()
        .padding(bottom = bottom.dp)
    Box(modifier = modifier.padding(20.dp)) {
        Column {
            Image(
                modifier = paddingBottomModifier(40),
                painter = painterResource(id = R.drawable.mation_logo_top),
                contentScale = ContentScale.Crop,
                contentDescription = null
            )

            OutlinedTextField(
                value = id,
                onValueChange = {
                    id = it
                },
                label = {
                    Text("ID")
                },

                modifier = paddingBottomModifier(10),
                maxLines = 1,

                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
                keyboardActions = KeyboardActions(onNext = {
                    focusRequester.requestFocus()
                }),
                singleLine = true


            )

            OutlinedTextField(
                value = password,
                onValueChange = {
                    password = it
                },
                label = {
                    Text(text = "PW")
                },
                modifier = paddingBottomModifier(40).focusRequester(focusRequester),
                maxLines = 1,
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Password,
                    imeAction = ImeAction.Done
                ),
                keyboardActions = KeyboardActions(onDone = {
                    login()
                }),
                visualTransformation = PasswordVisualTransformation(),
                singleLine = true

            )

            ExtendedFloatingActionButton(
                text = { Text(text = "로그인") },
                onClick = {
                    login()
                },
                modifier = Modifier
                    .align(CenterHorizontally)
                    .width(200.dp)
            )
        }
    }
}
@Composable
fun TalkPostItem(
    post: TalkPost,
    clickListener: (Int) -> Unit
) {

    post.apply {
        Card(
            modifier = Modifier
                .wrapContentHeight()
                .fillMaxWidth()
                .padding(10.dp)
                .clickable {
                      clickListener(post.talk_no)
                }
            ,
        ) {
            Column(modifier = Modifier.padding()) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()

                        .height(dimensionResource(id = R.dimen.post_profile_height))
                        .padding(top = 10.dp, start = 10.dp, end = 10.dp)

                ) {
                    Image(
                        painter = rememberImagePainter(data = "${API.CDN}${profile.profileImage}"),
                        contentDescription = null,
                        modifier = Modifier
                            .height(dimensionResource(id = R.dimen.post_profile_height))
                            .clip(RoundedCornerShape(30.dp)),
                    )
                    Row(modifier = Modifier.padding()) {
                        Column(
                            modifier = Modifier
                                .fillMaxHeight()
                                .padding(start = 3.dp)
                        ) {
                            Text(talk_nickname, modifier = Modifier.padding(top = 2.dp))
                            Text(text = talk_username)
                        }
                    }
                    Text(
                        text = talk_datetime.substringBefore("T"),
                        modifier = Modifier
                            .weight(1f)
                            .padding(2.dp),

                        textAlign = TextAlign.End
                    )
                }
                if (talk_mainimage.isNotEmpty()) {
                    Image(
                        painter = rememberImagePainter(data = "${API.CDN}${talk_mainimage[0]}"),
                        contentDescription = null,
                        modifier = Modifier
                            .align(Alignment.End)
                            .fillMaxWidth()
                            .height(200.dp)
                            .padding(top = 10.dp), contentScale = ContentScale.Crop
                    )
                }
                Text(
                    text = talk_content,
                    modifier = Modifier.padding(start = 10.dp, top = 10.dp, end = 10.dp)
                )
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(10.dp)
                        .height(30.dp)
                        .layoutId("talk_bottom_row")
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.insert_comment_24_px),
                        contentDescription = null,
                        modifier = Modifier.fillMaxHeight(),
                        contentScale = ContentScale.Crop
                    )

                    Text(
                        text = comment_count.toString(),
                        modifier = Modifier
                            .align(CenterVertically),
                        textAlign = TextAlign.Center,

                        )

                }
            }
        }


    }
}
class NavActivity : AppCompatActivity() {
    private val viewModel by viewModels<ApiViewModel> {
        ApiViewModelFactory(MainBoardRepository(MainService.service))
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()

            val stateCurrentThemeMode = remember {
                mutableStateOf(SettingRadio.Light)
            }
            val context = LocalContext.current
            SampleTheme(darkTheme = stateCurrentThemeMode.value == SettingRadio.Night) {
                NavApp(navController = navController, viewModel, stateCurrentThemeMode, context)

            }
        }
    }
}

@Composable
fun NavApp(
    navController: NavHostController,
    viewModel: ApiViewModel,
    stateCurrentThemeMode: MutableState<SettingRadio>,
    context: Context,
) {

    val tabPosition = remember {
        mutableStateOf(TestScreen.One.name)
    }

    SampleTheme(darkTheme = stateCurrentThemeMode.value == SettingRadio.Night) {
        Column {
            Row(modifier = Modifier.fillMaxWidth()) {

                listOf("Main", "One", "Two", "Three", "Login").forEachIndexed { idx, value ->
                    Box(
                        modifier = Modifier
                            .background(
                                color = if (tabPosition.value == value) {
                                    Color.Green
                                } else {
                                    Color.White
                                }
                            )
                            .clickable {
                                navController.navigate("${value}/${idx}")
                                tabPosition.value = value
                            }

                            .padding(10.dp)
                            .weight(1f)
                    ) {
                        Text(
                            text = value,
                            modifier = Modifier
                                .fillMaxWidth(),
                            textAlign = TextAlign.Center,
                        )
                    }
                }
            }

            TestNavHost(
                navController = navController,
                Modifier.fillMaxWidth(),
                viewModel,
                stateCurrentThemeMode,
                context
            )
        }
    }
}
@Composable
fun MainScaffold(stateCurrentThemeMode: MutableState<SettingRadio>, context: Context) {
    val scaffoldState = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()
    val stateLike = remember {
        mutableStateOf(false)
    }
    val stateClickMessage = remember {
        mutableStateOf("")
    }
    val stateToggle = remember {
        mutableStateOf(false)
    }

    val stateCheckBoxList = remember {
        mutableStateListOf(false, false, false)
    }
    val stateTextSize = remember<MutableState<Float>> {
        mutableStateOf(0f)
    }



    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {
            Text(text = "drawer")
        },
        topBar = {
            TopAppBar(
                title = { Text(text = "top app bar") },
                navigationIcon = {
                    IconButton(onClick = {
                        coroutineScope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "drawer_menu"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { stateClickMessage.value = "play icon" }) {
                        Icon(
                            imageVector = Icons.Filled.PlayArrow,
                            contentDescription = "topAppbar_play"
                        )
                    }
                    IconToggleButton(checked = stateLike.value, onCheckedChange = {
                        stateLike.value = it
                        stateClickMessage.value = if (it) "Liked" else "Disliked"
                    }) {
                        val tint by animateColorAsState(targetValue = if (stateLike.value) Color.Red else Color.LightGray)
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "topAppbar_like",
                            tint = tint
                        )
                    }

                    Box {
                        IconButton(onClick = {
                            stateToggle.value = true
                            stateClickMessage.value = "more"
                        }) {
                            Icon(
                                imageVector = Icons.Default.MoreVert,
                                contentDescription = "topAppbar_more"
                            )
                        }

                        DropdownMenu(
                            expanded = stateToggle.value,
                            onDismissRequest = {
                                stateToggle.value = false
                            },
                            modifier = Modifier.width(300.dp)
                        ) {

                            arrayOf(
                                "First",
                                "Second",
                                "Third",
                                "Four",
                                "Five"
                            ).forEachIndexed { idx, el ->
                                when (idx) {
                                    3 -> {
                                        DropdownMenuItem(onClick = {
                                            stateClickMessage.value = "more / radio"
                                        }) {
                                            RadioGroupCompose(
                                                currentSelected = stateCurrentThemeMode,
                                            )
                                        }
                                    }
                                    4 -> {
                                        DropdownMenuItem(onClick = {
                                            stateClickMessage.value = "more / progress"
                                        }) {
                                            Column(modifier = Modifier.width(300.dp)) {
                                                Text("Text size")
                                                Slider(
                                                    value = stateTextSize.value,
                                                    onValueChange = {
                                                        stateTextSize.value = it
                                                    },
                                                    modifier = Modifier.size(300.dp, 30.dp)
                                                )
                                            }
                                        }
                                    }
                                    else -> {
                                        DropdownMenuItem(onClick = {
                                            stateClickMessage.value = el
                                        }) {
                                            Row(modifier = Modifier.fillMaxWidth()) {
                                                Text(el, modifier = Modifier.weight(1f))
                                                Checkbox(
                                                    checked = stateCheckBoxList[idx],
                                                    onCheckedChange = {
                                                        stateClickMessage.value = "more / $el"
                                                        stateCheckBoxList[idx] = it
                                                    })
                                            }
                                        }
                                    }
                                }
                            }

                        }

                    }
                },
            )
        },
        bottomBar = {
            BottomAppBar(cutoutShape = CircleShape) {
            }
        },

        ) {

        Log.d(":MainScaffold", "MainScaffold: ${stateTextSize.value}")
        Column() {
            Text(
                text = stateClickMessage.value,
                fontSize = (20 + stateTextSize.value * 50).sp,
                modifier = Modifier.clickable {
                    context.startActivity(Intent(context, TestActivity::class.java))

                }

            )

        }

    }

}
@Composable
fun TestNavHost(
    navController: NavHostController,
    modifier: Modifier = Modifier,
    viewModel: ApiViewModel,
    stateCurrentThemeMode: MutableState<SettingRadio>,
    context: Context,
) {
    val skipState = remember {
        mutableStateOf(0)
    }
    val allListState = remember {
        mutableStateListOf<Post>()
    }
    LaunchedEffect(skipState) {
        val listDto = viewModel.getAllPost(skip = skipState.value)
        if (skipState.value == 0) {
            allListState.clear()
        }
        allListState.addAll(listDto.recent)
    }
    NavHost(
        navController = navController,
        startDestination = TestScreen.One.name + "/{${NavArgs.pos}}",
        modifier = modifier
    ) {
        composable(
            TestScreen.Main.name + "/{${NavArgs.pos}}",
            arguments = listOf(navArgument(NavArgs.pos) { type = NavType.StringType })
        ) {
            val pos = it.arguments?.getString(NavArgs.pos)
            MainScaffold(stateCurrentThemeMode = stateCurrentThemeMode, context = context)
        }
        composable(
            TestScreen.One.name + "/{${NavArgs.pos}}",
            arguments = listOf(navArgument(NavArgs.pos) { type = NavType.StringType })
        ) {
            val pos = it.arguments?.getString(NavArgs.pos)
            Log.d(":TestNavHost", "TestNavHost: $pos")
            OneScreen(
                navController = navController, modifier = Modifier
                    .padding(10.dp)
                    .fillMaxWidth(), list = allListState
            )
        }
        composable(
            TestScreen.Two.name + "/{${NavArgs.pos}}",
            arguments = listOf(navArgument(NavArgs.pos) { type = NavType.StringType })
        ) {
            val pos = it.arguments?.getString(NavArgs.pos)
            Log.d(":TestNavHost", "TestNavHost: $pos")
            TwoScreen(
                navController = navController, modifier = Modifier
                    .padding(10.dp)
                    .fillMaxWidth()
            )
        }

        composable(
            TestScreen.Three.name + "/{${NavArgs.pos}}",
            arguments = listOf(navArgument(NavArgs.pos) { type = NavType.StringType })
        ) {
            val pos = it.arguments?.getString(NavArgs.pos)
            Log.d(":TestNavHost", "TestNavHost: $pos")
            ThreeScreen(
                navController = navController, modifier = Modifier
                    .padding(10.dp)
                    .fillMaxWidth()
            )
        }
        composable(
            TestScreen.Login.name + "/{${NavArgs.pos}}",
            arguments = listOf(navArgument(NavArgs.pos) { type = NavType.StringType })
        ) {
            val pos = it.arguments?.getString(NavArgs.pos)
            Log.d(":TestNavHost", "TestNavHost: $pos")
            LoginScreen(
                navController = navController,
                modifier = Modifier
                    .padding(10.dp)
                    .fillMaxWidth(),
                viewModel,
                context
            )
        }

    }

}