본문 바로가기

728x90
반응형

Android/Jetpack Compose

(5)
[Jetpack Compose] Scaffold와 Surface의 차이점 Scaffold와 Surface는 Jetpack Compose로 UI 레이아웃을 구성할 때 자주 사용되는 2가지 주요 구성 요소이다.Scaffold와 Surface의 기능과 예시, 그리고 차이점에 대해 정리해보려고 한다.  1. Scaffold- Scaffold는 Material Design의 기본 레이아웃 구조를 구현하는 데 사용된다.- 전체 화면의 주요 UI 컴포넌트를 배치할 수 있는 프레임워크를 제공하여 앱의 구조를 쉽게 설정할 수 있다. - 주로 앱의 메인 레이아웃을 설정할 때 사용된다.    - 예: 상단 앱바, 하단 네비게이션 바, 플로팅 액션 버튼을 포함한 화면을 구성할 때 유용하다. 특징1. 앱바: topBar 파라미터를 사용하여 화면 상단에 앱바를 배치할 수 있다. 2. 하단 바: bot..
[Jetpack Compose] LazyVerticalGrid에 대한 StickyHeader 만들기 다음의 XML 코드로 된 GridView에 대해 StickyHeader UI Effect를 만들고 싶었다.  하지만 Jetpack Compose는 StickyHeader를 LazyColumn에 대해서만 제공하고 있었고,Vertical Scroll(수직 스크롤)이 있는 Column 주변에 LazyColumnGrid를 사용하려 했더니 다음과 같은 오류가 발생했다.  it's wrong to nest two scrollable views in the same direction.  심지어 item{}에 대해 를 사용해봤지만 item{}은 GridView 내의 아이템이 될 뿐이고 하나의 행이 되지 않았다.  그래서 LazyVerticalGrid에 대해서 구현하려면 직접 확..
[Jetpack Compose] Circular Indicator 로딩뷰 만들기 개발한 앱의 로딩뷰를 직접 만들어보고 싶어서 만들어봤다.Jetpack Compose Material 3에서 제공하는 CircularProgressIndicator를 활용했다.(Jetpack Compose 1.9.3 기준)@Composablefun LoadingIndicator() { Box( modifier = YourSize, contentAlignment = YourAlignment ) { CircularProgressIndicator( modifier = YourSize, color = YourFavoriteColor, strokeWidth = YourWidth, track..
[Jetpack Compose] LazyRow, LazyColumn에 대해서 View System에서 Jetpack Compose로 넘어오면서 눈에 띄는 것들 중 하나가 LazyRow와 LazyColumn이다. 필자는 LazyRow와 LazyColumn가 뭔지 알기 전에 두 단어가 무슨 뜻을 내포하고 있는지를 먼저 알아두는게 순서라고 생각한다.  Lazy의 의미와 특징Jetpack Compose에서 LazyRow와 LazyColumn의 "Lazy"는 데이터 항목(UI로 표현되는 데이터 단위)를 지연 생성(lazy loading)하는 방식과 관련이 있다. 이는 성능 최적화를 위해 불필요한 항목을 미리 생성하지 않고, 화면에 보여야 할 항목 만 생성하는 것을 의미한다. 즉, "항목의 지연 생성"이라고 생각하면 된다. 좀 더 자세히 살펴보면,화면에 보이는 항목만 생성되고, 스크롤 시 ..
[Jetpack Compose] Text Visibility 만들기 View System과 달리 Jetpack Compose에서는 컴포넌트의 visibility 속성을 제공하지 않는다.그래서 직접 구현해야 했다. 필자는 Gone 값이 필요한데, 잘 생각해보면 이는 Modifier의 size로 해보면 된다.이 아이디어를 바탕으로 Modifier의 확장함수를 다음과 같이 구현해봤다. fun Modifier.visibility(isVisible: Boolean): Modifier = if (isVisible) this else this.then(Modifier.size(0.dp)) 생각보다 요긴하게 잘 쓰고 있다. 구독과 공감(♡)은 블로그 운영에 큰 힘이 됩니다!긍정적인 댓글 남겨주시면 감사드리며,보완해야 할 점이 있으면 댓글로 남겨주셔도 좋습니다!

728x90
반응형