Material Library

12-1. AppBar

CollapsingToolbarLayout

<com.google.android.material.appbar.CollapsingToolbarLayout
	...
    app:contentScrim
    app:expandedTitleMarginBottom
    app:expandedTitleMarginStart
    app:layout_scrollFlags
    app:title>
    <View1
    	app:layout_collapseMode/>
    ...
</com.google.android.material.appbar.CollapsingToolbarLayout>

 

---

12-2. TabLayout(com.google.android.material.tabs.TabLayout)

Tab 버튼을 동적으로 만드는 경우(kotlin)

val tabLayout = binding.tabs
val tab1: TabLayout.Tab = tabLayout.newTab()
tab1.text = "Tab1"
tab1.icon = .. 
tabLayout.addTab(tab1)

 

Tab 버튼을 정적으로 만드는 경우(xml)

<com.google.android.material.tabs.TabLayout
		..>
        <com.google.android.material.tabs.TabItem
        	..
            android:text />
        ..
</>

 

Tab 버튼 event 처리

val tabLayout = binding.tabs
tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
	// tab 버튼 선택할 때 event
    override fun onTabSelected(tab: TabLayout.Tab?) {
    	// 중요한 부분
        val transaction = supportFragmentManager.beginTransaction()
        when(tab?.text) {
        	"Tab1" -> transaction.replace(R.id.tabContent, OneFragment())
            "Tab2" -> ..
        }
        transaction.commit()
    }
    // 선택된 탭 버튼을 다시 선택할 때 event
    override fun onTabReselected(tab: TabLayout.Tab?) {
    	// 생략
    }
    // 다른 탭 버튼을 눌러 선택된 탭 버튼이 해제될 때 event
    override fun onTabUnSelected(tab: TabLayout.Tab?) {
    	// 생략
    }
})

 

이때, tabContent 는 FrameLayout 이다. 

tabGravity(탭 버튼 정렬하기)

- fill(default) : 탭 버튼을 가로 등분 배치

- center : 탭 버튼을 가운데 정렬

tabMode(스크롤 설정하기)

- fixed(default): not scrolling

- scrollable: 탭 버튼이 왼쪽부터 나열, 모두 출력할 수 없으면 자동으로 가로 스크롤이 생김

TabHost	TabLayout
플랫폼 API 에서 레벨 1부터 제공하는 뷰	Material Library 에서 제공
과거에 주로 사용	최근에 사용
API 30 에서 deprecated 됨	공식 매뉴얼에서 사용하라고 권함
탭 버튼을 다양하게 구성하기 어려움	탭 버튼을 다양하게 구성하기에 용이함

ViewPager2 와 TabLayout 연동

1. tabLayout 과 ViewPager 등록(xml 파일)

<LinearLayout xmlns:android:"https://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <com.google.android.material.tabs.TabLayout
    	android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>
    <androidx.viewpager2.widget.ViewPager2
    	android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/> // 이 부분이 잘 이해가 가지 않음
</LinearLayout>

 

2. tabLayout 과 ViewPager 연동(코틀린 코드)

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
	tab.text = "Tab${(position+1)}"
}.attach()

---

12-3. Navigation View(DrawerLayout Configuration)

1. Navigation View 등록

<androidx.drawerlayout.widget.DrawerLayout ... >
	
    <LinearLayout ... >
    	...
    </LinearLayout>
    
    // DrawerLayout 의 두번째 태그로 NavigationView 지정
    <com.google.android.material.navigation.NavigationView
    	android:id="@+id/main_drawer_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header" // NavigationView 의 위쪽을 어떻게 출력할 지 지정
        app:menu="@menu/menu_navigation" /> // NavigationView 의 아래쪽에 출력할 항목 지정
    
</androidx.drawerlayout.widget.DrawerLayout>

 

2. 항목 선택 이벤트 핸들러

navigationView.setNavigationItemSelectedListener {
	Log.d("kkang", "navigation item clicked : ${it.title}")
    true
}

---

12-4 Extended FAB(Floating Action Button)

Material Library 가 처음 나왔을 때는 FAB(FloatingActionButton) 을 제공했지만, 지금은 버튼에 문자열까지 출력할 수 있는 Extended FAB 을 제공한다.

 

1. xml 코드

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
	android:text="extended FAB"
    app:icon="@android:drawable/.." />

 

text 속성을 꼭 지정하지 않아도 된다.

 

2. 액션 버튼 조절(코틀린)

binding.extendedFab.setOnClickListener {
    when(binding.extendedFab.isExtended) { // 아이콘과 문자열이 함께 표시된 경우
    	true -> binding.extendedFab.shrink()
        false -> binding.extendedFab.extend()
    }
}