Android CoordinatorLayout进阶教程-TabLayout+ViewPage+Fragment实例

CoordinatorLayout+TabLayout+ViewPage+Fragment实例

在很多项目中我们经常会遇到一些TabLayout悬停的布局效果，像淘宝、京东等项目中都会有一些TabLayout滑动需要悬停的效果，那么这种效果是怎么实现的了，今天我用最简单的方式去实现它，先来看一下示例效果

先来看一下布局代码

<?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="wrap_content">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collsping_Toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            app:contentScrim="@color/green"
            app:title="测试"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                app:srcCompat="@mipmap/ghsy" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            app:tabMode="scrollable"
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.appbar.AppBarLayout>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

注意TabLayout是需要写在AppBarLayout中的，至于为什么可以参考前面的基础教程中关于AppBarLayout子视图悬停的原理，同时我们这里用了ViewPager2作为Fragment视图的滑动切换，配合TabLayout组件一起使用，最重要的要注意ViewPager2需要添加一个behavior，依赖的组件是AppBarLayout，下面我们再来看看Activity中的代码实现

package com.sudio.demotest;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import android.os.Bundle;
import android.view.LayoutInflater;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import com.sudio.demotest.databinding.ActivityCaseFiveBinding;
import com.sudio.demotest.fragment.CaseFragment;

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

public class CaseFiveActivity extends AppCompatActivity {

    private String[] tabTitles = {"标题1", "标题2", "标题3", "标题4", "标题5", "标题6", "标题7", "标题8", "标题9"};
    ActivityCaseFiveBinding binding;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding=ActivityCaseFiveBinding.inflate(LayoutInflater.from(this));
        setContentView(binding.getRoot());

        List<Fragment> fragments = new ArrayList<>();
        for(String tabTitle:tabTitles)
        {
            fragments.add(CaseFragment.newInstance(tabTitle));
        }
        binding.viewPager2.setAdapter(new FragmentStateAdapter(this) {
            @Override
            public Fragment createFragment(int position) {
                Fragment fragment = fragments.get(position);
                return fragment;
            }

            @Override
            public int getItemCount() {
                return fragments.size();
            }
        });

        binding.viewPager2.setOffscreenPageLimit(3);
        new TabLayoutMediator(binding.tabLayout, binding.viewPager2, true,new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab( TabLayout.Tab tab, int position) {
                //这里需要根据position修改tab的样式和文字等
                tab.setText(tabTitles[position]);
            }
        }).attach();
    }
}

关于viewPager2以及TabLayout联合使用不清楚的可以百度一下相关教程
最后附上项目Demo
[点击获取项目源码