Remember, Row/Column, TextField 사용하기

변현섭·2023년 9월 25일

요즘 대세? Jetpack Compose!

목록 보기

2/4

이번 포스팅에서 학습해 볼 기능은 remember입니다. 먼저 remember란, 상태를 관리하고 보존하는 데 사용되는 함수 중 하나입니다. remember 함수를 사용하면 Composable 함수 내에서 데이터를 보관 및 유지할 수 있으며, 화면이 다시 그려질 때에도 데이터가 유지됩니다. 지금부터 remember 함수 사용법에 대해 알아보도록 하겠습니다.

1. remember 사용하기

① MainActivity에 아래의 Composable 함수를 추가한다.

@Composable
fun CounterButton() {
    var count by remember {
        mutableStateOf(0)
    }

    Button(onClick =  {
        count++
    },
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = "Count : " + count,
            fontSize = 50.sp
        )
    }
}

② setContent에서 CounterButton을 호출한다.

setContent {
    ChromeApplicationTheme {
        CounterButton()
    }
}

③ GreetingPreview 메서드도 아래와 같이 수정한다.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ChromeApplicationTheme {
        CounterButton()
    }
}

코드를 실행시켜보면, 버튼을 클릭할 때마다 Count가 1씩 올라가는 것을 확인할 수 있을 것이다.

2. 세로로 나열하기

1) Column이 필요한 이유

Text를 단순하게 나열하면, 같은 위치에 Text가 표시되기 때문에 글자가 겹쳐보이는 문제가 발생한다. 예를 들어, 아래와 같은 Composable 함수가 있다고 하자.

@Composable
fun test() {
    Text(
        text = "안녕하세요",
        fontSize = 30.sp,
    )
    Text(
        text = "크롬입니다",
        fontSize = 30.sp,
    )
}

이 함수를 Preview에서 호출한 결과가 아래와 같다.

기존 xml 방식에서는 LinearLayout의 orientation을 vertical로 설정하는 방식으로 나열했었다. 반면, Jetpack Compose에서는 Coloumn을 사용하여 세로로 나열한다.

2) Column 사용법

① Column으로 Text를 감싸면 된다.

@Composable
fun test() {
    Column() {
        Text(
            text = "안녕하세요",
            fontSize = 30.sp,
        )
        Text(
            text = "크롬입니다",
            fontSize = 30.sp,
        )
        Text(
            text = "반갑습니다",
            fontSize = 30.sp,
        )
    }
}

② Column에 padding을 줄 수도 있다.

Column(
        modifier = Modifier.padding(30.dp)
    ) {
        Text(
        	...

③ Spacer를 이용하면, 두 Text 요소 사이에 padding을 적용할 수도 있다.

Spacer는 레이아웃에서 공간을 만들어 주어야 할 때 사용한다.

Text(
    text = "안녕하세요",
    fontSize = 30.sp,
)

Spacer(
    modifier = Modifier.padding(15.dp)
)

Text(
    text = "크롬입니다",
    fontSize = 30.sp,
)

Spacer(
    modifier = Modifier.padding(25.dp)
)

Text(
    text = "반갑습니다",
    fontSize = 30.sp,
)

④ Spacer와 Divider를 조합하여 Text 요소 사이에 구분 선을 만들 수 있다.

Divider는 레이아웃에서 선을 그려야 할 때 사용한다.

Text(
    text = "안녕하세요",
    fontSize = 30.sp,
)

Spacer(
    modifier = Modifier.padding(15.dp)
)

Divider(
    thickness = 5.dp,
    color = Color.Red
)

Spacer(
    modifier = Modifier.padding(15.dp)
)

Text(
    text = "크롬입니다",
    fontSize = 30.sp,
)

3. 가로로 나열하기

Column과 동일한 방식으로 Row를 사용하면 된다.

@Composable
fun RowPractice() {
    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Blue),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "안녕하세요",
            style = androidx.compose.ui.text.TextStyle(background = Color.Yellow),
            fontSize = 20.sp
        )

        Text(
            text = "크롬입니다",
            style = androidx.compose.ui.text.TextStyle(background = Color.Red),
            fontSize = 20.sp
        )

        Text(
            text = "반갑습니다",
            style = androidx.compose.ui.text.TextStyle(background = Color.White),
            fontSize = 20.sp
        )
    }
}

업로드중..

4. 유저의 입력을 받는 Text 요소 생성하기

기존 xml 방식에서는 사용자의 입력을 받는 Text 요소로, EditText 또는 TextInputEditText를 사용했었다. 이와 마찬가지로, Jetpack Compose에서는 TextField를 사용하여 사용자 입력을 받을 수 있다.

1) TextField

MainActivity에 아래의 Composable 메서드를 추가한다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldTest() {

    var textState by remember {
        mutableStateOf("Chrome")
    }

    TextField(
        value = textState,
        onValueChange = {
            textState = it
        },
        label = {
            Text(text = "사용자 입력")
        }
    )
}

textState: TextField의 현재 텍스트 값을 저장하고 관리하며, 초기 값은 "Chrome"으로 설정된다.
onValueChange: TextField의 값이 변경될 때, textState 변수를 해당 값으로 업데이트한다. 즉, 사용자의 입력이 TextField에 그대로 나타난다.
label: TextField 위에 나타나는 레이블 텍스트를 설정한다.

2) OutlinedTextField

위 코드의 TextField를 OutlinedTextField로 수정해보자.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldTest2() {

    var textState by remember {
        mutableStateOf("Chrome")
    }
    OutlinedTextField(
        value = textState,
        onValueChange = {
            textState = it
        },
        label = {
            Text(text = "사용자 입력")
        }
    )
}

보다시피 텍스트 입력 필드를 테두리로 둘러싼다.

3) 사용자의 입력 값을 알아내기

MainActivity에 아래의 메서드를 추가한다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldTest3() {

    var textState by remember {
        mutableStateOf("")
    }

    var resultState by remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TextField(
            value = textState,
            onValueChange = {
                textState = it
            }
        )

        Button(
            onClick = {
                resultState = textState
            }
        ) {
            Text(text = "입력 완료")
        }

        Text(
            text = "사용자 입력 : " + resultState
        )
    }
}