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

 

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)
        }
    }
}

 

 

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

 

 

 

시연 영상입니다