10월, 2020의 게시물 표시

Android Custom Calendar with RecyclerView

이미지
사용 버전: Android Studio 4.1 사용 언어: Kotlin 1.4.10 ​ 안드로이드 Custom Calendar with RecyclerView를 해보겠습니다. ​ 이번 시간에는 RecyclerView를 이용하여 Calendar를 만들어보겠습니다. 안드로이드에 보면, 기본으로 제공되는 CalendarView가 있고, Material에 보면 DatePicker라고 해서 또 달력을 제공해 주기도 합니다. 하지만 사용자가 조작할 수 있는 부분이 정해져 이따 보니, 자체적으로 달력을 만들어야 할 필요가 생갑니다. ​ ​ dataBinding을 사용합니다. https://shwoghk14.blogspot.com/2020/06/android-data-binding.html 달력이 그려질 Fragment를 만드시고, layout으로 갑니다. 이렇게 적어줍니다. ​ 그러면, 이런 디자인이 됩니다. Calendar에 숫자를 저장할 Class를 만듭니다. 저는 CalendarInfo로 만들었고, 아래처럼 정의했습니다. RecyclerView 안에 그려질 Layout을 하나 만듭니다. 저는 date_list로 만들었습니다. variable에는 아까 만든 달력 정보를 넣습니다. 아래처럼 적어줍니다. fragment의 RecyclerView에 Calendar를 그리기 위한 Adapter를 만듭니다. 저는 CalendarAdapter로 만들었습니다. ​ ​ RecyclerView를 사용해 줍니다.

Android Shared axis transition 사용

이미지
사용 버전: Android Studio 4.1 사용 언어: Kotlin 1.4.10 ​ 안드로이드 Shared axis transition 사용을 해보겠습니다. ​ Shared axis transition은 화면 전환 모션 중에 하나입니다. 축을 고정해서 다음 화면을 부드럽게 연결합니다. 이미지 출처: https://material.io/design/motion/the-motion-system.html#shared-axis ​ ​ 이 중에서 Z 축을 중심으로 transition을 하겠습니다. 아래 앱에 Shared Z Axis Transition을 추가해보겠습니다. binding이 사용되었습니다. https://shwoghk14.blogspot.com/2020/06/android-data-binding.html Shared Axis Transition을 사용하기 위해서는 Material Components가 필요합니다. https://shwoghk14.blogspot.com/2020/06/android-material-components.html 지도 Fragment로 가서 onCreate를 수정합니다. enterTransition은 화면이 띄워질 때이고, returnTransition은 되돌아갈 때입니다. MaterialSharedAxis.Z로 Z 축을 사용할 것이라고 말합니다. forward는 true(화면 위로), false(화면

Android Container transform 사용

이미지
사용 버전: Android Studio 4.1 사용 언어: Kotlin 1.4.10 ​ 안드로이드 Container transform을 사용해 보겠습니다. ​ Container transform은 새로운 화면이 열릴 때, 변화되는 모션을 주는 것을 말합니다. 이미지 출처: https://material.io/design/motion/the-motion-system.html#container-transform ​ ​ ​ 아래의 앱에 Container transform을 추가해봅시다. 앱에는 databinding이 사용되었습니다. https://shwoghk14.blogspot.com/2020/06/android-data-binding.html Container transform을 사용하기 위해서는 Material Components가 필요합니다. https://shwoghk14.blogspot.com/2020/06/android-material-components.html 버튼 xml 파일에 갑니다. 지도 버튼에 transitionName을 추가합니다. 지도 xml 파일로 갑니다. transitionName을 추가합니다. 원래는 지도에 추가했었는데, 지도에 추가하니 자꾸 꺼지는 현상이 발생하여 지도 위에 있는 작은 버튼에 추가해봤습니다. ​ ​ ​ ​ 버튼 fragment로 옵니다. 아랫부분이 지도

Android Custom Appbar with Drawer

이미지
사용 버전: Android Studio 4.1 사용 언어: Kotlin 1.4.10 ​ 안드로이드 Custom Appbar with Drawer을 알아보겠습니다. Drawer은 화면 밖에서 튀어나오는 설명 창 같은 겁니다. 아래는 예시입니다. 먼저, Custom Appbar가 필요합니다. https://shwoghk14.blogspot.com/2020/09/android-custom-toolbar.html 그리고, drawer 기본 설정이 필요합니다. 아래 글에서 처음부터 binding 부분까지만 해주시고 다시 돌아와 주세요. https://shwoghk14.blogspot.com/2020/08/android-navigation-drawer.html binding까지 마치셨으면, drawer를 적용할 kotlin 파일로 가서 drawer를 불러옵니다. 저는 Drawer의 id를 mainDrawerLayout으로 설정했습니다. 그리고, DrawerToggle을 만듭니다. 이 토글을 동기화시켜 줍니다. 전체 코드 모습은 이렇습니다. 끝. 카테고리: Android

Android Color Transition 사용

이미지
사용 버전: Android Studio 4.1 사용 언어: Kotln 1.4.10 ​ 안드로이드 Color Transition 사용을 해보겠습니다. ​ Color Transition은 두 색깔을 부드럽게 연결해서 변경할 때 사용합니다. 아래는 예시입니다. dataBinding을 사용합니다. https://shwoghk14.blogspot.com/2020/06/android-data-binding.html 아래의 xml을 사용합니다. 변경할 색깔을 만듭니다. res - New - Adnroid Resource File Drawable을 만듭니다. 여기에 시작 색깔을 넣을 겁니다. ​ ​ color_origin.xml을 아래처럼 적습니다. color_new.xml을 똑같이 만듭니다. color_new도 수정합니다. color_smooth_transition을 만듭니다. color_smooth_transition을 아래처럼 적어줍니다. 지금까지 만든 color_origin과 color_new를 사용합니다. 부드럽게 색깔을 변경할 View로 가서 android:background를 설정해 줍니다. kotlin 파일로 갑니다. layout의 배경을 transition으로 받습니다. Button에 ClickListener를 장착합니다. startTransition과 revers