TabLayout系列：FlycoTabLayout实现点击切换效果

先看效果图，

• app module下build.gradle中集成

 implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'

这个库的Github项目地址：https://github.com/H07000223/FlycoTabLayout，我只做点击切换效果，不做滑动切换效果，因为我的开发经验来讲，做滑动切换会有许多问题。所以我专门把ViewPager的滑动功能禁止掉了。

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.ViewPager;

/**
 * 不可以滑动，但是可以setCurrentItem的ViewPager。
 */
public class CannotScrollViewPager extends ViewPager {


    public CannotScrollViewPager(@NonNull Context context) {
        this(context, null);
    }

    public CannotScrollViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        return false;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        return false;
    }
}

• 开始写主布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentTop="true"
        app:tl_indicator_color="#4F9AFF"
        app:tl_indicator_corner_radius="3dp"
        app:tl_indicator_gravity="BOTTOM"
        app:tl_indicator_height="4dp"
        app:tl_indicator_margin_bottom="8dp"
        app:tl_indicator_width="40dp"
        app:tl_tab_space_equal="true"
        app:tl_textSelectColor="#ff313543"
        app:tl_textUnselectColor="#99313543"
        app:tl_textsize="15sp"
        app:tl_textBold="BOTH"/>

    <com.zj.tablayoutdemo.CannotScrollViewPager
        android:id="@+id/vp"
        android:layout_below="@id/tabs"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

MainAcitivity代码

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import android.os.Bundle;
import com.flyco.tablayout.SlidingTabLayout;

public class MainActivity extends AppCompatActivity {
    SlidingTabLayout tabLayout;
    String[] nameList = new String[]{"课堂报告","学习记录"};
    CannotScrollViewPager viewPager;
    private Fragment[] fragments;
    private ReportFragmentAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = findViewById(R.id.tabs);
        viewPager = findViewById(R.id.vp);

        fragments = new Fragment[2];
        fragments[0] = new RedFragment();
        fragments[1] = new BlueFragment();

        adapter = new ReportFragmentAdapter(getSupportFragmentManager(), fragments, nameList);
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(2);

        tabLayout.setViewPager(viewPager, nameList);

    }
}

下面是 BlueFragment、RedFragment、ReportFragmentAdapter代码：

public class RedFragment extends Fragment {
    View view;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_red, container, false);
        return view;
    }
}

public class BlueFragment extends Fragment {
    View view;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_blue, container, false);
        return view;
    }
}


public class ReportFragmentAdapter extends FragmentPagerAdapter {
    private String[] mTitle;
    private Fragment[] fragments;

    public ReportFragmentAdapter(FragmentManager fm, Fragment[] fragments, String[] pageNames) {
        super(fm);
        this.fragments = fragments;
        this.mTitle = pageNames;
    }

    @Override
    public Fragment getItem(int i) {
        return fragments[i];
    }


    @Override
    public int getCount() {
        return fragments.length;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitle[position];
    }
}

RedFragment对应的布局文件,BlueFragment的布局文件就不用贴了吧。搞定。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    >
</RelativeLayout>