[Android, Kotlin] Compose UI 정리(2)

지난 포스팅

https://rkdrkd-history.tistory.com/41

[Android, Kotlin] Compose UI 정리(1)

 

이번 포스팅에서는 필자가 xml을 사용할 때 자주 사용하는 뷰들을 compose로 작성해보겠다.

---

2. 다양한 뷰 작성

1. edit text

TextField를 사용해 텍스트 입력 칸을 구현할 수 있다.

@Composable
fun Greeting2(name: String) {
    Text(text = name)
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview2() {
    ComposeUITheme {
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(120.dp)) {

            Column(modifier = Modifier.padding(15.dp)) {
                Greeting2("Hello")
                val text = remember { mutableStateOf("") }
                TextField(value = text.value, onValueChange = { textValue -> text.value = textValue })
            }
        }
    }
}

보기 편하게 Box 안에서 작업을 했고, padding도 15dp만큼 주었다.

설정한 텍스트와 TextField가 잘 나타난 것을 볼 수 있다.

 

실행 화면

 

2. imageView

이미지 뷰를 그리는 방법은 Image를 사용해서 그릴 수 있다.

@Composable
fun ImageView() {
    Image(painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = null   // 필수 요소
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview2() {
    ComposeUITheme {
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(120.dp)
            .padding(15.dp)) {

            ImageView()
        }
    }
}

image 안에 contentDescription은 쓰지 않으면 오류가 나기 때문에 꼭 써놓도록 하자.

 

실행 화면

 

이미지의 크기 조절 방법

@Composable
fun ImageView() {
    Image(painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = null,
        modifier = Modifier.width(150.dp).height(150.dp)
    )
}

modifier 안에 width와 height를 각각 입력해주었다.

 

실행 결과

 

예제 1

로그인 페이지 만들기

@Preview(showBackground = true)
@Composable
fun DefaultPreview2() {
    ComposeUITheme {
        Box(modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()) {

            Column(modifier = Modifier.align(Alignment.Center)) {
                Image(painter = painterResource(id = R.drawable.practice_example_1),
                    contentDescription = null,
                    modifier = Modifier
                        .width(150.dp)
                        .height(150.dp)
                        .align(Alignment.CenterHorizontally)
                        .offset(y = (-20).dp))

                val text = remember { mutableStateOf("") }
                val password = remember { mutableStateOf("") }
                // 비밀번호 보이게 하는 여부
                var passwordVisibility by remember { mutableStateOf(false) }
                val icon = if (passwordVisibility) {
                    painterResource(id = R.drawable.ic_baseline_visibility_24)
                } else painterResource(id = R.drawable.ic_baseline_visibility_off_24)
                // 이메일
                TextField(value = text.value, onValueChange = { textValue -> text.value = textValue },
                    label = {Text(text = "email")}, modifier = Modifier.offset(y = (-10).dp))
                // 비밀번호
                TextField(value = password.value, onValueChange = { textValue -> password.value = textValue },
                    label = {Text(text = "password")},
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
                    trailingIcon = {
                        IconButton(onClick = {
                            passwordVisibility = !passwordVisibility
                        }) {
                            Icon(painter = icon, contentDescription = null)
                        }
                    },
                    visualTransformation = if (passwordVisibility) VisualTransformation.None
                    else PasswordVisualTransformation()
                )
            }
        }
    }
}

TextField 속성

• keyboardOptions: 키보드의 속성을 정의한다.(비밀번호, 숫자, 이메일 등등)
• trailingIcon: 텍스트를 visibility를 설정하는 icon을 설정하게 해 준다.
• visualTransformation: 텍스트의 visibility을 설정한다.

text와 password의 mutableState를 따로 설정한 이유는하나만 사용하면 1개의 TextField의 텍스트를 입력할 때 다른 TextField의 값이 자동으로 설정 중인 값으로 바뀌기 때문이다.

 

실행 결과

텍스트 visibility가 잘 설정되었다.