compose 8

Android에서 Props Drilling을 해결해보자 with SnackBar

이 내용을 설명하기에 앞서 Props Drilling이라는 개념을 처음 들어보는 분들이 있을수도 있다.그래서 해당 개념에 대해서 간단하게 설명하고, 내가 Android에서 어떻게 Props Drilling을 방지했는지 이야기 해보겠다.  Props Drilling이란?React에서 나온 개념이다.Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정을 의미한다. 매개변수로 특정 값을 계속해서 내려주는 것이라 생각하면 된다. 아래 예시를 보면 이해가 될 것이다.@Composablefun test1() { test2 { // SHOW ACTION }}..

AsyncImage를 Preview에서 보는 3가지 방법

Android 개발을 하다보면 URL 이미지를 화면에 나타내기 위해 라이브러리들을 주로 사용할 것이다. Glide, Coil 등등 다양한 라이브러리가 존재하고 이를 사용하다보면 Compose에서 불편한게 딱 하나 있다.  Preview에서 이미지 영역이 안나온다.물론 이미지를 제외한 나머지 영역의 크기를 보고 대충 이미지가 저기 안에 들어가겠구나~ 생각할 수는 있지만, 앱을 실행하지 않고도 Preview에서 정확하게 테스트 하고 싶은 마음이 든다. 그렇기에 이를 해결하기위해 적용해본 3가지 방법을 공유하고자 한다. 제가 적용한 모든 방법은 Coil 기준으로 작성되었습니다.아마... Glide도 될껄요...?  1. PlaceHolderCoil을 사용할 때 사용되는 AsyncImage의 속성을 사용했다. ..

[Android Compose] Scroll과 imePadding을 같이 쓰면 제대로 동작을 안한다구요?

문제상황Column에 ScrollState를 넣어주고, 내부에 TextField를 여러개 넣어뒀다.그 후 키보드 높이 조정을 위해 adjustResize 설정을 한 후 imePadding을 넣어줬지만, 제대로 동작하지 않는다.문제 영상  정확히는 아래에 있는 TextField가 보일 정도로 올라오긴 하지만, 내가 원하는 만큼 더 위로 올라오진 않는다. 찾아보니 LazyColumn, Column에 verticalScroll을 넣어준다면 이런 오류가 존재한다는 것을 찾았다.https://issuetracker.google.com/issues/229628557 Google Issue Tracker issuetracker.google.com22년부터 이렇다는데 좀 고쳐주지 참...  뭐 구글이 이러는게 하루이..

SOPT 35th 안드로이드파트 미미나 - Navigation과 Stack 관리

1. 왜 Navigation을 쓸까? with SAAXML의 Activity기반 뷰에서는 위와 같이 Intent로 화면을 이동했어요.  하지만, 2018 Google I/O에서 Single Activity라는 개념을 언급했어요Single activity: Why, when, and how (Android Dev Summit '18) Single Activity라는 개념은 기존의 액티비티 기반의 화면 구성이 아닌, 소수의 액티비티와 다수의 프래그먼트를 이용해 화면을 구성하는 구조로 jetpack navigation과 함께 소개되었어요.  근데 지금까지 Activity와 Fragment 기반으로 잘 사용해왔는데 왜 굳이 바꾸는걸까요? 제일 큰 이유는 Activity보다 Fragment가 더 가벼워요. 공식문..

대외활동/SOPT 2024.10.12

분명히 텍스트 높이 지정했다니까요??? - Android Compose LineHeight Error

최근 프로젝트를 진행하며 100% Compose로 Android를 구현하였다.XML에서 하는 것 처럼 작업을 했지만, Compose에서는 다르다는 것을 깨달았던 LineHeight에 대해서 글을 써보려고 한다.   기존에 XML에서 코드를 작성했던 방식은 아래와 같다.ttf혹은 otf를 추가하고, 폰트 패밀리를 만들어준다.    그 후 value/appearance에서 아래와 같이 Text들의 설정을 해준다.색상, 폰트 패밀리, 텍스트 사이즈 등을 설정하고, paddingVertical을 활용하여 LineHeight를 지정해준다.   이렇게 XML에서 설정해봤었고, 비슷한 방법으로 Compose에서도 이번에 설정해보고자 했다.Compose로 구현하고자 레퍼런스로 DroidknightsApp과 sopt-a..

BounceClick을 Compose에서 수식과 함께 구현해보자 with Animation

최근 프로젝트를 하나 하며 디자이너의 요구사항을 하나 받았다.Button을 클릭했을 때 Bunce Click을 구현해달라 하더라.  사용자가 클릭을 했을 때 scale이 작아지고, 위에 검은색 filter가 생겨야 한다. 그리고 손을 뗀다면 다시 원래대로 돌아와야 한다.  이 기능을 구현하기 위해 제일 첫 단계로 Modifier의 확장함수를 만들기 시작했다.@Composablefun Modifier.bounceClick(): Modifier = composed {} 특정 버튼에 해당 기능을 넣어둔다면 다른 버튼에 넣어달라 할 때 마다 버튼부터 새로 만들어야 할 것이다. 그렇게 된다면 자연스럽게 너무 많은 시간이 들게되고, 비효율적이게 된다고 생각한다.  그래서 Modifier의 확장함수를 만들고 이를 적..

Android 2024.07.19

[Android] Type Safety Navigation With Compose

Compose에서 화면을 전환하기 위해서는 Navaigation 사용이 필수적이다.하지만 예전 버전의 경우 Route를 String으로 지정해줘야 하는 불편함이 있었다. 그런 불편함을 개선하고 새로 나온 Type Safety Navigation의 사용법과 주의점을 소개하고자 한다.    Dependencies"androidx.navigation:navigation-compose:2.8.0-beta04" // 2.8.0-alpha01 부터 가능"org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.0" // kotlin 2.0"org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3" // kotlin 1.9.22이렇게 두개..

SOPT 34th 안드로이드파트 미미나 - Well Made Component

안녕하세요. SOPT 34기 안드로이드 파트 OB 박동민입니다. 이번 안드로이드 파트에서는 Android의 최신 기술인 Compose를 도입하였습니다. 그렇다보니 XML에 익숙한 많은 분들이 헷갈려하시고, 방향을 잡지 못하시는 것 같아 조금이나마 도움을 드리고자 미미나를 하게 되었습니다. 오늘 공유하고자 하는 내용은 Component를 "잘" 만드는 방법입니다. 목차 Compose UI의 구조 Composable을 재사용해보자 State Hoisting이란 뭐고 왜 적용해야 할까? Slot API이란 뭐고 왜 적용해야 할까? Compose UI의 구조 Compose 공식문서에서 위와 같이 Compose의 Layout은 Node로 구성되어있다고 설명되어있다. 즉, Compose는 Tree구조를 가지고 있다..

대외활동/SOPT 2024.04.08