안드로이드 코틀린166 [Kotlin][Android] Jetpack Compose로 검색 필터 기능 만들기 Jetpack Compose를 활용해 검색어 입력에 따라 리스트가 동적으로 필터링되는 기능을 구현해보겠습니다. 1. Search Filter Example 사용자에게 입력 받은 search Text 를 미리 구성해놓은 텍스트 목록인 all Items 와 동적으로 비교하여 (filtered Items)일치하는 목록을 필터링해, LazyColumn 리스트에 보여줍니다 @Composablefun SearchFilterExample() { var searchText by remember { mutableStateOf("") } val allItems = listOf("Apple", "Banana", "Orange", "Grapes", "Blueberry", "Strawberry", "Pineapp.. 2024. 12. 21. [Kotlin][Android] Jetpack Compose로 아이템 Drag & Drop 구현하기 안녕하세요 오늘은 Jetpack Compose의 주요 기능 (제스처, 애니메이션, 리스트 렌더링) 들을 활용해 리스트의 아이템들을 드래그 앤 드롭 해보도록 하겠습니다 To-Do List, 이미지 갤러리, 카드 정렬 등 다양한 앱에서 응용 가능합니다 1. ToDoListWithFloatingDrag리스트의 전체 구조 및 드래그 앤 드롭 로직을 관리하는 함수입니다 @Composablefun ToDoListWithFloatingDrag() { var tasks by remember { mutableStateOf(mutableListOf("Task 1", "Task 2", "Task 3", "Task 4")) } var draggedIndex by remember { mutableStateOf(n.. 2024. 12. 15. [Kotlin][Android] 슬라이더와 애니메이션을 활용한 RGB 색상 조합기 만들기 오늘은 슬라이더를 움직여 RGB 값을 조정하면 실시간으로 색상이 변경되는 RGB 색상 조합기를 만들어보겠습니다. 1) RGBColorPickerDemo @Composablefun RGBColorPickerDemo() { var red by remember { mutableStateOf(0f) } var green by remember { mutableStateOf(0f) } var blue by remember { mutableStateOf(0f) } val animatedColor by animateColorAsState( targetValue = Color(red / 255, green / 255, blue / 255) ) 각 red, green, blue는 .. 2024. 12. 9. [Kotlin][Android] Jetpack Compose를 이용한 부드러운 막대 그래프 애니메이션 구현하기 안녕하세요 오늘은 안드로이드의 Jetpack Compose 에서 제공하는 애니메이션 API 를 사용해보겠습니다. Jetpack Compose 에서는 애니메이션을 쉽게 구현할 수 있는 api 를 여러가지 제공합니다 오늘은 특정 값에 따라 막대 그래프의 높이가 변하도록 애니메이션을 적용해보겠습니다 사용자에게 1부터 "점수 입력 (0-100)" 칸에 1부터 100까지의 숫자 중 아무 숫자를 입력한 후 적용하기 버튼을 누릅니다. 버튼을 누르면 입력 받은 숫자값(score) 만큼 그래프가 증가, 감소합니다.@Composablefun GraphDemo() { var score by remember { mutableStateOf(0f) } var input by remember { mutable.. 2024. 12. 3. [Kotlin][Android] Jetpack Compose 텍스트 작성 중인 상태에 대해 사용자에게 알리기 안녕하세요 오늘은 사용자가 텍스트를 입력 중인지에 대한 여부를 추적하여서 사용자가 입력 중일 때에 "입력 중.." 이라는 메시지를 나타내보고자 합니다 본 게시글에서 나오는 방법은 키보드 입력을 감지하는지에 대한 여부가 아니라 사용자가 입력한 텍스트의 존재 여부를 텍스트를 하나 입력할때마다 확인하면서 키보드 입력 중인지 판단하는 방법입니다. 키보드의 입력을 감지하려면 TextField의 onValueChange를 사용하여 isTyping 상태를 변경해야 합니다. 아래는 해당 기능에 대한 코드 입니다입력 후 1초마다 타이핑 여부를 감지합니다 // 새로 추가. var isTyping by remember { mutableStateOf(false) } val scope = rememberCoro.. 2024. 11. 27. [Kotlin][Android] 문자열 형식 체크하기 오늘은 코틀린 코드로 문자열 형식 체크하는 예시를 만들어 보겠습니다. 1. 영문자로 시작해야하며, 영문자와 숫자 조합이 가능하고, 글자수가 5~15자인 문자열2. 숫자, 영어 대문자, 영어 소문자, 특수 문자( @#$%^&*()_+=!~ ) 가 포함되어야 하며, 글자수가 8~16자인 문자열 1번 형식을 아이디 형식, 2번 형식을 비밀번호 형식이라 가정하고 진행하겠습니다. 액티비티용 레이아웃 xml 파일 코드 (activity_main.xml) 액티비티 코틀린 코드class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { .. 2024. 11. 23. [Kotlin][Android] Jetpack Compose 아이템 일괄 삭제하기 안녕하세요 오늘은 컴포즈로 구현한 아이템 리스트에서 선택된 아이템을 일괄적으로 삭제해보도록 하겠습니다 관련된 이전 포스팅은 아래에서 확인가능 합니다 [Kotlin][Android] Jetpack Compose 아이템 텍스트 수정하기안녕하세요 오늘은 컴포즈로 만든 리스트에서 각 아이템의 텍스트를 수정을 해보겠습니다 아이템마다 수정 버튼이 있습니다 이때 TextField와 "확인" 및 "취소" 버튼이 나타나며, 사용자는 값을stickode.tistory.com 목록이 간단할 때에는 큰 필요성을 느끼지 못할 수 있지만 아이템이 많아지면 많아질수록 대량의 아이템을 원하는대로 한번에 처리하는 기능은 꼭 필요한 기능 중 하나입니다 // 일괄 삭제 버튼 Row(modifier = Modif.. 2024. 11. 21. [Kotlin][Android] Jetpack Compose 아이템 텍스트 수정하기 안녕하세요 오늘은 컴포즈로 만든 리스트에서 각 아이템의 텍스트를 수정을 해보겠습니다 아이템마다 수정 버튼이 있습니다 이때 TextField와 "확인" 및 "취소" 버튼이 나타나며, 사용자는 값을 수정할 수 있습니다. if (isEditing[index]) { // 편집 모드일 때 TextField와 확인, 취소 버튼 표시 var editText by remember { mutableStateOf(item) } TextField( value = editText, .. 2024. 11. 15. [Kotilin][Android] RatingBar을 사용해서 별점만들기 이번에는 코틀린 언어로 작성해 보았습니다. RatingBar는 앱 사용시 주로 사용자가 특정항목이나 경험에 점수를 주는것을 볼 수 있습니다.이는 별점으로 표시되고 사용자가 직관적으로 해당 항목에 만족도를 표현 할 수 있는 기능입니다. 예를들면 상품리뷰의 별점을 줄 수 있습니다전자상거래 앱에서 사용자들이 구매한 상품에 대해 별점을 부여할 수 있습니다. 예를 들어, 사용자가 구매한 전자기기에 대해 1~5개의 별을 부여하여 만족도를 나타낼 수 있습니다. 이 별점은 다른 잠재 구매자들에게 해당 제품의 품질에 대한 인사이트를 제공합니다.영화 또는 TV 프로그램 평가를 할 수 있습니다.스트리밍 서비스나 영화 리뷰 애플리케이션에서, 사용자들이 영화를 시청한 후 별점을 매길 수 있습니다. 이는 다른 사용자가 영화를 선.. 2024. 11. 12. 이전 1 2 3 4 ··· 19 다음