안녕하세요 허접샴푸입니다~!
배달의 민족 따라만들기 6편입니다! 이번 6편에서는 전체 Main 레이아웃을 완성시켰습니다.
이번 시간에 알아볼 것은 바로 아래와 같습니다.
- ScrollView Animation
[자료(구현할 것)]
1. 5편 이후로 나머지 Layout을 완성시킨 다음, 아래 GIF 보면, "자세히보기"를 눌렀을 때 여러 글이 적혀져 있는 Layout이 Animation을 이용하여 스르륵 나타났다가, "닫기"를 누르면 다시 스르륵하고 사라집니다. 이 부분을 구현해보도록 하겠습니다.
[참고]
절대 실제 배달의 민족 App과 똑같이 구현하는 것이 아닌 최대한 비슷하게 구현하는 것이 목표입니다.
제가 고수였으면 100프로 똑같이 구현할텐데... 너그럽게 봐주십시오...
LETS GO!
[시작]
(사전작업 - activity_main.xml 수정)
이번 편은 귀찮은 (쓸데없는) Layout 수정이 많으며 설명 따윈 필요 없기 때문에 코드만 올립니다.
참고로 코드 관련하여 질문이 있으시면 댓글을 남겨주시면 감사하겠습니다.
- 설명은 없으며, 그냥 음... 단순하게 노가다로 배달의 민족 VIEW 와 똑같이 만들었으며 딱히 클릭해도 아무 효과가 없습니다... ㅎㅎ;;
(노가다 작업 결과화면)
(1) ui directory 안에 ExpandCollapseAnimation.kt 추가하기
- 먼저 Kotlin은 저렇게 파일 하나에 필요한 Function을 작성하여 따로 관리할 수 있어 참 편한 것 같습니다.
- 위는 Animation, 즉 expand, collapse 를 담당하는 코드입니다.
출처는 https://medium.com/better-programming/recyclerview-expanded-1c1be424282c 입니다.
- 위에서 제가 만진 부분은 바로 animationListener 쪽 입니다. 나머지 부분은 저도 그냥 복사해서 사용한 것이며 animationListener을 expand() 함수 내부에 작성하였습니다. 그 이유로는 Expand Animation이 완료된 시점인 "onAnimationEnd"에서 ScrollView를 맨 아래로 Scroll 해주어야 하기 때문입니다. 위에 배달의 민족 App을 보면 "자세히보기"를 클릭하였을 때, 자동으로 화면이 맨 아래로 자동으로 Scroll 되는 것을 확인할 수 있습니다. 이와 같이 구현하기 위해 펼쳐지는 Expand Animation이 완료되면 ScrollView를 "bottom"즉 ScrollView.bottom인 맨 아래의 Y 값으로 부드럽게 Scroll 하도록 하였습니다.
- 참고로 위 코드에서 "View.expand()", "View.collapse()" 처럼 Java 와는 다르게 함수 앞에 객체 이름을 붙이는 Kotlin Extension Function을 Kotlin 에서는 사용할 수 있습니다. 매우 편합니다.
[Kotlin Extension Function]
참고하기:https://www.javatpoint.com/kotlin-extension-function
형태: fun <class_name>.<method_name>()
- 형태는 위와 같으며 fun View.expand()와 같이 View는 class이며, expand는 method가 되는 것입니다.
- 이럼 아래에서 살펴 보겠지만 저 함수를 호출할 때 View를 상속받는 객체들은 객체.expand() 형태로 expand() 함수를 호출할 수 있게 됩니다. 코딩하기에도 편하며 가독성 또한 훌륭해 집니다.
(예)
어떤 textView가 있을 때, textView.expand() 로 호출하면 됩니다.
(2) MainActivity.kt 수정하기
- onClick 내부를 보시면, tv_see_detail은 "자세히보기" / "닫기"를 담당하는 TextView 이며, iv_arrow는 위 아래 화살표 이미지입니다.
- ll_detail은 여러 글이 작성되어 있는 layout입니다. 즉 ll_detail은 처음에 visibility가 GONE이므로 if문을 통해 ll_detail의 visibility가 GONE인지 확인합니다. GONE일 경우 ll_detail.expand()를 호출하여 해당 레이아웃을 Animation을 통해 visibility를 VISIBLE로 만들어줍니다.
- VISIBLE이 됨과 동시에 tv_see_detail은 "닫기", iv_arrow의 이미지는 위를 향하는 화살표로 바꾸어 줍니다.
- "else"는 ll_detail 레이아웃이 이미 화면에 보여지고 있는 상태를 뜻하므로 ll_detail.collapse()를 통해 화면에서 보여지지 않도록 함과 동시에 tv_see_detail은 다시 "자세히보기"로, iv_arrow 이미지는 아래를 향하는 화살표로 원상 복구 시켜 놓습니다.
(결과 화면)
(비교 화면)
제가 알고보니 업데이트하지 않은 배달의 민족 App을 쓰고 있었다가 업데이트를 하니 UI가 많이 바꼈었습니다. 그래서 약간의 차이가 있는 점 양해 부탁드립니다. ㅜㅜ
[Youtube] 이해를 돕기 위해 직접 보며 따라할 수 있는 영상 또한 준비하였습니다.
https://www.youtube.com/watch?v=D39tRJbO98w&feature=youtu.be
[Github] 코드를 다운받아서 실행해보시기 바랍니다.
https://github.com/DJDrama/BaeminPractice/tree/Main-ScrollView-Animation
DJDrama/BaeminPractice
Contribute to DJDrama/BaeminPractice development by creating an account on GitHub.
github.com
참 쉽죠? 다음 7편에서는 대망의 Sliding Drawer 을 구현하도록 하겠습니다.
좌측에서 스르륵 하고 나오는 서랍을 구현하도록 하겠습니다.
물론 알고보니, 제 폰에서는 오래된 배달의 민족 App을 사용하고 있어서 UI가 Drawer에서 BottomNavigationView 혹은 TabLayout인 Tab 형태로 바뀐 것을 모르고 있었습니다.
Drawer을 구현하고 나면 바로 BottomNavigationView를 구현할 수 있도록 하겠습니다!
많은 관심과 사랑 부탁드립니다.
혹시 이 외에도 만들고 싶으신 UI가 있는데 도저히 어떻게 만드는지 모르겠으면 댓글로 남겨주시면 제가 해결해드리겠습니다!
그럼 7편에서 봐요~!
