Compose11

• 

  [Compose] LazyColumn vs Column, 같은 컴포넌트인데 Press 효과가 다르게 동작한다? 문제 상황최근 업무 중 각 컴포넌트를 클릭했을 때 동작이 다르다는 이슈가 나왔었다.각 동작을 확인해봤을 때클릭과 동시에 Press 효과가 바로 적용됨클릭 시에는 효과가 없고, Press 상태일 때 약간 뒤에야 효과가 들어옴같은 라디오 버튼이 있는 컴포넌트였지만 동작이 다른 것을 확인할 수 있다. 두 동작을 분석한 결과, case1의 경우 Column, case2의 경우 LazyColumn이 각 컴포넌트를 감싸고 있었다.// case1val listState = rememberLazyListState()LazyColumn( modifier = Modifier.fillMaxSize(), state = listState) { itemsIndexed(radioOptions) { index, te.. Android/Compose 2025. 9. 7.

• 

  [Compose] Compose Text Text 선택 일반적으로 Composable은 선택할 수 없다. 다음과 같은 코드가 있을 때 결과를 보자. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeStudyTheme { Surface( modifier = Modifier .width(200.dp) .height(100.dp), color = MaterialTheme.colors.background ) { TextStudy() } } } } } @Composable fun TextStudy() { Text("Example Str.. Android/Compose 2023. 7. 18.

• 

  [Compose] LazyColumn이란? LazyColumn이란? android developer에서 lazy column은 다음과 같이 정의되어 있다. 현재 표시된 항목만 구성하고 배치하는 세로 스크롤 목록입니다. 이 content블록은 다양한 유형의 항목을 내보낼 수 있는 DSL을 정의합니다. LazyListScope.item예를 들어 단일 항목을 추가하고 LazyListScope.items항목 목록을 추가하는 데 사용할 수 있습니다 . 이 설명을 읽어보면 "RecyclerView"가 떠오를 것이다. LazyColumn은 세로로 아이템을 표시하고, LazyRow는 가로로 아이템을 표시한다. LazyColumn의 원형 @Composable fun LazyColumn( modifier: Modifier = Modifier, state: Lazy.. Android/Compose 2023. 7. 11.

• 

  [Compose] @Preview 분석 Android의 Jetpack Compose는 @Preview 어노테이션을 통해 미리보기를 지원한다. 그렇다면 @Preview 어노테이션은 어떻게 구성되어 있을까? 이번 글에서는 이에 대해 알아보고자 한다. @Preview 어노테이션 구성 @Preview 어노테이션의 구성은 다음과 같다. @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, // TODO(mount): Make this Dp when they are inline classes val widthDp: Int = -1, // TODO(mount): Make this .. Android/Compose 2023. 6. 27.

• 

  [Compose] Compose의 Side-Effect(3) 이전 포스팅에서 이어서 작성. https://jjunsu.tistory.com/383 [Compose] Compose의 Side-Effect(2) Compose의 Side-Effect(1) 이전 내용에서 이어서 작성. https://jjunsu.tistory.com/382 [Compose] Compose의 Side-Effect(1) Compose의 부수 효과 부수 효과는 구성 가능한 함수의 범위 밖에서 발생하는 앱 상태에 관한 변 jjunsu.tistory.com derivedStateOf: 하나 이상의 상태 객체를 다른 상태로 변환 특정 상태가 계산되거나 다른 상태 개체에서 파생되는 경우 derivedStateOf를 사용한다. derivedStateOf를 사용하면 계산에 사용된 상태 중 하나가 변경될 .. Android/Compose 2023. 5. 15.

• 

  [Compose] Compose의 Side-Effect(2) Compose의 Side-Effect(1) 이전 내용에서 이어서 작성. https://jjunsu.tistory.com/382 [Compose] Compose의 Side-Effect(1) Compose의 부수 효과 부수 효과는 구성 가능한 함수의 범위 밖에서 발생하는 앱 상태에 관한 변경사항이다. 즉 자신이 아닌 외부의 상태에 영향을 만드는 것이다. 예측할 수 없는 리컴포지션 또는 jjunsu.tistory.com DisposableEffect: 정리가 필요한 효과 키가 변경되거나 Composable을 종료한 후 정리가 필요할 때 DisposableEffect를 사용한다. 예를 들어, LifecycleObserver를 사용하여 Lifecycle 이벤트를 기반으로 애널리틱스 이벤트를 전송할 때 Compos.. Android/Compose 2023. 5. 9.

• 

  [Compose] Compose의 Side-Effect(1) Compose의 부수 효과 부수 효과는 구성 가능한 함수의 범위 밖에서 발생하는 앱 상태에 관한 변경사항이다. 즉 자신이 아닌 외부의 상태에 영향을 만드는 것이다. 예측할 수 없는 리컴포지션 또는 예상과는 다른 Composable의 리컴포지션 실행, 삭제할 수 없는 리컴포지션 등의 속성과 Composable의 수명 주기로 인해 부수 효과가 없는 것이 좋다. 하지만 스낵바를 표시하거나 특정 상태 조건에 따라 다른 화면으로 이동하는 등 일회성 이벤트를 트리거할 때 부수 효과가 필요하기도 하다. Composable에서 Composable이 아닌 앱 상태에 대한 변화를 주는 것이므로 양방향 의존성으로 인해 예측할 수 없는 Effect가 생길 수 있다. 이 Effect를 Side Effect(부수 효과)라고 한다.. Android/Compose 2023. 4. 25.

• 

  [Compose] Compose에서의 상태 단순히 행과 열, 버튼을 생성하는 것은 정적 레이아웃에 해당한다. 이제 사용자에 의해 변경사항이 있을 때마다 화면과의 상호작용을 하는 동적 레이아웃을 알아보자. @Composable fun Greeting(name: String) { var expanded = false Surface( modifier = Modifier.padding(24.dp) ) { Row( modifier = Modifier .padding(24.dp) .border(1.dp, Color.Black) ) { Column(Modifier.padding(3.dp)) { Text(text = "Hello, ") Text(name) } ElevatedButton(onClick = {expanded = !expanded} ) { Text(.. Android/Compose 2023. 4. 3.

• 

  [Compose] Composable 재사용 우리는 코드를 작성할 때 흔히 함수를 사용하고 한다. 함수를 사용하는 이유는 무엇일까? 가독성을 좋게하기 위해 여러 곳에서 같은 기능이 사용된다면, 하나의 함수로 만들어 재사용하기 위해 Compose Function 또한 함수와 같이 재사용이 가능하다. UI에 구성요소가 증가할수록 중첩되는 레벨이 오르며, 가독성이 떨어질 수 있다. 이를 해결하기 위해 작은 구성요소로 만들어 UI 요소의 라이브러리로 쉽게 만들 수 있다. 예시를 들어보자. @Composable fun Greeting(name: String) { Surface(color = MaterialTheme.colorScheme.primary) { Text(text = "Hello $name!", modifier = Modifier.padding(2.. Android/Compose 2023. 3. 27.

• 

  [Compose] Surface, Modifier, Row, Column, 버튼 생성 Surface Surface는 요소를 감싸는 컨테이너의 역할을 한다. 사용법은 다음과 같다. @Composable fun Greeting(name: String) { Surface(color = MaterialTheme.colorScheme.primary) { Text(text = "Hello $name!") } } 위에서도 말했듯이 요소를 감싸는 컨테이너의 역할을 하므로 색상을 지정할 수 있다. 색상을 지정하지 않으면 기본 흰 화면으로 보이게 된다. Modifier Surface가 요소를 감싸는 컨테이너라면, Modifer는 레이아웃, 색상 등 스타일을 수정할 수 있도록 해준다. modifer는 Surface와 Text 등 대부분의 Compose UI 요소에서 선택적으로 매개변수로서 허용된다. 사용법을.. Android/Compose 2023. 3. 27.

• 

  [Compose] Compose란? 학교 동아리를 진행하며 안드로이드를 공부하던 중, 동아리 내에서의 Compose 스터디를 시작하게 되었다. Compose 스터디에 참여하게 된 계기는 단순히 ui를 만들던 중 Compose를 사용하면 좀 더 쉽게 만들 수 있다는 얘기를 들어서였다. Compose를 공부할 겸 겸사겸사 알아가는 내용들을 적어볼 것이다. 첫 번째 내용으로는 "Compose란 무엇인가?"부터 시작하려고 한다. Compose란? 우선 UI의 방식에 대해 알아보면, UI에는 선언형 UI와 명령어 UI가 있다고 한다. 둘의 차이점을 다음과 같이 예로 들어볼 수 있을 것 같다. (내가 생각해본 것이라 맞을지는 잘 모르겠다.) 선언형 UI: 내 방의 벽지는 초록색이고 거울, 모니터, 화장품이 있어. 명령형 UI: 내 방에 초록 벽지를 .. Android/Compose 2023. 3. 19.