TabLayout(二)

NightRain.png

经过TabLayout(一)的一些了解，对于TabLayout的基本使应该都没有什么大问题，接下来我们就学习一下TabLayout+ViewPage+Fragment~~

效果

TabLayout效果图

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#d7d7d7"
    android:orientation="vertical">
    <!--TabLayout-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorWhite"
        app:tabContentStart="10dp"
        app:tabGravity="center"
        app:tabIndicatorColor="#ff0000"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#ff0000"
        app:tabTextAppearance="@style/TabTextStyle"
        app:tabTextColor="#00ff00" />
    <!--ViewPager-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPage_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Fragment

public class TabLayoutFragment extends Fragment {
    private String mContent = "";

    /**
     * 获取TabLayoutFragment对象
     *
     * @param content 需要向Fragment传的值
     * @return TabLayoutFragment对象
     */
    public static TabLayoutFragment getTabLayoutFragment(String content) {
        TabLayoutFragment mTabLayoutFragment = new TabLayoutFragment();
        mTabLayoutFragment.mContent = content;
        return mTabLayoutFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.activity_tab_layout_fragment, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        //简单的显示
        TextView mTextView = view.findViewById(R.id.tv_fragment);
        mTextView.setText(mContent);
    }
}

ViewPage适配器

public class ViewPageAdapter extends FragmentPagerAdapter {
    //对应的碎片
    private List<Fragment> mFragments;
    //对应的Item的标题
    private String[] mTitle;

    public ViewPageAdapter(FragmentManager fm, List<Fragment> fragments, String[] title) {
        super(fm);
        this.mFragments = fragments;
        this.mTitle = title;
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //不销毁加载过的Fragment(小技巧)
        //super.destroyItem(container, position, object);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        //TabLayout要从这里取Item中的Title内容
        return mTitle[position];
    }

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

在Activity中

• 首先初始化数据(当然了，找控件还是必须的)

    private void initData() {
        mTitleData = new String[]{
                "推荐",
                "北京",
                "热点",
                "社会",
                "房产",
                "娱乐",
                "股市",
        };
        for (int i = 0; i < mTitleData.length; i++) {
            //Fragment数据
            mFragmentData.add(TabLayoutFragment.getTabLayoutFragment(mTitleData[i]));
        }
    }

• 给ViewPage设置适配器

        //把Fragment和Title数据都给适配器
        ViewPageAdapter mViewPageAdapter = new ViewPageAdapter(getSupportFragmentManager(), mFragmentData, mTitleData);
        //设置ViewPage适配器
        vp_main.setAdapter(mViewPageAdapter);

• 将ViewPage和TabLayout关联起来

//关联ViewPage
tl_mian.setupWithViewPager(vp_main);

注意

1. 使用setupWithViewPager关联ViewPage就不需要addTab的方法来添加Item了，TabLayout会自动在ViewPage适配器中的getPageTitle方法来获取标题添加Item，详细请看ViewPage适配器中的代码；
2. 当关联ViewPage后，setScrollPosition方法不在起作用，可以用ViewPage的setCurrentItem方法达到同样的效果;