利用ViewPager+TabLayout实现界面左右滑动

TabLayout

tabLayout

上图是一个关于TabLayout的Demo，TabLayout提供了一个水平的布局用来展示Tabs。与viewpager、fragment（或者view）搭配使用，实现点击屏幕标签或左右滑动可以切换页面的效果。

viewpager

viewpager是谷歌官方提供的控件，它相当于一个容器，储存fragment或者view，通过左右滑动的方式将容器中的页面进行切换，常用于app首页的欢迎页与滚动栏。

1.tabLayout的基本使用方法

在布局中加入该控件：

在代码中动态添加Item：

tabLayout= (TabLayout) findViewById(R.id.tabLayout);

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

方式二静态添加Item：

...

附：
tabLayout的其他常用属性
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"

5.改变TabLayout内部字体大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//使文字的外貌变大

6.改变指示器下标的高度

app:tabIndicatorHeight="4dp"

7.添加图标

android:icon="@drawable/icon"

//tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));动态

8.设置tabMode

app:tabMode="scrollable"
//默认是fixed：固定的，标签很多时候会被挤压，不能滑动。

9.内容的显示模式

app:tabGravity="center"//居中，如果是fill，则是充满

10.Tab的宽度限制

设置最大的tab宽度：

app:tabMaxWidth="xxdp"

设置最小的tab宽度：

app:tabMinWidth="xxdp"

11.Tab的“Margin”

TabLayout开始位置的偏移量：

app:tabContentStart="100dp"

12.加入Padding

设置Tab内部的子控件的Padding：

app:tabPadding="xxdp"

app:tabPaddingTop="xxdp"

app:tabPaddingStart="xxdp"

app:tabPaddingEnd="xxdp"

app:tabPaddingBottom="xxdp"

设置整个TabLayout的Padding：

app:paddingEnd="xxdp"

app:paddingStart="xxdp"

2.viewPager的使用方法

布局：

新建ViewPagerAdapter
viewpager的使用方法中比较关键的就是adapter，因为viewpager是一个容器，我们把view看作数据的话，我们则必须有一个adapter将数据有顺序有调理地放入我们的容器中，这时我们需要新建一个类继承自pagerAdapter，代码如下：

package com.example.peek_mapdemotest.materialdesign;

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

import java.util.List;

/**
 * Created by Administrator on 2017/8/5.
 */

public class ViewPagerAdapter extends PagerAdapter {

    private List viewList;
    private List titleList;

    public ViewPagerAdapter(List viewList,List titleList) {
        this.viewList=viewList;
        this.titleList=titleList;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }

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

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


}

ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
List viewList = new ArrayList<>();
        List titleList = new ArrayList<>();

        titleList.add("页面1");
        titleList.add("页面2");
        titleList.add("页面3");


        LayoutInflater inflater = LayoutInflater.from(this);
        View tab01 = inflater.inflate(R.layout.fragment_fragment1, null);
        View tab02 = inflater.inflate(R.layout.fragment_fragment2, null);
        View tab03 = inflater.inflate(R.layout.fragment_fragment3, null);

        viewList.add(tab01);
        viewList.add(tab02);
        viewList.add(tab03);

        mViewPager = (ViewPager)findViewById(R.id.pager);
        ViewPagerAdapter mViewPagerAdapter=new ViewPagerAdapter(viewList,titleList);
        tabLayout.setupWithViewPager(mViewPager);
        mViewPager.setAdapter(mViewPagerAdapter);

最后直接用一句代码 tabLayout.setupWithViewPager(viewPager);即可很方便的将tabLayout与viewpager搭配起来。