TableLayout和ViewPager实现标题栏索引

因为我是在之前的基础上写的，所以这个TableLayout和Viewpager实际上是写在Fragment上的。要写到Activity里其实也是一样的啦。

先看效果图，原谅我不会动态图，只能截个图啦

布局文件

app：tabIndicatorcolor意思是选中的导航条的颜色。

app：tabSelectesTextColor是选中的导航条的文字颜色。

app：tabTextColor 是没有选中的导航条文字的颜色。

xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

            android:id="@+id/tab"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/selectTable"
        app:tabSelectedTextColor="@color/selectTable"
        app:tabTextColor="@color/black" />

            android:id="@+id/vp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"

        />

java代码

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.lvyequeen.mystudysummry.R;
import com.lvyequeen.mystudysummry.adapters.FragmentVpAdapter;

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

/**
 * author: lvqueen
 * mailbox: [email protected]
 * time: 15/12/18 10:06
 */
public class CertificFragment extends Fragment {
    private ViewPager vp;
    private TabLayout tab;
    private List tablist = new ArrayList<>();
    private List views = new ArrayList<>();
    private FragmentVpAdapter fragmentVpAdapter;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        initViews();
        initTabStr();
        View view = inflater.inflate(R.layout.fragment_certific, null);
        tab = ((TabLayout) view.findViewById(R.id.tab));
        vp = ((ViewPager) view.findViewById(R.id.vp));

        tab.setTabMode(TabLayout.MODE_FIXED);
        for (int i = 0; i < 3; i++) {
            tab.addTab(tab.newTab().setText(tablist.get(i)));
        }

        fragmentVpAdapter = new FragmentVpAdapter(views, tablist);
        vp.setAdapter(fragmentVpAdapter);

//        将tablelayout和ViewPager关联起来
        tab.setupWithViewPager(vp);
        tab.setTabsFromPagerAdapter(fragmentVpAdapter);
        return view;
    }

    /**
     * 初始化Viewpager的每个页面内容，这里为了简单，就直接new的视图
     * 如果想要不同布局的内容，就按ViewPager的使用方式就行了。
     */
    private void initViews() {
        views.clear();
        for (int i = 0; i < 3; i++) {
            TextView view = new TextView(getContext());
            view.setText(i + 1 + "个viewpager的填充界面");
            views.add(view);
        }

    }

    /**
     * 同样为了简单，标题栏的内容就这么附值了。
     */
    private void initTabStr() {
        tablist.clear();
        for (int i = 0; i < 3; i++) {
            tablist.add("标题" + (1 + i));
        }
    }
}

 适配器的代码，和平时viewpager的写法是一样的，但是多了一个方法getPageTitle();

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * author: lvqueen
 * mailbox: [email protected]
 * time: 15/12/22 23:17
 */
public class FragmentVpAdapter extends PagerAdapter {
//    这个是viewpager的填充视图
    private List views;
//    这个是table导航条里面的内容填充
    private List tabstrs;

    public FragmentVpAdapter(List views, List tabstrs) {
        this.views = views;
        this.tabstrs = tabstrs;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

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

    //    这个是和tablelayout相关的
    @Override
    public CharSequence getPageTitle(int position) {
        return tabstrs.get(position);
    }
}