시작하기.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge() // 핸드폰의 앳지사용이 표시된다.
}
수정자와 뷰 기본
/* compose 수정자
* 컴포저블의 크기,레이아웃,동작및 모양 크기를 변경한다.
* 접근성 라벨과 같은 정보를 추가한다.
* 사용자 입력 처리
* 요소 클릭 가능,스크롤 가능, 드래그 가능 또는 확대축소 가능하게 만드는 상호작용을 추가한다.
*/
// modifier 예제
//뷰를 그리는 방법
@composable
fun exampleView(name:String ){
// Column -> 세로배치
// Row -> 가로배치
// Box -> 다른요소 위에배치
Column(
//생성자추가 가능
modifiter = Modifiter
.padding(10.dp) //이런식으로 크기조절 가능
.verticalArrangement = Arrangement.spacedBy(8.dp) //정렬
//참고사이트 정렬 "https://nosorae.tistory.com/entry/AndroidCompose-%ED%97%B7%EA%B0%88%EB%A0%A4%EC%84%9C-%EB%94%B1-%EC%A0%95%EB%A6%AC%ED%95%98%EB%8A%94-Compose-%EC%A0%95%EB%A0%ACAlignment%EA%B3%BC-%EB%B0%B0%EC%B9%98Arrangement"
){
//작성가능한 뷰 아이템 들
//Button , spacer , Text , Card , Dialog , LazyRow 등등
Text( text = "This is a full screen dialog",textAlign = TextAlign.Center )
TextButton(onClick = { onDismissRequest() }) { Text("Dismiss") }
}
리사이클러뷰
//jetpack compose 의 리사이클러뷰
@Composable
fun CustomRecyclerView(profiles: List<profile>) {
LazyRow(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
content = {
itemsIndexed(profiles) { index, user ->
CustomUserProfile(
id = user.id,
name = user.name,
age = user.age,
nickName = user.nickName,
hobby = user.hobby
)
}
})
}
@Composable
fun CustomUserProfile(id: Int, name: String, age: Int, nickName: String, hobby: String) {
Card(
modifier = Modifier
.padding(20.dp, 150.dp)
.wrapContentWidth()
.height(130.dp)
.wrapContentWidth(Alignment.Start),
shape = RoundedCornerShape(15.dp),
elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
colors = CardDefaults.cardColors(
containerColor = Color(0xFFECEFF1),
)
) {
Row(
modifier = Modifier
.fillMaxHeight()
.padding(top = 12.dp, bottom = 12.dp, start = 12.dp, end = 30.dp),
verticalAlignment = Alignment.CenterVertically
) {
// 프로필 이미지나 아이콘을 여기에 넣을 수 있습니다.
/* Icon(
imageVector = Icons.Filled.AccountCircle,
contentDescription = "Profile",
modifier = Modifier
.size(60.dp)
.padding(4.dp),
tint = Color.Gray
)*/
Spacer(modifier = Modifier.width(12.dp))
Column {
Text(
text = "# $id",
style = TextStyle(
color = Color.Black,
fontSize = 22.sp,
fontWeight = FontWeight.Bold
)
)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = "$name a.k.a $nickName",
style = TextStyle(
color = Color.Black,
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = "Age: $age",
style = TextStyle(
color = Color.DarkGray,
fontSize = 14.sp
)
)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = "Hobby: $hobby",
style = TextStyle(
color = Color.DarkGray,
fontSize = 14.sp
)
)
}
}
}
}
다이얼로그 띄우기
@Composable
fun DialogExamples() {
var currentProgress = remember { mutableStateOf(0f) }
val openAlertDialog = remember { mutableStateOf(false) }
val fullScreenDialog = remember { mutableStateOf(false) }
var loading = remember { mutableStateOf(false) }
val scope = rememberCoroutineScope() // Create a coroutine scope
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(
modifier = Modifier
.padding(20.dp)
.fillMaxWidth()
.height(200.dp)
)
Button(
onClick = {
loading.value = true
scope.launch {
loadProgress {progress ->
currentProgress.value = progress
}
fullScreenDialog.value = !fullScreenDialog.value
}
loading.value = false
}, enabled = !loading.value) {
Text("Alert dialog component with buttons")
}
if(loading.value){
LinearProgressIndicator(
progress = currentProgress.value,
modifier = Modifier.fillMaxWidth()
)
}
Button(
onClick = { openAlertDialog.value = !openAlertDialog.value }
) {
Text("Alert dialog component with buttons")
}
}
when {
openAlertDialog.value -> {
MinimalDialog(
onDismissRequest = { openAlertDialog.value = false },
)
}
fullScreenDialog.value -> {
FullScreenDialog(
onDismissRequest = { fullScreenDialog.value = false },
)
}
}
}
@Composable
fun MinimalDialog(onDismissRequest: () -> Unit) {
Dialog(onDismissRequest = { onDismissRequest() }) {
Card(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.padding(16.dp),
shape = RoundedCornerShape(16.dp),
) {
Text(
text = "This is a minimal dialog",
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center),
textAlign = TextAlign.Center,
)
}
}
}
@Composable
fun FullScreenDialog(onDismissRequest: () -> Unit) {
Dialog(
onDismissRequest = { onDismissRequest() },
properties = DialogProperties(
usePlatformDefaultWidth = false,
dismissOnBackPress = true,
),
) {
Surface(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.surfaceVariant),
) {
Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "This is a full screen dialog",
textAlign = TextAlign.Center,
)
TextButton(onClick = { onDismissRequest() }) {
Text("Dismiss")
}
}
}
}
}