본문 바로가기
안드로이드 코틀린

[Kotlin][Android] Jetpack Compose로 검색 필터 기능 만들기

by teamnova 2024. 12. 21.
728x90

 

Jetpack Compose를 활용해 검색어 입력에 따라 리스트가 동적으로 필터링되는 기능을 구현해보겠습니다.

 

 

 

1. Search Filter Example 

사용자에게 입력 받은 search Text 를 미리 구성해놓은 텍스트 목록인 all Items 와 동적으로 비교하여 (filtered Items)
일치하는 목록을 필터링해, LazyColumn 리스트에 보여줍니다 

@Composable
fun SearchFilterExample() {
    var searchText by remember { mutableStateOf("") }
    val allItems = listOf("Apple", "Banana", "Orange", "Grapes", "Blueberry", "Strawberry", "Pineapple")
    val filteredItems = allItems.filter { it.contains(searchText, ignoreCase = true) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        SearchBar(
            searchText = searchText,
            onSearchTextChanged = { searchText = it }
        )

        Spacer(modifier = Modifier.height(16.dp))

        LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
            items(filteredItems) { item ->
                FilteredItemCard(itemName = item)
            }
        }
    }
}

 

 

 

 

2. 검색어 입력창(SearchBar)과 아이템 카드(FilteredItemCard) UI 구성 카드 

@Composable
fun SearchBar(searchText: String, onSearchTextChanged: (String) -> Unit) {
    BasicTextField(
        value = searchText,
        onValueChange = { onSearchTextChanged(it) },
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            imeAction = ImeAction.Search,
            keyboardType = KeyboardType.Text
        ),
        textStyle = TextStyle(
            fontSize = 16.sp,
            fontWeight = FontWeight.Normal
        ),
        decorationBox = { innerTextField ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .padding(8.dp)
                    .background(MaterialTheme.colorScheme.surface, MaterialTheme.shapes.small)
                    .padding(horizontal = 16.dp),
                contentAlignment = Alignment.CenterStart
            ) {
                if (searchText.isEmpty()) {
                    Text(text = "Search...", color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f))
                }
                innerTextField()
            }
        }
    )
}

@Composable
fun FilteredItemCard(itemName: String) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.primary)
    ) {
        Box(modifier = Modifier.padding(16.dp), contentAlignment = Alignment.CenterStart) {
            Text(text = itemName, fontSize = 16.sp, color = MaterialTheme.colorScheme.onPrimary)
        }
    }
}

 

 

입력 중인 텍스트를 기반으로 리스트를 동적으로 필터링하는 기능을 간단하게 구현해보았습니다. 이 기능은 쇼핑 앱, 연락처 앱, 파일 탐색기 등 다양한 앱에서 활용될 수 있습니다. 나아가, 조건별 필터링이나 클릭 이벤트를 추가해 상세 화면으로 이동하는 기능으로 확장할 수도 있습니다

 

 

 

시연 영상입니다