三：tabLayout与ViewPager联动使用

去财务开了下去年网费用的发票，被告知只有周五才能开生了我一肚子气，得出一个结论所有事业单位的财务就没有好东西，然后气鼓鼓的回来继续撸代码，之前实现的是一组菜单，接着再来实现第一个模块新闻列表，今天先把ViewPage的框架搞好，实现好之后是这个样子的：

其实本来只用ViewPager也能实现类似的效果，不过既然Material Design中对此有定义了，那么还是要遵守一下的，况且由于谷歌提供了TabLayout这个控件，所以实现起来非常方便，何乐而不为呢。首先借助最初的抽屉布局XML文件，可以参考之前这篇博文，里面已经给出布局代码了。就是当初的activity_menu.xml当然这里因为我发现这个布局会被反复用到就给他改了名字。

然后在Activity中引用。

package com.dlmu.panda.news;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;

import com.dlmu.panda.cat.R;

/**
 * Created by panda on 2016/5/15.
 */
public class NewsActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer);

        NewsFragment news = new NewsFragment();
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.content_frame,news).commit();
    }
}

设计是主要内容用来显示ViewPager，ViewPager里面做新闻列表，侧滑抽屉用来实现搜索功能这里先不处理。先把整个框架搭起来，XML如下：

设计窗口给出的界面是这个样子的：

然后在Fragment中为tablayout加入标签：

package com.dlmu.panda.news;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.dlmu.panda.cat.R;

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

/**
 * Created by panda on 2016/5/16.
 */
public class NewsFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_news_viewpager,container,false);

        TabLayout tabLayout= (TabLayout) view.findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("通知通告"), true);//添加 Tab,默认选中
        tabLayout.addTab(tabLayout.newTab().setText("物流动态"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("地方新闻"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("政策法规"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("展会信息"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("国际视野"),false);

        return view;
    }

}

此时运行就会发现显示出六个tab标签了。

然后可以先实现一个Fragment，如下：

package com.dlmu.panda.news;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.dlmu.panda.cat.R;

/**
 * Created by panda on 2016/5/16.
 */
public class NewsListFragment extends Fragment {
    View view;
    int pid;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_list,container,false);
        TextView tv = (TextView) view.findViewById(R.id.textView);
        tv.setText("栏目id是"+String.valueOf(pid));
        return view;
    }
    public NewsListFragment(int pid){
        this.pid = pid;
    }
}

接着在NewsFragment中定义如下全局变量：

    View view;
    ViewPager vp;
    FragmentPagerAdapter adapter;
    List list_fragment;
    List list_title;

定义Adapter用于配置ViewPager：

    public class NewsAdapter extends FragmentPagerAdapter {

        private List list_fragment;                         //fragment列表
        private List list_Title;                              //tab名的列表

        public NewsAdapter(FragmentManager fm, List list_fragment, List list_Title) {
            super(fm);
            this.list_fragment = list_fragment;
            this.list_Title = list_Title;
        }

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

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

        //此方法用来显示tab上的名字
        @Override
        public CharSequence getPageTitle(int position) {
            return list_Title.get(position % list_Title.size());
        }
    }

对viewpager进行配置，代码如下：

TabLayout tabLayout= (TabLayout) view.findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("通知通告"), true);//添加 Tab,默认选中
        tabLayout.addTab(tabLayout.newTab().setText("物流动态"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("地方新闻"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("政策法规"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("展会信息"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("国际视野"),false);

        vp = (ViewPager) view.findViewById(R.id.viewpager);
        NewsListFragment f1 = new NewsListFragment(1);
        NewsListFragment f2 = new NewsListFragment(2);
        NewsListFragment f3 = new NewsListFragment(3);
        NewsListFragment f4 = new NewsListFragment(4);
        NewsListFragment f5 = new NewsListFragment(5);
        NewsListFragment f6 = new NewsListFragment(6);

        list_title = new ArrayList<>();
        list_title.add("通知通告");
        list_title.add("物流动态");
        list_title.add("地方新闻");
        list_title.add("政策法规");
        list_title.add("展会信息");
        list_title.add("国际视野");
        list_fragment = new ArrayList<>();
        list_fragment.add(f1);
        list_fragment.add(f2);
        list_fragment.add(f3);
        list_fragment.add(f4);
        list_fragment.add(f5);
        list_fragment.add(f6);

        adapter = new NewsAdapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);
        vp.setAdapter(adapter);

这时候viewpager已经是可以使用的了，但是还不够，使用如下代码把tabs和viewpager进行绑定：

tabLayout.setupWithViewPager(vp);

为了方便大家使用，再把完整的代码贴一遍：

package com.dlmu.panda.news;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.dlmu.panda.cat.R;

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

/**
 * Created by panda on 2016/5/16.
 */
public class NewsFragment extends Fragment {
    View view;
    ViewPager vp;
    FragmentPagerAdapter adapter;
    List list_fragment;
    List list_title;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_news_viewpager,container,false);

        TabLayout tabLayout= (TabLayout) view.findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("通知通告"), true);//添加 Tab,默认选中
        tabLayout.addTab(tabLayout.newTab().setText("物流动态"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("地方新闻"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("政策法规"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("展会信息"),false);//添加 Tab,默认不选中
        tabLayout.addTab(tabLayout.newTab().setText("国际视野"),false);

        vp = (ViewPager) view.findViewById(R.id.viewpager);
        NewsListFragment f1 = new NewsListFragment(1);
        NewsListFragment f2 = new NewsListFragment(2);
        NewsListFragment f3 = new NewsListFragment(3);
        NewsListFragment f4 = new NewsListFragment(4);
        NewsListFragment f5 = new NewsListFragment(5);
        NewsListFragment f6 = new NewsListFragment(6);

        list_title = new ArrayList<>();
        list_title.add("通知通告");
        list_title.add("物流动态");
        list_title.add("地方新闻");
        list_title.add("政策法规");
        list_title.add("展会信息");
        list_title.add("国际视野");
        list_fragment = new ArrayList<>();
        list_fragment.add(f1);
        list_fragment.add(f2);
        list_fragment.add(f3);
        list_fragment.add(f4);
        list_fragment.add(f5);
        list_fragment.add(f6);

        adapter = new NewsAdapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);
        vp.setAdapter(adapter);
        tabLayout.setupWithViewPager(vp);
        return view;
    }

    public class NewsAdapter extends FragmentPagerAdapter {

        private List list_fragment;                         //fragment列表
        private List list_Title;                              //tab名的列表

        public NewsAdapter(FragmentManager fm, List list_fragment, List list_Title) {
            super(fm);
            this.list_fragment = list_fragment;
            this.list_Title = list_Title;
        }

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

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

        //此方法用来显示tab上的名字
        @Override
        public CharSequence getPageTitle(int position) {
            return list_Title.get(position % list_Title.size());
        }
    }
}

实现的效果就不再贴图了，大家开心就好。