AppbarLayout+双导航嵌套滑动效果

立即下载用AI写一个

发布时间：2020-09-07

2人 | 浏览：1871次 | 收藏 |

技术：android

概述

AppBarLayout,NestedScrollView,ViewPager,RecyclerView实现多层Fragment嵌套，头部滑动特效。

详细

### 前言
现在很多的app都带有双导航，然后内层`Fragment`中有`ViewPager+RecyclerView`嵌套，关键是还伴有导航栏顶部滑动可见与隐藏功能。那么今天就来详细讲讲它的实现吧。
今天讲解的知识会涉及到`AppBarLayout+NestedScrollView+ViewPager+RecyclerView`的联合使用。大家若对`AppBarLayout及其相关控件`感兴趣的话，可以参考我另一篇文章：
[CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout使用详解](https://www.jianshu.com/p/7f4d1eedc26c)
下面给大家简单讲讲实现`双导航+头部特效`的ui效果。具体大家可以下demo查看。

今天涉及知识点：
1. 实现逻辑
2. 实现过程部分代码展示
3. 特别说明
4. 效果图和项目结构图

先来波效果图：
![](/contentImages/image/20200907/7aP8EviSK9aq9YE47ty.gif)

#### 一.实现逻辑
外层的底部导航栏我是用`ViewPager+Fragment`,然后底部用`RedioGroup`实现。
这里我准备了三个Fragment：`FragmentA`，`FragmentB`和`FragmentC`。

实现头部滑动特效及内层顶部导航: 这个特效主要实现在底部导航栏的`首页`界面，即`FragmentA`这个`Fragment`中。
`FragmentA`中有一个`标题栏`，一个`滑动可见/不可见的布局`，一个`导航栏`和`viewPager`,其中`滑动可见/不可见的布局`特效是用`CoordinatorLayout+AppBarLayout+NestedScrollView`等控件实现，`导航栏+ViewPager`特效是用`TabLayout+ViewPager`实现。然后`ViewPager`加载了两个子`fragment`:`ChildFragmentOne`和`ChildFragmentTwo`。

内层Fragment中的列表数据实现：`ChildFragmentOne`中展示的是一个列表。
#### 二. 实现过程部分代码展示
外层底部导航栏涉及到的有三个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">

</androidx.constraintlayout.widget.ConstraintLayout>
```
内层Fragment中的列表数据实现主要涉及到`ChildFragmentOne`中展示的是一个列表。下面给出列表适配器`DefaultAdapter`代码:

```
public class DefaultAdapter <T>extends RecyclerView.Adapter{

protected Context mContext;
    protected View mLayoutView;
    protected List<T> mData;

public DefaultAdapter(Context context,List<T>data){
        this.mContext=context;
        this.mData=data;
    }

@NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        mLayoutView= LayoutInflater.from(mContext).inflate(R.layout.item_one,parent,false);
        ViewHolder viewHolder=new ViewHolder(mLayoutView);
        return viewHolder;
    }

@Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        String name=mData.get(position).toString();
        ((ViewHolder)holder).mTvName.setText(name);
    }

@Override
    public int getItemCount() {
        return mData==null?0:mData.size();
    }

class ViewHolder extends RecyclerView.ViewHolder{

TextView mTvName;

public ViewHolder(View view) {
            super(view);
            mTvName=(TextView)view.findViewById(R.id.tv_text);
        }
    }
}
```
适配器对应布局`item_one.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="wrap_content"
    android:background="@color/white">

</androidx.constraintlayout.widget.ConstraintLayout>
```
#### 三. 特别说明
由于本案例涉及代码相对较多，故只能贴出部分代码以作展示，具体大家可以下载demo查看。
#### 四. 效果图和项目结构图
![](/contentImages/image/20200907/Q6iu973Lkmv8jmwLLPS.gif)

![](/contentImages/image/20200907/9Gg3VDOMVrqvWFuNxYu.png)

ok，今天的内容就介绍到这里了，谢谢大家。
***
更多精彩内容，请关注微信公众号 "**Android进击**",大家一起来学习进步吧
<div style="text-align: center;">
![](/contentImages/image/20200907/NK7p3pRsl9cpakZ9BA1.jpg)
</div>

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

AppbarLayout+双导航嵌套滑动效果

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子