compose

선형 그러데이션- horizontal Gradient를 사용하여 구현@Composablefun LinearGradientExample() { val colorStops = arrayOf( 0.0f to Color.Yellow, 0.2f to Color.Red, 1.0f to Color.Blue ) Box( modifier = Modifier .size(200.dp) .background(Brush.horizontalGradient(colorStops = colorStops)) )}방사형 그러데이션- 중심 점에서 바깥 방향으로 퍼지는 그라데이션 효과로, radialGradient를 사용하면 된다...
- Glide는 다양한 형식과 빠른 이미지 로딩을 지원하는 이미지 라이브러리다. - Coil 또한 마찬가지다. 하지만 두 라이브러리 간에는 미세한 차이가 있어 구현 방식에 따라 선택할 수 있다고 본다. - 먼저 Glide는 스레드 풀 기반으로 동작한다. 이미지 요청이 들어오면 미리 만들어 둔 스레드 한 개를 할당해서 작업을 시키고, 쌓이는 대로 순차적 처리를 진행한다. 한 번에 캐싱 처리 없이 많은 요청이 들어올 경우 메모리에 부담을 줄 수 있다. - 하지만 그만큼 리소스 로딩에 대한 다양한 메서드를 제공하고, Gif 같은 형식을 로드할 때도 단순하게 사용하면 된다.@OptIn(ExperimentalGlideComposeApi::class)@Composablefun GlideWidgetImage() {..
- 기존 다음과 같은 EditTextBox 형식의 검색 바를 통해 검색어 입력 후, 키보드의 검색 버튼을 누르면 결과 확인이 가능한 로직이 있었다.Row(verticalAlignment = Alignment.CenterVertically) { OutlinedTextField( value = searchQuery, onValueChange = { searchQuery = it }, modifier = Modifier .weight(1f) .padding(end = 8.dp), placeholder = { Text("지하철역 검색") }, singleLine = true, keyboardO..
Scaffold란?- Scaffold는 TopBar, BottomBar, FAB 등 전용 슬롯을 가지고 화면의 뼈대를 만들어주는 컴포저블이다.@Composablefun Scaffold( modifier: Modifier = Modifier, topBar: @Composable () -> Unit = {}, bottomBar: @Composable () -> Unit = {}, snackbarHost: @Composable () -> Unit = {}, floatingActionButton: @Composable () -> Unit = {}, floatingActionButtonPosition: FabPosition = FabPosition.End, containerC..
- 최근 개인 제작 앱을 구글 플레이 스토어에 등록 심사를 요청했는데, ACCESS_FINE_LOCATION 권한에 대한 허가가 필요한 이유를 사용자에게 구체적으로 제공해야 한다고 하여 거절당했다. - 가볍게 Toast로 위치 권한이 필요합니다. 정도로는 납득시킬 수 없고, 적절한 기능 예시와 함께 사용자에게 권한 허가를 요청해야했다. - 먼저 해당 권한에 대한 기능 관련 화면 스크린숏을 3장 정도 수집했다. 그리고 drawable에 추가. - 나는 수평 슬라이드 페이징을 통해 예시 화면을 보여주고자 했다. - 대충 슬라이드 페이징 - 제목 - 설명 - Yes or No 버튼을 수직으로 배치하고자 Column을 최상단에 약간의 padding을 넣어 선언했다.Column( modifier = Modi..
- Compose에서는 이미 렌더링 된 UI를 갱신하기 위해 상태 변경이 일어날 때마다 필요한 부분들을 다시 그리는 Recomposition이라는 메커니즘을 사용한다. - 리컴포지션은 상세하게 Composition -> Layout -> Drawing 세 가지 단계를 거친다. - 리컴포지션이 발생하면 Compose는 Composition 단계부터 새롭게 시작하며, 여기서 컴포저블 노드는 UI 변경 사항을 Compose Runtime에 알리고, 업데이트된 UI가 최신 상태를 반영하도록 보장한다. - 리컴포지션이 발생하는 조건은 다음과 같다.1. 매개변수에 변경이 발생했을 때2. 상태 변경이 관찰되었을 때 - Composition의 주요 작업• @Composable 함수 실행• UI 트리 생성 및 업데이트..
- Jetpack Compose는 개발자가 상태 변경 시 UI를 어떻게 업데이트할지를 나타내는 것이 아닌, 특정 상태에서 UI가 어떻게 보여야 하는지를 설명하는 선언적 UI 프레임워크의 특성을 가지고 있다. - 이는 개발자가 뷰를 데이터의 변화에 따라 수동으로 업데이트해야 하는 명령형 접근 방식과는 차이가 있는 것이다. - 예를 들어 서버로부터 어떤 데이터가 내려왔고, 그 데이터를 UI에 반영해 주려면 UI 레벨에서는 API 호출이 완료된 시점을 체크하여 refresh() 함수를 구현해서 재호출 해야 할 수 있다. - 하지만 Compose의 경우에는 데이터 자체를 State로 관찰하여 즉시 시스템이 UI에 반영할 수 있도록 한다. 선언형 UI 특징- 상태 주도 UI : 시스템은 각 컴포넌트의 상태를 추적..
- API 호출을 통해 리스트 화면을 갱신하는 구조의 MainActivity가 있는데, 수동 동기화 버튼이 존재하지만 사용자에게 더 편리함을 주기 위해 다른 앱에 있다가 다시 해당 앱으로 복귀하면 자동으로 동기화해주는 기능이 필요했다. - 아래와 같은 Compose 기반의 화면으로 구성되어 있었고, 갱신 시 viewModel에서 새로운 값을 가져온다.@AndroidEntryPointclass MainActivity : ComponentActivity() { private val stationViewModel: StationViewModel by viewModels() private val subwayArrivalViewModel: SubwayArrivalDataViewModel by viewM..
- 안드로이드에는 위젯 인스턴스 하나마다 고유한 ID를 가진다. 이게 AppWidgetId이다. - 바탕화면에 똑같은 위젯 두 개를 생성해도 개별 ID는 다르다. 이를 통해 서로 바라보는 데이터를 달리할 수 있다. - 예를 들어 A-1 위젯에서는 Key + A-1-AppWidgetId로 1번 데이터를, A-2 위젯에서는 Key + A-2-AppWidgetId로 2번 데이터를 저장하고 렌더링 할 수도 있는 것이다. - 기존 XML RemoteViews 방식 위젯에서는 아래와 같이 AppWidgetId 조회가 가능하다.override fun onUpdate( context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntAr..
- Glance에서 Image 컴포저블 자체에 Alpha 값을 적용할 수는 없다. 그래서 애초에 ImageProvider에 리소스를 넘길 때 알파 값이 적용된 리소스여야 한다. - 알파값 적용된 비트맵은 아래 확장함수를 구현하여 기존 비트맵에서 알파를 적용한 비트맵을 다시 그리도록 했다.fun Bitmap.withAlpha(alpha: Float): Bitmap { val result = createBitmap(width, height) val canvas = Canvas(result) val paint = Paint().apply { this.alpha = (alpha * 255).toInt() } canvas.drawBitmap(this, 0f, 0f, paint) retu..
SeungYong.Lee
'compose' 태그의 글 목록