BottomNavigationView - 구글에서 지원하는 View
화면 아래 쪽에서 화면을 이동할 수 있도록 해주는 {하단 버튼 View}
예) 인스타그램의 하단 버튼 뷰
# 특징
아래 버튼들이 다른 화면으로 이동해도 사라지지 않는다.
# 구현 전략
Activity에 BottomNavigationView를 배치하고, 정보는 Fragment에서 보여준다.
XML에 BottomNavigationView를 하단에 배치하고, Menu XML을 생성해 BottomNavigationVIew의 요소를 설정한다.
BottomNavigationVIew는 앱의 활용성을 높혀준다.
앱의 일반적인 특징인 하나의 화면은 좁은 구조를 띄고있기에,
이러한 좁은 화면을 보다 효율적으로 구성할 수 있도록 도와준다. (앱 뷰의 재활용)
그리고, 이러한 안드로이드 앱 뷰 개발 전략은 UX 로 인정받은 것이기에,
전략적으로 사용해서 원하는 앱을 구현하면 된다.
(UI를 포함해서, UX도 고려하지 않을 수 없는 중요한 사항이다.
사용자는 처음보는 화면보다, 경험에 의존해서 쉽게 사용할 수 있는 앱이 더 친근하고 좋은 앱이라고 생각하기 마련이기 때문.)
BottomNavigationView 구현
1. 아래의 항목을 만들 수 있는 Menu XML 파일을 작성한다.
Menu XML 파일은 안드로이드 스튜디오 res 폴더 계층의 menu 폴더 내에서 생성된다. (안드로이드 개발 규칙)
- 각 Item의 ID, 이름, 아이콘 등을 설정한다.
- Menu XML을 구성해서, 앱에서 필요한 View를 정리하는 Menu XML을 구성한다.
"Menu XML은 대체로 4~5개로 구성해둔다."
(윈도우 팝업 창도 여러 개 떠있으면, 헷갈리듯, Menu XML도 헷갈리니 4~5개로 구성해둔다고 함.)
2. 표시할 Activity의 Layout XML 파일에 View 추가하기 - BottomNavigationView 연결해주는 작업
(meterial Disign에 BottomNavigationView는 Layout XML에서 하단에 배치하는 게 규칙으로 규정됨.)
3. 표시할 Activity의 Class 파일에서 이벤트 설정하기
- onCreate에서 가장 처음 표시할 Fragment 설정하기
- BottomNavigationView의 각 Item 클릭 이벤트 설정한다.
(BottomNavigation의 run 명령을 사용해서, 각 Item의 클릭 이벤트를 설정한다.
범위 지정함수로써, this: BottomNavigationView 로 run에서 처리할 View를 지정한다.) - Fragment Manager 를 이용해서 이벤트를 관리해준다.
(아래는 Fragment Manager와 함께 사용될 메소드, 명령들이다.)
TabLayout
여러 개의 탭을 두고 클릭하면 화면이 바뀌는 Layout
(각 탭을 클릭했을 때에 대한 이벤트 동작을 정의하여 View를 바꾼다.)
TabLayout을 단일로 사용하기 보다는 Swipe를 할 수 있도록 구현하는 경우가 많다.
(ViewPager2를 결합해서 더 다양한 콘텐츠를 표시할 수 있는 앱 뷰를 구성한다.)
ViewPager2
스와이프 동작으로 VIew나 Fragment를 교체할 수 있도록 해주는 라이브러리이다.
예) 인스타그램 피드 사진
TabLayout과 연결하면 Swipe 가능한 Tab 화면 구현 가능하다.
(더 다양해진 앱 콘텐츠 뷰를 구성가능하다.)
# ViewPager2 특징
ViewPager보다 구현하기 편하고, 효율적이다.
RecyclerView Adapter를 활용할 수도 있다.
(즉, 뷰의 재활용이 되기에 대부분 ViewPager2로 사용해서 구현한다.)
XML View 요소로써 사용된다.
(Activity XML, Fragment XML에 구현한다.)
ViewPager2 구현
1. 스와이프 View를 사용할 Activity나 Fragment의 Layout에 ViewPager2를 배치한다.
- ID를 설정해준다.
(Adapter 설정 시 필요) - 가로 / 세로 방향 변경가능하다. (앱 콘텐츠에 적합한 방향 설정)
2 (1) ViewPager2에서 사용할 Adapter 설정 - 방법 1. FragmentStateAdapter 사용
단순히 Fragemnt 간 교체를 할 때만 사용한다. (다른 뷰 콘텐츠 구성일 때)
- getItemCount
총 Item 갯수를 설정한다. - createFragment
위치에 따라 표시할 Fragment를 설정한다.
2 (2) ViewPager2에서 사용할 Adapter 설정 - 방법 2. RecyclerView Adapter 사용
같은 Layout에서 일부 View만 바꿔야 할 때 주로 사용한다. (같은 뷰 콘텐츠에 뷰의 특정 요소만 바뀔 때)
예시)인스타그램 피드 사진 뷰
3. ViewPager2와 Adapter 연결
Adapter 종류에 상관없이 동일하다. (객체 초기화는 다를 수 있다. - 객체 초기 생성)
외부 라이브러리
Android 앱의 빌드를 도와주는 Gradle를 사용해서 외부라이브러리를 설정한다.
(앱의 build.gradle 파일)
이로써, 외부 라이브러리를 직접 다운받지 않고 패키지 이름만으로 손쉽게 라이브러리를 추가해줄 수 있도록 한다.
6주차에서 사용한 ViewPager2는 외부 라이브러리이기에,
Gradle에 해당 패키지를 불러오는 코드를 별도로 작성해두어야 한다.
외부 라이브러리 가져오는 방법
build.gradle 파일 찾기 (오른쪽에 Module 붙은 파일)
가져올 라이브러리의 패키지 명 찾기 (대체로 필요한 패키지 명은 구글 서칭을 통해 찾는다.)
- Github Readme 파일에 패키지 명이 나와있디.
- 구글 안드로이드 API Doc에 패키지 명이 나와있다.
수업 중 질문 {내가 했던 ㅎㅎ}
Adapter 클래스는 특정 View 객체를 표현하기 위한 클래스 파일인가요?
Data와 View를 연결하기위한 "연결자" 클래스이다. (표현하기 어려운 VIew 객체를 나타내기 위한 개발 도구이자, 안드로이드 개발 규칙이라고 생각하면 되겠다.)
마무리하며,,
5주차에서 RecyclerView를 이용해서 뷰를 재활용하는 방법에 대해서 배웠다.
이때, RecyclerView를 사용하기 위해 Adapter 클래스 파일을 이용해서
RecyclerView의 요소들을 보일 수 있도록 설정해주었는데, 이번 6주차에서도 PagerView2를 사용할 때도
Adapter 클래스 파일을 이용해서 PagerView2 객체의 내역을 보여준다.
따라서, Adapter 클래스 파일은 View 객체에 있는 View 요소들을 쉽고, 체계적으로 나타낼 수 있게 해준다.
안드로이드 개발의 규약이자 규칙인 셈이다.
6주차를 하면서 느낀 점은 RecyclerView에서 다뤘던 Adapter 개념이 다시 쓰이고 있다는 걸 알 수 있었고, 이를 변형해서 새로운 View들을 앱에 나타내고 있음을 알 수 있었다. 기본적인 클래스 파일의 종류가 있고 이를 잘 구분해서 코드를 작성하는 게 이상적인 안드로이드 개발자가 아닐까? 라는 생각을 하게 되는 뜻깊은 경험이었다.
그래서, 5주차에 했던 내용들을 다시 잘 습득해서 6주차의 실습을 진행해보려고 한다.
오늘의 안드로이드 개발 계획은 5주차 때 완성하지 못했던 Standard Mission에 대해서 제대로 완성시키고,
6주차의 실습인 BotommNavigationView와, TabLay & ViewPager2를 구성해볼 것이다.
"5주차를 어느정도 해놔야지 6주차를 제대로 이해할 수 있을 것 같다.
오늘도 열심히 그리고 열심히"
'📚 스터디 > 프론트엔드' 카테고리의 다른 글
| [안드로이드] 6주차 실습: BottomNavigation & ViewPager2 - TabLayout (0) | 2022.11.06 |
|---|---|
| [안드로이드] 5주차 실습: RecyclerView 사용 (5) | 2022.11.05 |
| [안드로이드] 4주차: LifeCycle 실습 (0) | 2022.11.01 |
| [안드로이드] 4주차: LifeCycle, 외부 작용으로의 Activity 예외처리 (2) | 2022.10.24 |
| [안드로이드] 3주차: Activity 전환 & Fragment 전환 (0) | 2022.10.10 |