Android 3주차 워크북
수업 내용 정리
(수업에 관련해서 기억하고 싶은 내용 및 배운 내용을 정리해주세요. 실습이 있을 경우, 실습한 내용을 캡쳐해주세요.)
3주차 과제
- 기본 과제
- HomeFragment에서 banner 부분 Viewpager 구현하기‼️
- AlbumFragment 에 TabLayout + Viewpager 추가 구현하기‼️
- AlbumFragment Viewpager 에 DetailFragment, VideoFragment 구현하기‼️
[기본 과제 구현 화면]
- ViewPager2를 사용해 배너 슬라이더 구현
- AlbumFragment의 수록곡, 상세정보, 영상 ChildFragment를 ViewPager2, TabLayout.으로 연결
- 전체선택, 전체듣기, Switch Widget, 타이틀 뱃지 구현
- 챌린지 과제
- [LockerFragment] 화면 TabLayout과 Viewpager로 구현해보기‼️
- [HomeFragment]화면Panel 부분 Viewpager로 구현해보고 Indicator 추가해보기‼️
[챌린지 과제 구현 화면]
✅ 실습 체크리스트
- [x] 실제 Flo앱과 흡사하게 만들었나요? - 단지 비슷해서만 되는게 아닙니다! 디자인을 실제 퍼블리싱하는 과정을 연습하는 것이기 때문에 다른 사람이 볼때 정말 플로어플인지 아닌지 헷갈릴 정도로 만들었는지 확인해주세요!
- [x] 비율 코딩이 잘 되어있나요? (xml 상의 기기를 바꿔보면서 비율코딩 확인)
- [x] 모든 View에 적절한 id(네이밍)을 매치했나요?
- [x] AlbumFragment 화면은 잘 만들었나요?
- [x] 기능이 전부 정상적으로 작동하나요?
- [x] ViewPager를 잘 사용했나요?
- [x] TabLayout + ViewPager 구현을 잘했나요?
🎯 핵심 키워드
- ViewPager
- 최근 사용되고 있는 ViewPager2는 ViewPager 라이브러리의 개선된 버전으로, 향상된 기능을 제공
- ViewPager2의 장점
- 가로 페이징과 세로 페이징 모두 지원 (orientation 속성 설정)
- 오른쪽에서 왼쪽 지원 (RTL)
- ViewPager2는 RecyclerView 기반이므로 DiffUtil 유틸리티 클래스에 액세스할 수 있음. 따라서 ViewPager에서 사용되는 Data가 변경되어도 모두 확인할 필요 없이, 변경된 데이터만 확인하면 되는 이점이 있음.
- TabLayout
- 여러개의 TabItem을 설정하여 Tab클릭시 로직을 수행하도록 구현할 수 있음.
- 대게 ViewPager와 함께 사용하여 탭 클릭시 해당하는 Fragment로 전환하도록 사용.
- BottomNavigation
- Activity나 Fragment의 하단 탭 역할을 하는 위젯.
- 주로 한 Activity의 FrameLayout에 여러개의 화면(Fragment)를 보여주는 화면을 구성하기 위해 사용.
- BottomNavigation의 Item클릭시, Transaction을 사용하여 0 ~ N-1의 position에 해당하는 Fragment를 replace 또는 add 하도록 구현.
- Adapter
- FragmentStatePagerAdapter 추상 클래스를 확장하여 구현.
- ViewPager2의 Adapter역할을 하며, ViewPager 슬라이딩에 맞추어 각각의 position에 해당하는 Fragment를 반환.
🔥 논의해보면 좋은 것들
- 유용한 위젯들이 어떤 것들이 있는지 알아보기
- ViewPager2
- ScrollView
- NestedScrollView
- RecyclerView
- TabLayout
- 자주 쓰는 어플의 유용한 위젯들이 어떤 것이 있는지 알아보기
- TabIndicator
- Barrier
- Guideline
📢 3주차 수업 후기
- 3주차 수업을 듣고 서로 느낀 점을 이야기해주세요!
- 핵심 키워드에 대해 완벽하게 이해했는지? 혹시 이해가 안 되는 부분은 뭐였는지? 서로 이야기해주세요!
- 트러블 슈팅(실패한 경험도 성장을 위한 경험!)
- 트러블 슈팅 양식
- 해당 코드를 통해 activity의 background영역이 window의 statusbar 영역을 포함하도록 동적 변경
- fitsSystemWindows 속성값을 true로 변경하여, System window 영역에 맞추어 남는 공간만큼 padding
- [ 해결 방안 ]
- 위 사진과 같이 background가 status bar를 채우지 않는 상황 발생
- [ 문제 원인 ]
- 트러블 슈팅 양식
- 스터디 인증샷 잊지 마세요!
❓ 모르는 것들 / 해결하지 못한 것들
모르거나 해결하지 못한 것들을 정리해서 QnA 채널이나 스터디를 통해 같이 해결해보아요!
'대외활동 > UMC 동아리' 카테고리의 다른 글
UMC 4주차 컴공선배 워크북 내용정리 (7) | 2022.04.05 |
---|---|
UMC 2주차 컴공선배 워크북 내용정리 (0) | 2022.03.22 |
UMC 1주차 컴공선배 워크북 내용정리 (2) | 2022.03.14 |
[UMC 동아리 합격] UMC 동아리 2기 합격 과정 및 후기 (3) | 2022.03.08 |