search

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- android:collection:search [2025/05/11 21:07] – 만듦 이거니맨
+++ android:collection:search [2025/05/12 00:27] (현재) – 검색 결과 하이라이트 이거니맨
@@ 줄 82: / 줄 82: @@
 </code>
+==== 5. 대소문자 구분 없이 비교하기 ====
+=== 가. 한쪽으로 통일해 주는 방법 ===
+다음과 같이 소문자로 통일해주면 대소문자 구분 없이 비교가 가능하다.
+<code kotlin>
+it.title.lowercase().contains(searchString.lowercase())
+</code>
+=== 나. ignoreCase 옵션 ===
+과거에는 contains함수에 ignoreCase 옵션이 없었다. 그런데 최신 kotlin문법은 이게 가능하다.
+따라서 다음과 같이 코드가 가능하다.
+<code kotlin>
+it.title.contains(searchString, ignoreCase = true)
+</code>
+===== 컴포즈에서 불러오기 =====
+==== 1. 검색 창 만들기 ====
+다음과 같이 검색창을 만들고 리스를 불러오면 된다.
+<code kotlin>
+var searchString by remember { mutableStateOf("") }
+Row(modifier = Modifier
+.fillMaxWidth()
+.padding(6.dp), horizontalArrangement = Arrangement.SpaceEvenly) {
+OutlinedTextField(
+    value =  searchString,
+    onValueChange = { searchString = it },
+    label = { Text(text = "검색", style = MaterialTheme.typography.titleMedium )  },
+    trailingIcon = {
+        IconButton(onClick = {searchString = ""  }) {
+            Icon(
+                imageVector = Icons.Default.Search,
+                contentDescription = "Select Drop Down"
+            )
+        }
+    },
+    textStyle = TextStyle(fontFamily = fontkjcMyungjo, fontSize = 14.sp, fontWeight = FontWeight.SemiBold, fontStyle = FontStyle.Normal),
+    keyboardOptions = KeyboardOptions.Default,
+)
+}
+viewModel.quoteList(searchString, sortMethod).forEach() { item ->
+DocuItemCard(item = item)
+}
+</code>
+==== 2. 검색결과를 하이라이트 하게 해주는 코드 만들기 ====
+다음과 같이 특정 문구를 하이라이트 하게 해주는 함수를 만들었다.
+<code kotlin>
+// 검색 결과 하이라이트
+fun highlightContainedText(inputText: String, divider : String) : AnnotatedString
+{
+    val originalString : AnnotatedString = buildAnnotatedString { append(inputText) }
+    if (inputText.contains(divider, ignoreCase = true)) {
+        val listOfString = inputText.split(divider, ignoreCase = true)
+        val formattedString = buildAnnotatedString {
+            for (i : Int in 0 until (listOfString.size * 2) -1)
+            {
+                if (i % 2 == 0) {
+                    append(listOfString[i/2])
+                }else
+                {
+                    withStyle(SpanStyle(color = Color.DarkGray, background = Color.Yellow)) { append(divider)}
+                }
+            }
+        }
+        return formattedString
+    }
+    return originalString
+}
+</code>
+==== 3. 하이라이트를 포함한 리스트 아이템 소스 ====
+<code kotlin>
+// 연락처 목록을 보여주는 컴퍼저블
+@Composable
+fun DocuItemCard(item : QuoteText, searchString : String) {
+    val scope = rememberCoroutineScope()
+    Row (modifier = Modifier
+        .fillMaxWidth()
+        .padding(8.dp)
+        .background(MaterialTheme.colorScheme.primary, RoundedCornerShape(16.dp))
+        .padding(10.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        ) {
+        Column (modifier = Modifier
+            .weight(0.8f)
+            .padding(horizontal = 16.dp), verticalArrangement = Arrangement.SpaceBetween){
+            Text(text = highlightContainedText(item.title, searchString), color = MaterialTheme.colorScheme.primaryContainer, style = MaterialTheme.typography.displayMedium, modifier = Modifier.padding(vertical = 4.dp), overflow = TextOverflow.Ellipsis)
+//            Text(text = item.title, color = MaterialTheme.colorScheme.primaryContainer, style = MaterialTheme.typography.displayMedium, modifier = Modifier.padding(vertical = 4.dp), overflow = TextOverflow.Ellipsis)
+            Text(text = "by ${highlightContainedText(item.author, searchString)}"  + " ", color = MaterialTheme.colorScheme.primaryContainer,  textAlign = TextAlign.End, style = MaterialTheme.typography.bodyMedium, modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 4.dp), overflow = TextOverflow.Ellipsis)
+            Text(text = highlightContainedText(item.quote.first(), searchString), style = MaterialTheme.typography.bodySmall, overflow = TextOverflow.Ellipsis)
+        }
+        IconButton(onClick = {
+            // 스크린 라우팅하기
+            scope.launch { ScreenRouter.navigateTo(Screen.SpeechToText, item) }
+        }) {
+            Icon(Icons.Default.Edit, contentDescription = "${item.title} 연습하기", tint = Color.White)
+        }
+    }
+}
+</code>