TabLayout+ViewPager 实现页签滑动的效果

在2015年的google大会上，google发布了新的

Android Support Design

库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，最好的是它可以兼容到2.2以上版本，包括2.2。下面我就举一个简单的例子来使用它。

       只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

 fragment_find.xml

 这里面没有什么特别的，就是添加了一个TabLayout和Viewpager作为上下的布局。其中

 Find_tab_Adapter.Java 
它是viewpager的Adapter，因为这里面我每个栏目下，都会有一些列表，所以采用list<View>的方式，在里面切换layout不太适合，所以我采用了List<Fragment>来直接加载多个fragment

FindFragment.java这个的说法，全在标注里面了

package com.example.cg.myzhihu;  

  

  

import android.os.Bundle;  

import android.support.design.widget.TabLayout;  

import android.support.v4.app.Fragment;  

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.example.cg.myzhihu.Adapters.Find_tab_Adapter;  

  

import java.util.ArrayList;  

import java.util.List;  

  

  

/** 

 * 发现页面 

 */  

public class FindFragment extends Fragment {  

  

    private TabLayout tab_FindFragment_title;                            //定义TabLayout  

    private ViewPager vp_FindFragment_pager;                             //定义viewPager  

    private FragmentPagerAdapter fAdapter;                               //定义adapter  

  

    private List<Fragment> list_fragment;                                //定义要装fragment的列表  

    private List<String> list_title;                                     //tab名称列表  

  

    private Find_hotRecommendFragment hotRecommendFragment;              //热门推荐fragment  

    private Find_hotCollectionFragment hotCollectionFragment;            //热门收藏fragment  

    private Find_hotMonthFragment hotMonthFragment;                      //本月热榜fragment  

    private Find_hotToday hotToday;                                      //今日热榜fragment  

  

    @Override  

    public View onCreateView(LayoutInflater inflater, ViewGroup container,  

                             Bundle savedInstanceState) {  

        View view = inflater.inflate(R.layout.fragment_find, container, false);  

  

        initControls(view);  

  

        return view;  

    }  

  

    /** 

     * 初始化各控件 

     * @param view 

     */  

    private void initControls(View view) {  

  

        tab_FindFragment_title = (TabLayout)view.findViewById(R.id.tab_FindFragment_title);  

        vp_FindFragment_pager = (ViewPager)view.findViewById(R.id.vp_FindFragment_pager);  

  

        //初始化各fragment  

        hotRecommendFragment = new Find_hotRecommendFragment();  

        hotCollectionFragment = new Find_hotCollectionFragment();  

        hotMonthFragment = new Find_hotMonthFragment();  

        hotToday = new Find_hotToday();  

  

        //将fragment装进列表中  

        list_fragment = new ArrayList<>();  

        list_fragment.add(hotRecommendFragment);  

        list_fragment.add(hotCollectionFragment);  

        list_fragment.add(hotMonthFragment);  

        list_fragment.add(hotToday);  

  

        //将名称加载tab名字列表，正常情况下，我们应该在values/arrays.xml中进行定义然后调用  

        list_title = new ArrayList<>();  

        list_title.add("热门推荐");  

        list_title.add("热门收藏");  

        list_title.add("本月热榜");  

        list_title.add("今日热榜");  

  

        //设置TabLayout的模式  

        tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);  

        //为TabLayout添加tab名称  

        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));  

        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));  

        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));  

        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));  

  

        fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);  

  

        //viewpager加载adapter  

        vp_FindFragment_pager.setAdapter(fAdapter);  

        //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);  

        //TabLayout加载viewpager  

        tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);  

        //tab_FindFragment_title.set  

    }  

  

  

}  

  

效果图，不太会做成动态的。