===== 소개 =====

다음과 같이 옆에 라벨이 있는 이미지 스위치 버튼을 구현하였다.  

[[android:고소해앱개발일지|고소해 앱]]에서 사용하고 있다. 

{{:android:switchbutton.png?600|switch button}} 


===== 스니펫 ===== 

내가 만든 코드이다. 

<code kotlin>
@Composable
fun switchButton(inputValue : Boolean, inputText : String) : Boolean {
    var checked by remember { mutableStateOf(inputValue) }

    OutlinedCard(modifier = Modifier.padding(vertical = 6.dp),
        colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surfaceVariant),
        border = BorderStroke(1.dp, Color.Black),)
    {
        Column(modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp), horizontalAlignment = Alignment.Start) {
            Text(text = inputText, style = MaterialTheme.typography.headlineSmall, modifier = Modifier.padding(vertical = 4.dp))
            Row(modifier = Modifier.padding(vertical = 5.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically) {
                Text(text = if (checked) {"예"} else {"아니오"}, style = MaterialTheme.typography.titleMedium, modifier = Modifier
                    .padding(vertical = 4.dp)
                    .weight(0.5f), textAlign = TextAlign.Center)
                Switch(
                    checked = checked,
                    onCheckedChange = {
                        checked = it
                    },
                    modifier = Modifier.weight(0.5f),
                    thumbContent = if (checked) {
                        {
                            Icon(
                                imageVector = Icons.Filled.Check,
                                contentDescription = null,
                                modifier = Modifier.size(SwitchDefaults.IconSize),
                            )
                        }
                    } else {
                        {   Icon(
                            imageVector = Icons.Filled.Close,
                            contentDescription = null,
                            modifier = Modifier.size(SwitchDefaults.IconSize),
                        )}
                    }
                )
            }
        }
    }


    return checked
}
</code> 


===== 실 사용례 =====

다음과 같이 사용하고 있다.  

<code kotlin>
ElevatedCard(elevation = CardDefaults.cardElevation(defaultElevation = 6.dp), modifier = Modifier
    .fillMaxWidth()
    .padding(6.dp)) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp), horizontalAlignment = Alignment.Start
    ) {

        sueItem.relatedCivilCase = switchButton(sueItem.relatedCivilCase, "1. 발달 장애 등 조사를 받는데 어려움이 있나요?")

        sueItem.sameCase = switchButton(sueItem.sameCase, "2. 같은 사건으로 고소한 적이 있나요?")

        sueItem.wantPunishment = switchButton(sueItem.wantPunishment, "3. 피고소인이 처벌 받기 원하시나요?")

        sueItem.wantSettlement = switchButton(inputValue = sueItem.wantSettlement, inputText = "4. 피고소인이 합의를 원하면 합의하실 생각이 있나요?")

        sueItem.understandingFalseAccusation = switchButton(
            inputValue = sueItem.understandingFalseAccusation ,
            inputText = "5. 허쉬사실을 고소하였을 대에는 무고죄(형법 156조)로 처벌받을 것임을 서약합니다."
        )

    }
}

</code>