분류 전체보기

Compose의 Lists란 무엇인가? Compose의 Lists란 컴포넌트들을 Scrollable하게 수직 또는 수평으로 배치하는 Composable을 뜻한다. 이를 만들기 위해서는 Column 혹은 Row를 사용할 수 있다. 이번 글에서는 Column을 이용해 Lists를 만드는 작업을 한다. Column을 Lists로 만들기 위해 어떤 작업이 필요한가? Column은 모든 자식 Composable을 수직으로 배치하는 Compose Layout이다. Column을 List로 만들기 위해서는 몇가지 선행 작업이 필요하다. Column을 내부 컴포넌트를 배치하는 작업과 Column의 Modifier을 이용해 Column이 scroll 가능하게 만드는 작업이다. *Column에 Scroll을 결합한 것은 ..

remember이란 Compose는 State값이 바뀌면 Recomposition(재구성)이 일어난다. 이때 이전 State를 기억해야 하는 경우 remember을 이용해 값을 저장할 수 있다. 예를 들어 아래와 같이 remember 없이 textState를 저장할 경우 값이 입력될 때마다 State가 바뀌어 Recomposition이 일어나 textState에 다시 mutableStateOf("")이 세팅되게 된다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val textState = mu..

Stateless한 Compose의 TextField TextField란 텍스트를 입력하는 UI이다. 이 UI는 두가지 부분으로 구성된다. 텍스트를 입력하는 부분(User Interaction) 텍스트를 저장하는 부분(State) 텍스트를 입력하려면 TexrField에 입력된 Text의 상태(State)가 있어야 한다. 기존의 xml에서의 TextField는 Stateful해서 자신의 Text 상태를 직접 저장했다. 즉 위 두가지 부분이 모두 TextField에 존재했다. 하지만, Compose는 Stateless하기 때문에 TextField에는 Text의 상태를 저장하는 공간이 없다. 즉, Compose의 TextField는 텍스트를 입력하는 부분만 있고, 텍스트를 저장하는 부분이 없다. Textfie..

Scaffold란? Snackbar을 원하는대로 만들기 위해서는 Scaffold Layout을 알아야 한다. Scaffold란 Material Component들을 편하게 사용할 수 있도록 하기 위해 미리 디자인된 레이아웃이다. Snackbar도 Material Component이므로 Compose에서 Snackbar을 기존 Snackbar의 동작대로 이용하기 위해서는 Scaffold State로 감싸야 한다. 만약 Scaffold로 감싸지 않으면 보통의 Composable과 똑같이 동작한다. Snackbar 만들기 Snackbar을 만들기 위한 Composable을 먼저 정의해보자. 우리의 목표는 TextField와 Button을 두고 Button을 눌렀을 때 TextField 속의 Text가 Snac..

이번 글에서는 하나의 modifier에서 여러개의 border을 만드는 방법을 살펴본다. Modifier에 중첩 border만들기 하나의 Modifier에 여러개의 border을 적용시키는 방법은 간단하다. border사이에 padding을 주면 border을 여러개 중첩해서 만들 수 있다. *내부 로직은 너무 깊은 내용이므로 이 글에서 다루지 않는다. 자 바깥부터 5dp씩 파란색, 빨간색, 초록색 순서로 border을 만들어보자. border 사이에 padding을 주면 중첩해서 border을 만들 수 있다. @Preview(showBackground = true, widthDp = 200, heightDp = 200) @Composable fun KotlinWorldColor() { Column( m..