[Android Kotlin] Compose (2-1 Ex1) 상태관리, LazyRow

1. 예제

(1) TowWeeFirstEx1

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
        }
    }
}

//2주차 1번째수업 실습1
@Composable
fun DeveloperTypeSurvey() {
    val developers =listOf(
        Developer(R.string.developer_type_android),
        Developer(R.string.developer_type_ios),
        Developer(R.string.developer_type_web),
        Developer(R.string.developer_type_server),
    )
    Column(
        modifier = Modifier.selectableGroup()
    ){
        var selectedType: Developer by remember{ mutableStateOf(developers.first())} //기본 몇번째 선택인지
        developers.forEach {
            RadioTextButton(
                text = stringResource(id = it.type),
                selected = (selectedType == it),
                onClick ={ selectedType = it }
            )
        }
    }
}

@Composable
fun RadioTextButton(
    text: String,
    selected: Boolean,
    onClick: () -> Unit
) {
    Surface(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .selectable(
                selected = selected,
                onClick = onClick,
                role = Role.RadioButton
            ),
        shape = MaterialTheme.shapes.small,
        border = BorderStroke(
            width = 1.dp,
            color = if (selected) {
                MaterialTheme.colorScheme.primary
            } else {
                MaterialTheme.colorScheme.outline
            }
        )
    ){
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ){
            RadioButton(selected = selected, onClick = null)
            Text(
                text = text,
                modifier = Modifier
                    .padding(start = 16.dp)
                    .align(Alignment.CenterVertically)
            )
        }
    }
}

@Composable
fun TextList2() {
    val itemsList = (0..5).toList()
    val itemsIndexedList = listOf("A", "B", "C")

    LazyRow {
        items(itemsList) {
            Text("Item is $it")
        }

        item {
            Text("Single item")
        }

        itemsIndexed(itemsIndexedList) { index, item ->
            Text("Item at index $index is $item")
        }
    }
}

@Composable
fun TextList(){
    val itemList = (0..5).toList()
    val itemsIndexedList = listOf("A", "B", "C")

    LazyColumn{
        items(itemList){
            Text(text = "Item is $it")
        }
        item {
            Text(text = "Single item")
        }

        itemsIndexed(itemsIndexedList){
                index, item -> Text(text = "Item at index $index is $item")
        }
    }
}

@Preview
@Composable
fun DeveloperTypeSurveyPreview() {
    DeveloperTypeSurvey()
}

@Preview
@Composable
fun TextList2Preview(){
    TextList2()
}

@Preview
@Composable
fun TextListPreview(){
    TextList()
}

선택시 라디오 버튼이 활성화 되어 클릭되고 해당 클릭된 Developer는 remember에 저장된다. forEach는 for문과 같이 비슷하게 동작하는 것 처럼 보이나 실제로 각각의 developers 리스트의 값의 데이터를 연결해주는 홀더같은 역할을 한다.

 

2. 상태관리, LazyRow

(1) 상태관리

기본적인 상태관리 예제이다 하기와 같이 3가지 방법이 있으며, 상기 예제에서는 2번째 방법을 사용했다. Compose는 remember함수를 사용하여 단일 객체를 메모리에 저장할 수 있다.

val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }

 

(2) LazyRow

• items : item들을 모두 순서대로 출력한다. for문과 비슷
• item : item을 한번만 출력
• itemsIndexed : index와 item을 같이 출력