[Android Kotlin] Compose (1-2 Ex1~2) Button, AlertDialog

1. 예제

(1) OneWeekSecondEx1

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            OneWeekSecondEx1Theme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                }
            }
        }
    }
}

@Composable
fun LikeButton(){
    Button(onClick = { /*TODO*/ },
        contentPadding = PaddingValues(
            start = 20.dp,
            top = 12.dp,
            end = 20.dp,
            bottom = 12.dp
        )
    ) {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = "Favorite",
            modifier = Modifier.size(ButtonDefaults.IconSize)
        )
        Spacer(Modifier.width(ButtonDefaults.IconSpacing))
        Text("Like")
    }
}

@Preview(name = "light")
@Preview(name = "dark", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun LikeButtonPreview() {
    OneWeekSecondEx1Theme {
        Surface(color = MaterialTheme.colorScheme.background) {
            LikeButton()
        }
    }
}

//1주차 2번째 수업 실습#1 Dialog 구현
@Composable
fun ConfirmDialog() {
    AlertDialog(onDismissRequest = { /*TODO*/ },
        title = {
            Row() {
                Icon(
                    imageVector = Icons.Default.Face,
                    contentDescription = null,
                    modifier = Modifier.align(Alignment.CenterVertically)
                )
                Text(text = "제목")
            }
        },
        text = {
            Text(text = "내용")
        },
        confirmButton = {
            Button(onClick = { /*TODO*/ }) {
                Text(text = "확인")
            }
        },
        dismissButton = {
            Button(onClick = { /*TODO*/ }) {
                Text(text = "취소")
            }
        }
    )
}

@Preview(name = "light")
@Preview(name = "dark", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun ConfirmDialogPreview() {
    OneWeekSecondEx1Theme {
        Surface(color = MaterialTheme.colorScheme.background) {
            ConfirmDialog()
        }
    }
}

 

(2) OneWeekSecondEx2

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            OneWeekSecondEx2Theme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PaymentScreen() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "결제 수단 등록")
                },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(imageVector = Icons.Outlined.ArrowBack, contentDescription = null)
                    }
                }
            )
        }
    ) { paddingValues ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            Icon(
                imageVector = Icons.Filled.CheckCircle,
                contentDescription = null,
                modifier = Modifier
                    .size(100.dp)
                    .align(Alignment.Center),
                tint = Color.Blue
            )
        }
    }
}

@Preview(name = "light")
@Preview(name = "dark", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PaymentScreenPreview() {
    OneWeekSecondEx2Theme {
        Surface(color = MaterialTheme.colorScheme.background) {
            PaymentScreen()
        }
    }
}

 

2. Button, AlertDialog

(1) Button

• onClick : 클릭시 이벤트
• contentPadding : 여백
  • start : 왼쪽여백
  • top : 위쪽 여백
  • end : 오른쪽 여백
  • bottom : 아래쪽 여백

 

(2) AlertDialog

• title : 제목
• text : 내용
• confirmButton : 확인버튼
• dismissButton : 취소버