안녕하세요 허접샴푸입니다~!
Programming에 대한 개념은 있으나, UI 짜는 방법을 몰라서 헤매고 있으신 분들을 위해 새로운 카테고리인 UI 따라 만들기를 만들었습니다. 주인공은 배달의 민족입니다! 이번 편은 2편입니다!
[자료]
이번 편은 위에 좌우로 Swipe 되는 이미지 배너를 구현하도록 하겠습니다.
Viewpager를 사용해야 합니다. 참고로, 현재는 Viewpager2가 있으며 저는 Viewpager2를 이용하도록 하겠습니다!
Viewpager2는 기존 Viewpager의 PagerAdapter를 RecyclerView.Adapter로 대체되었기 때문에 RecyclerView 사용법만 알면 Viewpager2는 식은죽 먹기입니다!
Viewpager2 : https://developer.android.com/jetpack/androidx/releases/viewpager2
ViewPager2 | Android 개발자 | Android Developers
최근 업데이트 현재 안정화 버전 다음 출시 후보 베타 버전 알파 버전 2019년 11월 20일 1.0.0 - - - AndroidX 종속성 ViewPager2를 사용하려면 프로젝트의 build.gradle 파일에 다음 AndroidX 종속성을 추가합니다. dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0" } 버전 1.0.0 버전 1.0.0 2019년 11월 20일 androidx.v
developer.android.com
LETS GO!
[시작]
(사전작업) build.gradle(Module: app)의 dependencies{}에 아래 dependencies를 추가해주시기 바랍니다.
//view_pager2 --> Viewpager2를 사용하기 위해
implementation "androidx.viewpager2:viewpager2:1.0.0"
//livedata --> ViewModelProvider를 사용하기 위해
def lifecycle_version = "2.2.0"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
(1) activity_main.xml 에 ScrollView, ViewPager2 추가하기
- ScrollView를 추가한 이유는, 실제 배달의 민족 App을 보면 상하로 Scroll이 됩니다. 똑같이 만들기 위해서, 미래를 위해서 ScrollView는 일단 추가해 놓은 것입니다.
(2) res > drawable > white_rectangle_left_radius.xml 드로어블 파일 만들기('모두 보기' 배경인 둥근 사각형 만들기 위함)
(중간화면)
Viewpager2에 그림을 넣지 않았기 때문에 일단은 이런식으로 틀만 잡히게 됩니다.
(3) ViewPagerAdapter 생성하기, BannerItem 모델 생성하기, item_layout_banner.xml 생성하기
(ViewPagerAdapter.kt)
- Viewpager2는 RecyclerView.Adapter를 상속받기 때문에, 일반적인 RecyclerView Adapter를 생성할 때처럼 똑같이 프로그래밍 하면 됩니다.
- 배달의 민족 앱에서는 5개의 아이템이 보이기 때문에 ITEM_COUNT=5 로 지정해줍니다.
- bannerItemList를 null로 선언합니다. onBindViewHolder에서 bannerItemList?.let을 사용하여 bannerItemList를 null로 선언하였기 때문에 ?.let 을 이용하여 null이 아닐 때 실행되도록 합니다.
- setImageResource를 통해 5개의 이미지를 화면에 띄워주도록 합니다.(맨 아래 Github에서 5개의 이미지를 확인하시기 바랍니다)
- 다른 부분들은 RecyclerView Adapter를 만들어보셨다면 동일한 내용이기 때문에 PASS! 혹시 질문이 있으시면 댓글로 남겨주시기 바랍니다.
(BannerItem.kt)
- 일반적으로는, 이미지 로딩 라이브러리(Glide, Picasso, Coil 등)를 사용하여 서버에 있는 이미지를 로딩하지만, 지금은 실습이기 때문에 이미 존재하는 이미지로 배너를 구현하였습니다. 원래의 경우라면, val image: String 으로 하였겠지만, 지금은 drawable 폴더에 있는 이미지를 불러올 것이기 때문에 Int(아이디는 정수값)로 설정하였습니다.
(item_layout_banner.xml)
- android:scaleType="fitXY"로 한 이유는, 이 코드가 없을 시 이미지 좌우에 흰 여백이 나타나기 때문에, 해당 코드를 사용하여 이미지를 좌우 꽉 채우기 위함입니다.
(4) MainActivityViewModel 생성
- MutableLiveData는 수정이 가능하지만, 그냥 Livedata는 수정이 불가능합니다. 즉 위와 같이 수정할 수 있는 MutableLiveData와 수정할 수 없는 LiveData로 나누어서 프로그래밍 합니다. 왜 저렇게 했냐구요? 구글 샘플에서 저렇게 하더라구요..(매우 어이없는 답변이죠?.. 죄송합니다. 제가 허접이라 따라해버리네요;)
- bannerItemList의 setter를 만듭니다.
(5) MainActivity.kt
- viewModel 관련해서는 해당 사이틀르 참고하시기 바랍니다: https://developer.android.com/topic/libraries/architecture/viewmodel?gclid=CjwKCAjwgbLzBRBsEiwAXVIygPKX6FPIvBXYxKEc5P-r_n2xWlaiUp-arV0dy42Za8CCvfMtpbrTFxoCLy4QAvD_BwE
ViewModel 개요 | Android 개발자 | Android Developers
ViewModel을 사용하면 수명 주기를 인식하는 방식으로 UI 데이터를 관리할 수 있습니다.
developer.android.com
- viewModel.setBannerItems를 통해 BannerItem 5개의 리스트를 set해줍니다.
- 그럼 subscribeObservers()에 있는 observer가 viewmodel.bannerItemList에 변화가 있다는 것을 observe하여 submitList()를 콜하게 됩니다. 그럼 뷰페이저2는 5개의 BannerItem을 화면에 띄우게 됩니다.
- registerOnPageChangeCallback에서 onPageSelected 함수를 통해 배너 아래 1 / 5 -> 2 / 5 -> 3 /5 ... 형태로 숫자의 변화를 보여줄 수 있게 합니다.
(결과 화면) 똑같쥬??
(결과 영상)
[Youtube] 처음부터 끝까지 만드는 영상을 준비해 보았습니다. 글로만 설명하면 따분할 것 같아 영상을 보며 똑같이 따라하시면 훨씬 이해하는데 쉬울 것 같습니다. 아무 소리는 없어서 지루할 수 있으니 음악을 들으면서 하세요..;;
https://www.youtube.com/watch?v=dmURUZS_YSc&feature=youtu.be
[Github]
https://github.com/DJDrama/BaeminPractice/tree/ViewPager2
DJDrama/BaeminPractice
Contribute to DJDrama/BaeminPractice development by creating an account on GitHub.
github.com
다음 3편에서는 Coroutine을 이용하여 지금 만든 Viewpager2인 배너가 몇초에 한번씩 자동 스크롤 되도록 만들겠습니다!
많은 관심과 사랑 부탁드립니다...
혹시 이 외에도 만들고 싶으신 UI가 있는데 도저히 어떻게 만드는지 모르겠으면 댓글로 남겨주시면 제가 해결해드리겠습니다!
그럼 3편에서 봐요~!
