support包的应用场景，以及ViewPager的各种实现，详细讲解以实例来解释

应用场景：
1.引导界面，相册多图片的预览
2.多Tab界面，app导航
3.广告播放展示
一：实现最简单的ViewPager
创建相对应视图以及java文件
视图中要写上这个support包

在对应的java文件包下写上，其中view_first是随便构建出来的视图，目的是为了便于观看和实现代码

public class ImageViewPagerAdapter extends AppCompatActivity {
private ViewPager mViewPager;
    private int[] mLayoutIDs = {
        R.layout.view_first,
        R.layout.view_second,
        R.layout.view_thrid 
};
private List mViews;


protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_image_view_adapter);
   
    mViewPager = (ViewPager) findViewById(R.id.view_pager);

在oncreat中加入读取图片的代码

在oncreate中

    // 设置adapter
    mViewPager.setAdapter(mPagerAdapter);

创建Adapter

PagerAdapter mPagerAdapter = new PagerAdapter() {

    @Override
    public int getCount() {
        return mLayoutIDs.length;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View child = mViews.get(position);
        container.addView(child);
        return child;
    }

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

便完成了最简单ViewPage的实现
二：使用ViewPage来使用App的引导页
与上方在同一个java文件下，将for循环的内容改为

   //表示添加为图片的形式
    for (int index = 0; index < mLayoutIDs.length; index++) {
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(R.mipmap.ic_launcher);
        mViews.add(imageView);
	//下面的部分表示添加引导页的代码
        ImageView dot = new ImageView(this);
        dot.setImageResource(R.mipmap.ic_launcher);//设置点的形状		
        dot.setMaxWidth(100); //设置点的最大宽度	
        dot.setMaxHeight(100);//设置点的最大高度

        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(80,80);//表示设置的显示点的大小
        layoutParams.leftMargin = 20;//表示距离左端的距离为20
        dot.setLayoutParams(layoutParams);
        dot.setEnabled(false);

        mDotViewGroup.addView(dot);
        mDotViews.add(dot);

    }

在oncreate中加上，表示内存中最多有几个图片，4表示为左边两个，右边两个。

    mViewPager.setOffscreenPageLimit(4);

将显示为第几页的标点添加上
先写入布局，添加上

因为点也是图片的形式存入，所以加上，表示点的集合

private ViewGroup mDotViewGroup;
private List mDotViews = new ArrayList<>();

然后在oncreate中将视图初始化

mDotViewGroup = (ViewGroup) findViewById(R.id.dot_layout);

Oncreate添加新的方法，让移动的时间引导页会发生改变

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void oonPageSelected(int position) {
            setDotViews(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

oonPageSelected中调用的方法为

private void setDotViews(int position) {
    for (int index = 0; index < mDotViews.size(); index++) {
    //用正则表达式来表示，翻到这一页是图片会发生变化，来表示引导页的变化
        mDotViews.get(index).setImageResource(position == index ? R.mipmap.diglett : R.mipmap.ic_launcher);

    }
}

最后加上，表示的是引导页的起始位置为：

    mViewPager.setCurrentItem(0);
    setDotViews(0);

三：Fragment配合ViewPager的使用
创建出一个新的java文件以及其对应的布局文件
创建出一个Fragment的java文件
创建Fragment的布局文件
实现当翻页的时间会显示出他的position
主java文件为
解释：
view_pager为最开始创建的Viewpager布局，然后用setAdapter的方法来调用Fragment，在Fragment中实现传值，用setArguments
传递再用getArguments来接收，十使其返回的是position，最后在主方法中返回TestFragement.newInstance来完成。

接三，实现底部导航布局
效果图为
但是此处仅有布局的框架，没有内容信息

修改主布局文件为
解释为：
先将布局文件改为TabHost，下面写上相对布局，便于观察，创建FrameLayout的目的是因为TableWidget是必须要用FrameLayout，然后写View的原因就是将FrameLayout与ViewPager与TableWidget分开。

如此便完成了布局实现。

接三：实现底部导航图标
在主java文件的Oncreate方法中写入

	// 三个fragment组成的viewpager
    final Fragment[] fragments = new Fragment[]{
            TestFragment.newInstance("home"),
            TestFragment.newInstance("message"),
            TestFragment.newInstance("me")
    };

因为我们之前的postion是int类型，这里我们需要的是string类型，所以我们要修改Fragment中的代码
在Fragemnt

public static final String TITLE = "title";
private String mTitle;

public static TestFragment newInstance(String title) {
    TestFragment fragment = new TestFragment();
    Bundle bundle = new Bundle();
    bundle.putString(TITLE, title);
    fragment.setArguments(bundle);
    return fragment;
}
   public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        mTitle = getArguments().getString(TITLE);
    }
}

同时在主java文件下的这两个应该修改为

        public Fragment getItem(int position) {
            return fragments[position];
        }

        @Override
        public int getCount() {
            return fragments.length;
        }

重点为
创建下面图标的布局文件为

    

    

//下面的ImageView让他消失的原因是这里可以设置一个小红点，在我们点击的时间，便于我们进行观察。

在color文件包下创建出上方textview中textcolor所对应的属性的文件:

//没有点击时的颜色

最后加载出点击与没有点击时的图标，图片为


同文字颜色的方式相同，也应该创建出所对应的文件，因为有三个图标，所以应该在drawable文件夹下创建出三个对应的文件为名字分别对应他们所表示的信息：main_tab_icon_信息

//这个放在最下面是因为不然在翻动图片是首先找到的是这个默认的状态，就不会发生改变

因为形式相同就不再一一列述

接三：实现导航时间的联动

在主java文件下写上

    // 初始化总布局
    mTabHost = (TabHost) findViewById(R.id.tab_host);
    mTabHost.setup();

    // 三个Tab 做处理

    // 1. init data
    int[] titleIDs = {
            R.string.home,
            R.string.message,
            R.string.me
    };
    int[] drawableIDs = {
            R.drawable.main_tab_icon_home,
            R.drawable.main_tab_icon_message,
            R.drawable.main_tab_icon_me
    };
    // data < -- > view

    for (int index = 0; index < titleIDs.length; index++) {

        View view = getLayoutInflater().inflate(R.layout.main_tab_layout, null, false);//读出视图

        ImageView icon = (ImageView) view.findViewById(R.id.main_tab_icon);//视图中图片控件的id
        TextView title = (TextView) view.findViewById(R.id.main_tab_txt);//视图中文字空间的id
        View tab = view.findViewById(R.id.tab_bg);//视图的主背景

        icon.setImageResource(drawableIDs[index]);//将图片给填入视图中的图片资源
        title.setText(getString(titleIDs[index]));//将文字填入视图中的控件资源

        tab.setBackgroundColor(getResources().getColor(R.color.white));//设置背景的颜色

        mTabHost.addTab(
                mTabHost.newTabSpec(getString(titleIDs[index]))
                .setIndicator(view)
                .setContent(this)
        );
    }

把Tab给加入

        mTabHost.addTab(
                mTabHost.newTabSpec(getString(titleIDs[index]))
                .setIndicator(view)
                .setContent(this) //这一步的实现要继承
        );

set.Content继承为

public class TabViewPagerActivity extends AppCompatActivity implements TabHost.TabContentFactory{

接口写为

public View createTabContent(String s) {
    View view = new View(this);
    view.setMinimumHeight(0);
    view.setMinimumWidth(0);
    return view;
}

最后要完成viewpager的联系
实现图片与table的点击事件
在viewPager控件实例化的下边写上

    	viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
              if(mTabHost != null){
                  mTabHost.setCurrentTab(position);
              }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
        @Override
        public void onTabChanged(String s) {
            if (mTabHost != null) {
                int position = mTabHost.getCurrentTab();
                viewPager.setCurrentItem(position);
            }

        }
    });

如此便完成了这个实例的演示，最终效果为

便完成了点击下方会切换的实例。