[Android-Compose] 안드로이드 컴포즈 스크롤 중 탭 고정 스티키 헤더(stickyHeader) 사용법

이번 공부해 볼 내용은 아래 영상과 같이 스크롤중 탭, text 등 고정을 해야 하는 경우가 있을 것이다. 

처음에는 구현할때 어떤 식으로 검색해야 할지 몰라서 헤맸다.

그래서 나 처럼 헤매지 말라고 이 글의 제목을 풀어서 적어봤다.

 

오늘 할 예제는 아래 영상과 같이 메뉴판을 예를 들어 각 음식의 종류가 헤더가 되어서 스크롤 시 고정되는 간단한 예제를 해보도록 하겠다.

# stickyHeader

우선 컴포즈에서 위와 같이 스크롤시 고정된 헤더를 구현하려면 LazyColumn의 stickyHeader를 사용해야한다.

아래 공식문서에서도 stickyHeader를 사용하여 구현하라고 한다.

한 가지 참고할 점이 있다면 아직 실험용이라서 공식문서에서는 아래와 같이 말하고 있다.

그래서 사용 시 @OptIn(ExperimentalFoundationApi::class) 어노테이션을 해당 컴포저블 함수 위에 필수로 달아줘야 한다.

https://developer.android.com/jetpack/compose/lists?hl=ko 

목록 및 그리드  |  Jetpack Compose  |  Android Developers

# 사용법

package com.example.blog

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalFoundationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                stickyHeader {
                    Surface(
                        modifier = Modifier.fillMaxWidth(),
                        color = Color.LightGray
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(vertical = 12.dp),
                            text = "치킨",
                            fontSize = 17.sp,
                            fontWeight = FontWeight.Bold,
                            color = Color.Black,
                            textAlign = TextAlign.Center
                        )
                    }
                }
                items(5) { index ->
                    EmptyContent("치킨 $index")
                }

                stickyHeader {
                    Surface(
                        modifier = Modifier.fillMaxWidth(),
                        color = Color.LightGray
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(vertical = 12.dp),
                            text = "피자",
                            fontSize = 17.sp,
                            fontWeight = FontWeight.Bold,
                            color = Color.Black,
                            textAlign = TextAlign.Center
                        )
                    }
                }
                items(5) { index ->
                    EmptyContent("피자 $index")
                }

                stickyHeader {
                    Surface(
                        modifier = Modifier.fillMaxWidth(),
                        color = Color.LightGray
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(vertical = 12.dp),
                            text = "짜장면",
                            fontSize = 17.sp,
                            fontWeight = FontWeight.Bold,
                            color = Color.Black,
                            textAlign = TextAlign.Center
                        )
                    }
                }
                items(20) { index ->
                    EmptyContent("짜장면 $index")
                }
            }
        }
    }
}

@Composable
private fun EmptyContent(
    contentNum: String
){
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color(0xFF8A8484))
    ) {
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 30.dp),
            text = contentNum,
            textAlign = TextAlign.Center,
            fontSize = 16.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Black
        )
    }
}

우선 해당 전체코드는 위와 같다. 

여기서 stickyHeader부분을 보면 stickyHeader스코프 안에 고정하고 싶은 컴포저블을 구현해 주면 된다.

생각보다 간단하다.

LazyColumn에 stickyHeader와 item들을 표현하는 방법은 다양하기 때문에 stickyHeader사용법만 습득하면 될 것이다.

 

참고 자료 https://developer.android.com/jetpack/compose/lists?hl=ko