안드로이드 코틀린179 [Kotlin][Android] Jetpack Compose를 활용한 입력값 검증 - 빈 필드 확인하기 안녕하세요 오늘은 Jetpack Compose를 사용하여 입력값 검증을 구현해보도록 하겠습니다사용자 입력을 다루는 애플리케이션에서는 입력값 검증이 필수적입니다. 이를 위해 간단한 로그인 폼을 구현해보겠습니다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { LoginAppTheme { Surface( modifier = Modifier.fillMaxSize(), .. 2025. 1. 15. [Kotlin][Android] Jetpack Compose로 간단한 애니메이션 구현하기 안녕하세요 오늘은 Jetpack Compose를 사용하여 간단한 애니메이션을 구현하는 예제를 소개하겠습니다 버튼을 클릭할 때 색상과 크기가 부드럽게 변하는 애니메이션을 구현하는 코드입니다 Jetpack Compose는 다양한 animate*AsState 함수를 제공하여 상태 변화에 따른 애니메이션을 쉽게 구현할 수 있도록 도와줍니다예를 들어 애니메이션의 색상, 단위(크기) 변화, 값 변화, 정수 값 변화, 오프셋(위치) 변화, 사이즈 변화 등 target 값을 기준으로 현재 값에서 새로운 값으로 자연스럽게 전환되도록 애니메이션을 적용할 수 있습니다 class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState:.. 2025. 1. 8. [Kotlin][Android] Jetpack Compose에서 Navigation 구현하기 안녕하세요 오늘은 Jetpack Compose에서 Navigation 구현해보도록 하겠습니다. Navigation 은 애플리케이션 내에서 여러 화면(Screen) 간의 이동을 관리하는 핵심 요소입니다. Jetpack Compose에서는 기존의 XML 기반의 Navigation 컴포넌트와는 다르게 선언적(Declarative) 방식으로Navigation을 구현할 수 있으며 이는 사용자 경험을 향상시키고, 코드의 유지보수성을 높이는 데 매우 중요하다고 할 수 있습니다. 먼저 Navigation 라이브러리 사용을 위해 Gradle 의존성 추가합니다.2025년 1월 기준 가장 최신 버전인 2.8.4 버전을 사용하겠습니다 dependencies { // Navigation Compose 라이브러리 .. 2025. 1. 1. [Kotlin][Android] Jetpack Compose 의 LazyPagingItems 사용하여 아이템 페이징 하기 안녕하세요 오늘은 Jetpack Compos 의 LazyPagingItems 사용하여 아이템 페이징 기능을 구현해보도록 하겠습니다 대량의 데이터를 한 번에 불러올 때, 페이징(Paging) 기법을 사용하여 필요한 데이터만 단계적으로 가져오는 것이 일반적입니다. 이렇게 하면 네트워크 사용량을 줄이고, 사용자에게 더 나은 성능과 부드러운 스크롤 경험을 제공할 수 있습니다. 1.ItemRepository.ktclass ItemRepository { fun getItems(): PagingSource { return object : PagingSource() { override suspend fun load(params: LoadParams): LoadResult { .. 2024. 12. 27. [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. 이전 1 2 3 4 5 ··· 20 다음