Android AppBarLayout+TabLayout+ViewPager实现导航栏渐变、tab标签悬浮固定效果

以前很羡慕别人的App，高端大气上档次，现在很多的界面都有这样的效果：要求导航栏渐变、页面Tab标签跟随页面滚动，悬浮固定到顶部。嗯嗯....大致表达出来就这个画面吧```还是直接上图吧。没有gif，只能截图了；

                     

网上已经有很多AppBarLayout的帖子了，这里我就不讲理论的东西了，直接上代码了。代码中有注释，根据注释，你可以实现自己的界面了。

提起那说一下，要使用AppBarLayout,先添加依赖

implementation 'com.android.support:design:27.1.1'

布局界面：

里边都有注释了，自己看看吧。

activity：

package com.project.teacherevaluation.activity;

import android.graphics.Color;
import android.support.annotation.Nullable;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.ViewGroup;

import com.project.teacherevaluation.R;
import com.project.teacherevaluation.adapters.RankingAdapter;
import com.project.teacherevaluation.base.BaseActivity;
import com.project.teacherevaluation.bean.RankingListBean;
import com.project.teacherevaluation.fragment.MineGradeFragment;
import com.project.teacherevaluation.fragment.MineTaskFragment;

import java.util.ArrayList;
import java.util.List;

public class TextMyActivity extends BaseActivity {
    //    private RecyclerView recyclerView;
    //
    //    private List rankingList;
    //    private TextMyAdapter textMyAdapter;
    //    private LinearLayoutManager linearLayoutManager;

    private AppBarLayout appBarLayout;
    private Toolbar mToolbar;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    @Override
    protected int getLayoutId() {
        return R.layout.activity_text_my;
    }

    @Override
    public void initView(Bundle savedInstanceState) {
        //        recyclerView = findViewById(R.id.recyclerview);
        //        rankingList = new ArrayList<>();
        //        for (int i = 0; i < 20; i++) {
        //            rankingList.add("王喜福"+i);
        //        }
        //        textMyAdapter = new TextMyAdapter(rankingList, mContext);

        appBarLayout = findViewById(R.id.appBarLayout);
        mToolbar = findViewById(R.id.toolbar);
        mTabLayout = findViewById(R.id.infoPhoneTabLayou);
        mViewPager = findViewById(R.id.infoPhone_Fragment_pager);

        TabLayout();


        // 滑动监听“
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//                 导航栏为固定颜色时：
                                mToolbar.setBackgroundColor(changeAlpha(getResources().getColor
                 (R.color.deepskyblue),Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
//                 导航栏有特有的背景时：直接改变透明度就行
//                mToolbar.setAlpha(Math.abs(verticalOffset * 1.0f) / appBarLayout
//                        .getTotalScrollRange());
                //mToolbar.setBackgroundResource(R.mipmap.ranking_logo);
            }
        });
    }

    @Override
    protected void loadNetData() {
        //        linearLayoutManager = new LinearLayoutManager(mActivity);
        //        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        //        recyclerView.setLayoutManager(linearLayoutManager);
        //        recyclerView.setAdapter(textMyAdapter);
    }


    /**
     * 根据百分比改变颜色透明度
     */
    public int changeAlpha(int color, float fraction) {
        int red = Color.red(color);
        int green = Color.green(color);
        int blue = Color.blue(color);
        int alpha = (int) (Color.alpha(color) * fraction);
        return Color.argb(alpha, red, green, blue);
    }


    /**
     * TabLayout
     * 初始化
     */
    private void TabLayout() {
        final List list_Title = new ArrayList<>();
        list_Title.add("图文详情");
        list_Title.add("规格参数");

        final List fragmentList = new ArrayList<>();
        fragmentList.add(new MineGradeFragment());
        fragmentList.add(new MineTaskFragment());

        //FragmentPagerAdapter适用于Fragment比较少的情况，它会把每一个Fragment
        // 保存在内存中，不用每次切换的时候，去保存现场，切换回来在重新创建，所以用户体验比较好。而对于Fragment比较多的情况，需要切换的时候销毁以前的Fragment
        // 以释放内存，就可以使用FragmentStatePagerAdapter。

        //预加载
        mViewPager.setOffscreenPageLimit(fragmentList.size());
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                super.destroyItem(container, position, object);
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return list_Title.get(position);
            }
        });

        mTabLayout.setupWithViewPager(mViewPager);
    }

}

其中主要的就是滑动监听了，在其中做相应的操作就好了；好了，基本上就这样了。

这个是Tablayout+ViewPager的固定效果。其实我的初衷是想实现淘宝商品购物界面的TabLayout+AppBar的滑动锚点效果，但是单独的使用锚点效果还是能实现的，但是与AppBarLayout结合到一起后，就会出现滑动冲突、联动失效等bug。还请各位大神有没有好的帖子，留言推荐下！谢谢了~~