[Kotlin/Compose] 반응형 이미지 만들기

반응형 이미지? 완성 이미지 예시 유튜브를 보다가 아래 영상을 보게 되었다. 해당 영상에서는 사용자가 클릭함에 따라 이미지가 기울어져 반응형 이미지를 만드는 법을 보여준다. https://youtu.be/YDCCauu4lIk?si=LiDetcR1AwOzSk-i 해당 영상에서 나오는 코드는 html로 설명되어 있다. 즉 웹 기반으로 만드는 방법을 설명한 영상이다. 이 영상을 보고, 그러면 Android에서 Compose를 통해 한 번 만들어보자 하고 도전해보았다. pointerInteropFilter 아마 가장 필요한 Modifier함수라고 생각한다. 사용자가 터치를 하였을 때 해당 위치를 어떻게 인식하느냐에서 해당 위치 알 수 있도록 터치 이벤트를 다룰 수 있게 해준다. 오늘 사용할 터치 이벤트는 크게 ..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 22.
• textsms

[Kotlin/Compose] Scroll Fade-In/Out animation

Scroll Fade-InOut animation Scroll을 할 때, 각 item요소가 fade-in/out되면서 해당 위치로 이동하는 기능 구현을 해보았습니다. 미리보기 구현 구현 방법 LazyColumn을 이용하여 열을 생성하고, 사용자가 스크롤하여 화면에 아이템이 보이게 되면, LaunchedEffect를 통해 alpha값을 변경하여 투명도 효과를 적용한다. 코드 class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { FadeinscrollTheme { // A surface container u..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 22.
• textsms

[Compose UI] 텍스트/이미지 반짝임 로딩화면 만들기

반짝임 애니메이션 앱을 사용하다보면, 화면이 로딩되는 과정에서 이미지나, 텍스트가 보여지는 공간에 반짝임 애니메이션이 보이며 로딩중이라는 느낌을 주는 경우가 많다. 과연 이런건 어떻게 구현할까? 반짝임 애니메이션 만들기 확장 함수 만들기 Modifier클래스의 확장 함수를 만들어 반짝임 이미지를 생성하도록 하겠습니다. Modifier의 확장 함수를 만들기 위해, 다음과 같이 작성해줍니다. fun Modifier.shimmerEffect(): Modifier = composed { } 함수 내부의 값은 가장 먼저 상태 값을 저장할 변수를 정의해줍니다. var size by remember { mutableStateOf(IntSize.Zero) } val transition = rememberInfinit..

• format_list_bulleted 안드로이드/Compose
• · 2023. 11. 29.
• textsms