이번 포스팅은 메인 Activity에서 실행되는 Fragment의 Navigation에 대해서 분석해보겠습니다.
메인 Activity의 FragmentContainerView의 nav_garden 그래프에서 시작 Fragment로 등록되어있는 view_pager_fragment 아이디를 갖는 HomeViewPagerFragment를 확인해보겠습니다.
nav_garden.xml
HomeViewPagerFragment
레이아웃 먼저 확인해 보았습니다.
<!--
~ Copyright 2018 Google LLC
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ https://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--
Note: even though the IDs for the CoordinatorLayout and the AppBarLayout unused in HomeViewPagerFragment, they are
both required to preserve the toolbar scroll / collapse state when navigating to a new screen and then coming back.
-->
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/Theme.Sunflower.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
app:toolbarId="@id/toolbar">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
style="@style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:layout_collapseMode="parallax">
<TextView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:text="@string/app_name"
android:textAppearance="?attr/textAppearanceHeadline5" />
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<!-- Override tabIconTint attribute of style with selector -->
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
style="@style/Widget.MaterialComponents.TabLayout.Colored"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIconTint="@drawable/tab_icon_color_selector"
app:tabTextColor="?attr/colorPrimaryDark"/>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
CollapsingToolbarLayout의 scrollFlags로 scroll과 snap을 설정한 상태에서 layout_collapseMode를 parallax로 설정하게 되면 스크롤 시 AppBarLayout의 내용은 가려지고 다시 살짝 위로 올리면 toolbar가 보였다가 완전히 위로 스크롤하게되면 AppBarLayout이 열리게된다.
이 프로젝트에는 아래로 스크롤 시 tabLayout만 보이고 toolbar는 가려지고, 위로 스크롤시 최상단에 도착하게되면 toolbar가 열리게 된다.
style이 설정되어 있습니다.
view에 style을 설정하게되면, 해당하는 style에 설정되어있는 view의 속성들(ex. padding, margin, background ...)을 간단하게 설정할 수 있습니다.
style은 @style/Widget.MaterialComponents.Toolbar.Primary이 설정되어 있습니다.
설정된 값은 아래와 같습니다.
<style name="Widget.MaterialComponents.Toolbar.Primary">
<item name="android:elevation" ns2:ignore="NewApi">@dimen/design_appbar_elevation</item>
<item name="android:background">?attr/colorPrimary</item>
<item name="titleTextColor">?attr/colorOnPrimary</item>
<item name="subtitleTextColor">@color/material_on_primary_emphasis_medium</item>
<!-- Note: this theme overlay will only work if the style is applied directly to a Toolbar. -->
<item name="android:theme">@style/ThemeOverlay.MaterialComponents.Toolbar.Primary</item>
</style>
/*
* Copyright 2018 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.google.samples.apps.sunflower
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.google.android.material.tabs.TabLayoutMediator
import com.google.samples.apps.sunflower.adapters.MY_GARDEN_PAGE_INDEX
import com.google.samples.apps.sunflower.adapters.PLANT_LIST_PAGE_INDEX
import com.google.samples.apps.sunflower.adapters.SunflowerPagerAdapter
import com.google.samples.apps.sunflower.databinding.FragmentViewPagerBinding
import dagger.hilt.android.AndroidEntryPoint
@AndroidEntryPoint
class HomeViewPagerFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val binding = FragmentViewPagerBinding.inflate(inflater, container, false)
val tabLayout = binding.tabs
val viewPager = binding.viewPager
viewPager.adapter = SunflowerPagerAdapter(this)
// Set the icon and text for each tab
TabLayoutMediator(tabLayout, viewPager) { tab, position ->
tab.setIcon(getTabIcon(position))
tab.text = getTabTitle(position)
}.attach()
(activity as AppCompatActivity).setSupportActionBar(binding.toolbar)
return binding.root
}
private fun getTabIcon(position: Int): Int {
return when (position) {
MY_GARDEN_PAGE_INDEX -> R.drawable.garden_tab_selector
PLANT_LIST_PAGE_INDEX -> R.drawable.plant_list_tab_selector
else -> throw IndexOutOfBoundsException()
}
}
private fun getTabTitle(position: Int): String? {
return when (position) {
MY_GARDEN_PAGE_INDEX -> getString(R.string.my_garden_title)
PLANT_LIST_PAGE_INDEX -> getString(R.string.plant_list_title)
else -> null
}
}
}
@AndroidEntryPoint 어노테이션을 통해 Hilt 종속성 주입이 사용되었습니다.
Hilt 종속성은 따로 다룰 예정입니다.
Fragment에서 override 한 메서드는 View를 생성하기 위한 단계인 onCreateView() 함수만 사용되었습니다.
댓글