94.android 简单的TabLayout(SlidingTabLayout)+ViewPager+fragment的效果

//先上效果图：

//第一步 导入依赖：

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

//第二步 我的MainActivity代码实现：

public class MainActivity extends AppCompatActivity {

    private SlidingTabLayout mOuterTab;
    private ViewPager mOuterViewPager;
    private final String[] mTitles = {"热门动态","我的好友"};
    private List<Fragment> mFragmentList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    //初始化控件
    private void initView() {
        mOuterTab = (SlidingTabLayout) findViewById(R.id.mOuterTab);
        mOuterViewPager = (ViewPager) findViewById(R.id.mOuterViewPager);
    }

    //集合添加数据,创建fragment,适配器适配
    private void initData() {
        mFragmentList.add(new AFragment());
        mFragmentList.add(new BFragment());
        FragmentApader apader = new FragmentApader(getSupportFragmentManager(),mFragmentList, mTitles);
        mOuterViewPager.setAdapter(apader);
        mOuterTab.setViewPager(mOuterViewPager);
    }
}

//我的Activity布局activity_main.xml：

<LinearLayout 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:orientation="vertical"
    android:gravity="center"
    tools:context="com.gannan.gannan.MainActivity">

    <com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/mOuterTab"
        app:tl_textBold="true"
        app:tl_textsize="20sp"
        app:tl_indicator_width="100dp"
        app:tl_tab_padding="20dp"
        app:tl_tab_space_equal="true"
        app:tl_indicator_corner_radius="5dp"
        app:tl_indicator_style="BLOCK"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        app:tl_indicator_color="#000000"
        app:tl_textSelectColor="@color/colorAccent"
        app:tl_textUnselectColor="@color/colorPrimary">
    </com.flyco.tablayout.SlidingTabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/mOuterViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</LinearLayout>

//第三步 创建FragmentApader用来适配Fragment和ViewPager，外层的TabLayout+ViewPager和里层嵌套的TabLayout+ViewPager都是使用这一个适配器： 

public class FragmentApader extends FragmentPagerAdapter{
    private List<Fragment>mFragmentList;
    private String[] mTitles;

    public FragmentApader(FragmentManager fm, List<Fragment> mFragmentList, String[] mTitles) {
        super(fm);
        this.mFragmentList = mFragmentList;
        this.mTitles = mTitles;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

//第四步 创建两个Fragment，我这里是创建了AFragment和BFragment，BFragment里没东西，主要是在AFragment里写了嵌套的TabLayout，先来看AFragment：

//AFragment： 

public class AFragment extends Fragment {
    private ViewPager mViewPager;
    private SlidingTabLayout mTab;
    private final String[] mTitles = {"电影", "电视剧", "小视频", "音乐", "笑话", "图片", "小品"};
    private List<Fragment> mFragmentList = new ArrayList<>();

    public AFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View inflate = inflater.inflate(R.layout.fragment_a, container, false);
        initView(inflate);
        initData();
        return inflate;
    }

    //初始化控件
    private void initView(View inflate) {
        mViewPager = (ViewPager) inflate.findViewById(R.id.mViewPager);
        mTab = (SlidingTabLayout) inflate.findViewById(R.id.mTab);
    }

    //for循环添加数据,fragment复用传值,viewPager适配器进行适配
    private void initData() {
        for (int i = 0; i < mTitles.length; i++) {
            //创建复用的fragment对象
            MyFragmentMultiplexing multiplexing = new MyFragmentMultiplexing();
            //创建传值Bundle对象
            Bundle bundle = new Bundle();
            //bundle传值添加数据
            bundle.putString("title", mTitles[i]);
            //传递这个bundle
            multiplexing.setArguments(bundle);
            //fragment集合添加这个对象，fragment集合添加了数组里所有的字符串
            mFragmentList.add(multiplexing);
        }


        //然后是ViewPager适配器，搭配上SlidingTabLayout
        FragmentApader apader = new FragmentApader(getChildFragmentManager(), mFragmentList, mTitles);
        mViewPager.setAdapter(apader);
        mTab.setViewPager(mViewPager);
    }

}

//AFragment布局fragment_a.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    
    <com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/mTab"
        app:tl_indicator_width="70dp"
        app:tl_indicator_corner_radius="5dp"
        app:tl_indicator_style="BLOCK"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tl_indicator_color="#000000"
        app:tl_textSelectColor="@color/colorAccent"
        app:tl_textUnselectColor="@color/colorPrimary">
    </com.flyco.tablayout.SlidingTabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</LinearLayout>

//BFragment：

public class BFragment extends Fragment {


    public BFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_b, container, false);
    }

}

//BFragment布局fragment_b.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gannan.gannan.AFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="BFragment" />

</FrameLayout>

//第五步 在AFragment里创建MyFragmentMultiplexing，这是个用来复用的Fragment，与TabLayout和ViewPager进行连用的：

public class MyFragmentMultiplexing extends Fragment {

    private String title;
    private TextView mText;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //获取从AFragment里发送来的bundle值
        Bundle arguments = getArguments();
        if (arguments != null) {
            title = arguments.getString("title");
        }
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.outer_fragment, null);
        initView(inflate);
        initData();
        return inflate;
    }

    //初始化fragment控件
    private void initView(View inflate) {

        mText = (TextView) inflate.findViewById(R.id.mText);
    }

    //设置页面数据显示
    private void initData() {
        switch (title) {
            case "电影":
                mText.setTextColor(Color.RED);
                mText.setBackgroundColor(Color.BLUE);
                break;
            case "电视剧":
                mText.setTextColor(Color.BLUE);
                mText.setBackgroundColor(Color.BLACK);
                break;
            case "小视频":
                mText.setTextColor(Color.WHITE);
                mText.setBackgroundColor(Color.YELLOW);
                break;
            case "音乐":
                mText.setTextColor(Color.RED);
                mText.setBackgroundColor(Color.WHITE);
                break;
            case "笑话":
                mText.setTextColor(Color.BLACK);
                mText.setBackgroundColor(Color.BLUE);
                break;
            case "图片":
                mText.setTextColor(Color.BLUE);
                mText.setBackgroundColor(Color.RED);
                break;
            case "小品":
                mText.setTextColor(Color.BLUE);
                mText.setBackgroundColor(Color.WHITE);
                break;
        }
        mText.setText(title);
    }

    //fragment懒加载
    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        try {
            if (getUserVisibleHint()) {
                //界面可见时
                Toast.makeText(getContext(), title, Toast.LENGTH_SHORT).show();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

//MyFragmentMultiplexing的布局multiplexing_fragment.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gannan.gannan.BFragment">

    <!-- TODO: Update blank fragment layout -->


    <TextView
        android:gravity="center"
        android:id="@+id/mText"
        android:textStyle="bold"
        android:textSize="30sp"
        android:textColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

//SlidingTabLayout布局的属性：

//系统的tab，TabLayout 滑动到哪个 哪个字体就变大 变粗：

mKnowledgeFragmentTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                float selectedSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 18, getResources().getDisplayMetrics());
                if (null== tab.getCustomView()){
                    TextView textView = new TextView(getActivity());
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,selectedSize);
                    textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                    textView.setTextColor(getResources().getColor(R.color.black));
                    textView.setText(tab.getText());
                    tab.setCustomView(textView);
                }else {
                    TextView textView = (TextView) tab.getCustomView();
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,selectedSize);
                    textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                    textView.setTextColor(getResources().getColor(R.color.black));
                    textView.setText(tab.getText());
                    tab.setCustomView(textView);
                }

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                float selectedSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 15, getResources().getDisplayMetrics());
                if (null== tab.getCustomView()){
                    TextView textView = new TextView(getActivity());
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,selectedSize);
                    textView.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    textView.setTextColor(getResources().getColor(R.color.black));
                    textView.setText(tab.getText());
                    tab.setCustomView(textView);
                }else {
                    TextView textView = (TextView) tab.getCustomView();
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,selectedSize);
                    textView.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    textView.setTextColor(getResources().getColor(R.color.black));
                    textView.setText(tab.getText());
                    tab.setCustomView(textView);
                }

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

//---------------------------------------------------------------------完-----------------------------------------------------------------------------