Collapsing与Navigation

介绍Collapsing与Navigation的使用

Collapsing与Navigation

本篇已Kotlin为主要语言

关于Navigation的部分，上篇有，这里就不作多介绍了

布局

  1. 将activity_main中的 “ConstraintLayout”抽取出来，方便操作：左键选中区域，单机右键选择Refactor，在选择 Layout进行抽取，这里我命名为（layout_constraiont）

  2. 在原本的ConstraintLayout的布局中添加层级

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="192dp">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collTpplabar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:toolbarId="@+id/toolbar">
             <!-- 这里的lCollapsingToolbarLayout也就是可滑动的Toolbar，在滑动过程中进行变化的就是它 -->

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />
                <!-- 这里的layout_collapseMode设置为pin 是为了将Tooblar进行固定住，不让他上滑移出屏幕 -->
                
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
         app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
            <!-- NestedScrollView只允许有一个子类，尽量减少嵌套RecyclerView，原因可查看(CoordinatorLayout嵌套RecyclerView)文章 -->
            
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity"
                tools:showIn="@layout/activity_main">

                <fragment
                    android:id="@+id/fragment"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:defaultNavHost="true"
                    app:navGraph="@navigation/navigation" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.core.widget.NestedScrollView>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    层级如下:

    • CoordinatorLayout
      • AppBarLayout（AppBarLayout要与CoordinatorLayout一同使用）
        • CollapsingToolbarLayout（可滑动Toolbar）
        • Toolbar （最终固定的Toolbar）
      • NestedScrollView（滑动布局）
        • ConstraintLayout（约束布局）
          • fragment

  3. 因为需要将顶部通知栏进行覆盖，所以将原本的ActionBar取消掉，也就是将当前theme主题设置为 NoActionBar 即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <application
          android:allowBackup="true"
          android:icon="@mipmap/ic_launcher"
          android:label="@string/app_name"
          android:roundIcon="@mipmap/ic_launcher_round"
          android:supportsRtl="true"
          android:theme="@style/Theme.AppCompat.NoActionBar">
          <activity android:name=".MainActivity">
              <intent-filter>
                  <action android:name="android.intent.action.MAIN" />
       
                  <category android:name="android.intent.category.LAUNCHER" />
              </intent-filter>
          </activity>
      </application>

  4. 既然取消了ActionBar，那么需要自己设置一个ActionBar，在第二部中，我们创建了Toolbar，所以我们将它设置为ActionBar

    1
    2
    3
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    setSupportActionBar(toolbar)

    别的代码不需要改动

  5. 在各个Fragment中需要进行设置CollapsingToolbarLayout.title的值

    1
    2
    3
    4
    5
    6
    7
    8
    class TextFragment : Fragment() {

        override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {
            requireActivity().collTpplabar.title = getString(R.string.text_fragment)
            //直接使用requireActivity()来访问到Activity的CollapsingToolbarLayout，并为它设置Title
            return inflater.inflate(R.layout.fragment_text, container, false)
        }
    }

    就完成效果了