AppbarLayout+双导航嵌套滑动效果

前言

现在很多的app都带有双导航，然后内层Fragment中有ViewPager+RecyclerView嵌套，关键是还伴有导航栏顶部滑动可见与隐藏功能。那么今天就来详细讲讲它的实现吧。
今天讲解的知识会涉及到AppBarLayout+NestedScrollView+ViewPager+RecyclerView的联合使用。大家若对AppBarLayout及其相关控件感兴趣的话，可以参考我另一篇文章：
CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout使用详解
下面将带领大家一步步实现双导航+头部特效的ui效果。

今天涉及知识点：

1. 实现底部导航栏
2. 实现头部滑动特效及内层顶部导航
3. 内层Fragment中的列表数据实现
4. 实现过程需要注意的点
5. 效果图和项目结构图

先来波效果图：

1.gif

---

更多精彩内容，请关注微信公众号 "Android进击",大家一起来学习进步吧

---

一. 实现底部导航栏

外层的底部导航栏我是用ViewPager+Fragment,然后底部用RedioGroup实现。
这里我准备了三个Fragment：FragmentA，FragmentB和FragmentC。
FragmentB和FragmentC比较简单，都是基本的Fragment,以FragmentB为例，贴下FragmentB代码：

package com.testdemo.other;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.testdemo.R;

/**
 * Title:
 * description:
 * autor:pei
 * created on 2020/9/2
 */
public class FragmentB extends Fragment {

    private View mLayoutView;
    private Context mContext;
    private TextView mTvTestA;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.mContext=context;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mLayoutView = inflater.inflate(R.layout.fragment_b, container, false);

        initView();
        initData();
        setListener();

        return mLayoutView;
    }

    private void initView(){
        mTvTestA=mLayoutView.findViewById(R.id.tv_a);
    }

    private void initData(){
        Bundle bundle=getArguments();
        String value="";
        if(bundle!=null) {
            value = bundle.getString("A");
        }
        mTvTestA.setText("故事");
    }

    private void setListener(){}

}

FragmentB对应布局fragment_b代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    android:clickable="true"
    android:background="@color/white">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="Hello World!"
        android:textColor="#000000"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后看下ViewPager+Fragment及底部RedioGroup导航在TempActivity中的实现。TempActivity对应布局activity_temp.xml代码如下:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="@color/white">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/line"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/line"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@color/red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/rg_tab_bar"/>

    <RadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:paddingTop="7dp"
        android:paddingBottom="7dp">

        <RadioButton
            android:id="@+id/rb_home"
            style="@style/main_tab_item"
            android:drawableTop="@drawable/tab_home_bg"
            android:text="首页" />

        <RadioButton
            android:id="@+id/rb_news"
            style="@style/main_tab_item"
            android:drawableTop="@drawable/tab_news_bg"
            android:text="故事" />

        <RadioButton
            android:id="@+id/rb_choose"
            style="@style/main_tab_item"
            android:drawableTop="@drawable/tab_choose_bg"
            android:text="论坛" />
    </RadioGroup>

</androidx.constraintlayout.widget.ConstraintLayout>

布局中涉及到两个样式：style="@style/main_tab_item"和android:drawableTop="@drawable/tab_home_bg"。
@style/main_tab_item样式如下：

    <style name="main_tab_item">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingTop">3dp</item>
        <item name="android:textColor">@drawable/main_tab_text</item>
        <item name="android:textSize">14sp</item>
    </style>

里面引用的@drawable/main_tab_text样式代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/red" android:state_checked="true" />
    <item android:color="#969696" android:state_checked="false"/>
</selector>

然后@drawable/tab_home_bg样式代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/ic_home_checked" android:state_checked="true" />
    <item android:drawable="@mipmap/ic_home_unchecked" android:state_checked="false"/>
</selector>

ok,activity_temp.xml代码讲解完毕，下面贴出TempActivity代码：