[groomUniv] 안드로이드 스터디 - 4주차

뷰페이저

뷰페이저는 화면단위의 아이템을 리스트뷰, 리사이클러뷰와 같이 나열해주는 개념이다.

어댑터는 리사이클러뷰 어댑터를 사용할 수 있고, FragmentStateAdapter 를 사용할 수도 있다.

다만, 화면마다 구성이 다르므로 리사이클러뷰 어댑터보다 fragmentStateAdapter 가 권장된다.

 

드로어 레이아웃

드로어 레이아웃의 xml 선언 형식의 경우, 루트 태그를 DrawerLayout 으로 설정하고, 하위 태그를 2개 설정하되 첫 번째 태그는 처음 화면에 띄울 뷰이고, 두 번째 태그는 드로어 레이아웃으로 끌어 당겼을 때 나올 뷰이다. 두 번째 태그의 layout_gravity 속성은 화면에서 어느 방향으로부터 뷰가 나올지를 정할 수 있다.

 

* 액션바에서 토글 버튼 활성화는 ActionBarDrawerToggle 로 설정이 가능하다.

supportActionBar?.setDisplayHomeAsUpEnabled(true)
ActionBarDrawerToggle.syncState()   // 화면 내 토글 객체와 drawerLayout 연결

 

Coordinator Layout

CoordinatorLayout 은 두개 이상의 뷰에 대해서 하나의 뷰에서 발생하는 상호작용 정보를 다른 하나의 뷰에 전달시켜줌으로써 뷰 두개에 상호작용이 동시에 발생하도록 해준다. 예를 들어서, 뷰 하나에서 스크롤하면 다른 뷰에서도 동시에 스크롤이 가능하도록 해준다. 단 이 때, CoordinatorLayout 안의 모든 자식뷰들한테 정보를 전달해주는게 아니라, behavior 클래스를 통해 스크롤 정보를 전송하고, scrollFlag 를 통해 스크롤 정보를 수신하여 상호작용이 연동된다.

 

scroll | enterAlways -> 메인 콘텐츠 스크롤시 사라지고, 거꾸로 스크롤 시 즉시 나타난다.

scroll | enterAlwaysCollapsed -> 메인 콘텐츠 스크롤 시 사라지고, 메인 콘텐츠 최상단에서 거꾸로 스크롤시에만 나타난다.

scroll | exitUntilCollapsed -> 메인 콘텐츠 스크롤 시 모두 사라지지 않고 툴바(타이틀) 가 보일 정도의 높이까지만 사라진다.

 

CollapsingToolbar Layout

앱바 레이아웃 하위에서 사용되는 레이아웃으로, 툴바 하위에 뷰가 여러개 존재하는 경우 개별적으로 scrollFlag 를 설정하는 대신에, CollapsingToolbar Layout 에 scrollFlag 를 설정하고, 하위 뷰들에 대해서는 collapseMode 만 설정하여 스크롤 연동 작업을 편리하게 해준다.

 

parallax -> 뷰가 함께 스크롤 된다.

pin -> 뷰가 스크롤되지 않고 고정된다.

 

TabLayout

탭 레이아웃은 보통 탭 레이아웃과 프레임 레이아웃을 동일한 레이어에서 병렬적으로 사용하여, 탭 레이아웃 안의 버튼들을 누를 때마다 프레임 레이아웃 안의 컨텐츠들을 변경하는 식으로 사용한다.

 

정적 구현방식은 xml 의 TabLayout 안에서 TabItem 하위 뷰를 추가하면 된다.

동적 구현방식은 소스코드에서 다음과 같이 가능하다.

val tab1 = binding.tabLayout.newTab()
tab1.text = “탭1”
tab1.setIcon(~~)
binding.tabLayout.addTab(tab1)

 

탭 레이아웃과 뷰페이저를 TabLayoutMediator 를 이용해 연동할 수도 있다.

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
tab.text = “탭 + ${position+1}”   // 탭 제목 설정
 }.attach()

 

Navigation View

DrawerLayout 에서 하위 뷰를 2개 설정하면 2번째 하위 뷰가 드로어 레이아웃 안에 나타는데

이 때, 아래는 메뉴 형식이면서 위에 다른 레이아웃을 설정하고 싶다면 네비게이션뷰를 하위뷰로 설정해준다. 

NavigationView 안에서 app:headerLayout 에 위에 표시될 레이아웃을 @layout 형태로 전달하고 app:menu 에 @menu 형태로 메뉴 레이아웃을 전달하면 된다.

메뉴 선택 이벤트는 drawerLayout.setNavigationItemSelectedListener { it ->  } 으로 이벤트를 처리하면 된다.