TabLayout + ViewPage 使用

步骤：

• 创建TabLayout
• 创建ViewPage 添加xml布局
• TabLayout.setupWithViewPager(viewPager); 连接

TabLayout的基本使用方式

1.在 xml 布局中加入该控件：

//创建TabLayout
<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


 // 创建viewPage        
        <android.support.v4.view.ViewPager    
            android:id="@+id/friend_viewpager"
            android:layout_width="wrap_content
            android:layout_height="wrap_conten
            android:layout_gravity="center" />
 

2.在代码中

 
//TabLayout
 TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("朋友圈"));
        tabLayout.addTab(tabLayout.newTab().setText("朋友"));


        tabLayout.setupWithViewPager(viewPager);


        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

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

        tabLayout.getTabAt(0).setText("朋友圈");
        tabLayout.getTabAt(1).setText("朋友");

 

 

//ViewPage
 ViewPager viewPager = (ViewPager) findViewById(R.id.friend_viewpager);
        LayoutInflater inflater = getLayoutInflater();


      //  首先需要创建xml 布局
      //  然后加载view
        View view01 = inflater.inflate(R.layout.viewpage_friend,null);
        View view02 = inflater.inflate(R.layout.viewpage_friendcircle,null);

 
        final  List<View> viewList = new ArrayList<View>();
            viewList.add(view01);
            viewList.add(view02);

               PagerAdapter pagerAdapter = new PagerAdapter() {
                @Override
                public boolean isViewFromObject(View arg0, Object arg1) {
                    // TODO Auto-generated method stub
                    return arg0 == arg1;
                }

                @Override
                public int getCount() {
                    // TODO Auto-generated method stub
                    return viewList.size();
                }

                @Override
                public void destroyItem(ViewGroup container, int position,
                                        Object object) {
                    // TODO Auto-generated method stub
                    container.removeView(viewList.get(position));
                }

                @Override
                public Object instantiateItem(ViewGroup container, int position) {
                    // TODO Auto-generated method stub
                    container.addView(viewList.get(position));
                    return viewList.get(position);
                }
            };
            viewPager.setAdapter(pagerAdapter);

TabLayout xml布局 属性

1.改变选中字体的颜色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改变未选中字体的颜色
app:tabTextColor="@color/colorPrimary"
3.改变指示器下标的颜色
app:tabIndicatorColor="@android:color/holo_orange_light"
4.改变整个TabLayout的颜色
app:tabBackground="color"

TabLayout 方法
监听事件
选中了某个tab的监听事件OnTabSelectedListener()：

 TabLayout tabLayout = (TabLayout)     findViewById(R.id.tabLayout);
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 //监听事件
 tabLayout.addOnTabSelectedListener(new  TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

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

            }
        });

关于 关联ViewPage 后 TabLayout 标签 消失
见http://www.cnblogs.com/donghaifeng-2016/p/6369729.html