compose

- 이전에 Image 컴포저블을 활용하여 중첩된 원형 프로필 이미지를 구현했었다. - 하지만 프로필 이미지가 기본 drawable이 아니고, File이나 네트워크로부터 수신받아야 하는 경우가 있다. - 이 경우에 Coil의 AsyncImage를 활용하여 보여주도록 처리했다.//A composable that executes an ImageRequest asynchronously and renders the result.@Composablefun AsyncImage( model: Any?, contentDescription: String?, modifier: Modifier = Modifier, transform: (State) -> State = DefaultTransform, ..

- 이미지를 중첩시키고 싶다면 Box 컴포저블을 사용하면 된다. Z 축으로 쌓이는 컨테이너 구조이다. - Image 말고 다른 컴포저블들도 중첩된다.@Composablefun Avatar(~~) { Box( modifier = Modifier.wrapContentSize() ) { Image(~~~) Image( painter = painterResource(id = R.drawable.abc), contentDescription = "Profile", modifier = Modifier .size(size.dp) .padding(3.5.dp) ..

- 위와 같은 형태의 동적 가이드를 Compose 기반으로 구현했다. - 애니메이션을 제공하는 JSON 파일의 경우, 디자이너분으로부터 제공받은 점 참고. - JSON 파일의 경우 res - raw 폴더를 생성하여 넣어주면 된다. (압축하지 않고, 변형 없이 앱에 들어가야 하는 파일들) - 영상을 보면, JSON 애니메이션이 바로 나타나는게 아니라 서서히 페이드인 되면서 나타난다. - 이를 위해 Compose의 AnimatedVisibility를 활용한다.AnimatedVisibility( visible = showGuide, enter = fadeIn(animationSpec = tween(1500)), exit = ExitTransition.None) { ...- 뷰의 가시성을 조정할..

- Ripple은 Android 5.0 (21) 머터리얼 디자인에 소개되었으며, 버튼을 클릭하였을 때, 물결이 퍼지듯이 효과가 나오는 기능이다.- Compose에서도 지원하고 있다. Modifier를 기반으로 적용 가능하다.@Composablepublic fun rememberRipple( bounded: Boolean = true, radius: Dp = Dp.Unspecified, color: Color = Color.Unspecified): Indication { val colorState = rememberUpdatedState(color) return remember(bounded, radius) { PlatformRipple(bounded, radius,..

- FAB란 앱의 주요 인터페이스 위에 둥둥 떠있다 하여 붙여진 이름으로서 앱의 기본 대표 동작들을 수행할 수 있도록 하는 버튼이다. - 보통 화면 오른쪽 하단에 둥근 사각형, 타원, 원으로 많이 표시된다.- 디자인 시스템 및 커스터마이징에 적합하도록 Compose 기반 직접 해당 버튼을 구현했다. - 먼저 상위 컴포저블로 Surface를 사용해준다.Surface( modifier = Modifier .size(52.dp) .clip(CircleShape) .clickable( interactionSource = interactionSource, indication = rememberRipple( ..

- 페이징 라이브러리를 사용한 것은 아니고, 파라미터로 page: Int를 보내고 response로 hasNext: Boolean을 수신받을 수 있는 형태의 api에서 페이징을 자체 코드로 간단하게 구현한 예시다.상단 구성 - Scaffold 구조로 상단에 TopAppBar를 가지고 내부 content로 리스트를 가지는 화면에서 페이징을 구성했다.Scaffold(topBar = { TopAppBar(modifier = Modifier.padding(start = 12.dp), title = { Text() }, navigationIcon = { IconButton(modifier = Modifier .size..

Places Api (New) 활용- 사내 프로젝트에 예전부터 Places SDK가 적용되어 위치 검색 기능을 담당하고 있었는데, 어느 시점부터 아래와 같이 오류가 표시되는 지역들이 증가하기 시작했다.- Google Places API(신규)는 기존 Places API를 대체하는 서비스로, 장소 검색, 자동완성, 상세 정보 조회, 좌표 변환 등의 기능을 제공한다. 그리고 데이터가 등록된 장소 개수 자체도 훨씬 많은 것으로 알고 있다. - 기존에 사용하고 있던 API Key가 있다면 Places Api (New)를 사용으로 설정한 뒤, 제한 목록에 추가해 주면 된다.- 신규, 기존 상관없이 적어도 아래 목록은 키 제한 API 목록에 포함시켜야한다. 그렇지 않다면 권한 거부 오류가 발생한다.Places SD..

Expandable menu위처럼 클릭할 때마다 열렸다 닫혔다를 반복하는 메뉴 레이아웃 구성 방법입니다.Compose의 AnimatedVisibility를 활용하여 간단하게 Expand 효과를 적용할 수 있습니다.기본 작동 방식visible: Boolean 값을 통해 콘텐츠의 표시 여부를 결정합니다.애니메이션 효과: 요소가 보이거나 사라질 때 애니메이션 효과를 자동으로 적용합니다.@Composablefun ColumnScope.AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandVertically(), exit: ExitTransition..

토글이라고도 불리우는 스위치는 기능을 켜고 끄는 로직에서 많이 사용되는 컴포넌트입니다.기존 Material 방식의 스위치 디자인신규 Compose Material3 방식의 스위치 디자인토글 색상 속성을 수정한다면 SwitchDefaults.colors를 통해 설정해줄 수 있습니다.Switch( checked = isChecked, onCheckedChange = onCheckedChange, colors = SwitchDefaults.colors( checkedThumbColor = colorResource(R.color.colorPrimary), uncheckedThumbColor = colorResource(R.color.unActiveBackground) ..

참여하고 있는 개발 커뮤니티에서 기회가 생겨서..부족하지만 발표를 진행했었습니다.사내에 디자인 시스템을 도입하면서 알게 된 디자인 시스템의 개념과 장점, 그와 동시에 Compose를 최초 도입하면서 알게 된 부분들을 개발 분야에 상관없이 다른 분도 이해하실 수 있는 발표를 진행해 봤습니다.이해가 되셨을지는 모르겠으나 ㅎㅎ..;; 몇 가지 주요한 부분들만 올려보자면아토믹 디자인 시스템의 단계적 구성과 그를 각 조합에 맞게 구현한 예시를 보여주는 장면입니다.XML에서 구현한 컴포넌트를 자유롭게 활용하여 조합하고 사용할 수 있습니다. Compose의 개념과 장점, 그리고 컴포즈 내 변수에서 항상 보이는 mutableStateOf()와 remember에 대한 이야기입니다.리컴포지션 개념리컴포지션은 상태가 변경될..