ViewPager实现简单Tab切换效果

         不做安卓好几天了，最近两天一直在按照设计图布web页面，头都大了。但是感觉自己布页面的水平还是可以滴，布完页面之后瞬间感觉自己萌哒哒的~嘿嘿，不过安卓好几天不做了，手都生了，今天被一个大哥叫过去调ViewPager的一个东西，搞半天没弄出来，╮(╯▽╰)╭，看来Tech support还要继续学习。

        好啦，先看一个做简单的ViewPage滑动，之后，我会在后续的博客中不断改进，达到一个理想的，可复用的东西。

       首先是布局XML文件：

     

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity" >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content" >        <android.support.v4.view.PagerTabStrip            android:id="@+id/tabstrip"            android:layout_width="wrap_content"            android:layout_height="50dip"            android:gravity="center" />    </android.support.v4.view.ViewPager></RelativeLayout>

         大致是这个样子滴：

     

   

Activity代码：

（我都写到onCreate里面了，只是为了做例子，新手注意！！！最近发现我写的很多代码都被人copy来copy去，变得我见了都哭笑不得了）

package com.example.liuhuichao.projecttest;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;/** 功能：ViewPager的Demo* 作者：刘慧超* 时间：2015年11月15日23:47:34* */public class MainActivity extends AppCompatActivity {    ViewPager pager=null;    /*此处我们使用PagerTabStrip（此控件是可交互控件）    *   说明,1，PagerTabStrip在当前页面下面，会有一个下划线条来提示当前页面的Tab是哪个    *       2，PagerTabStrip的Tab是可以点击的， 当用户点击某一个Tab的时候，当前页面会跳转到这个页面，    *           而PaperTitleStrip则没有这个功能    * */    PagerTabStrip tabStrip=null;    ArrayList<View> viewContainter=new ArrayList<View>();//tab对应的视图    ArrayList<String> titleContainer=new ArrayList<String>();//tab的标题    public String TAG="tag";//用于logcat的输出    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.content_main);        pager=(ViewPager)findViewById(R.id.viewpager);        tabStrip=(PagerTabStrip)this.findViewById(R.id.tabstrip);        /*标题行的样式设置*/        tabStrip.setDrawFullUnderline(false);//取消tab下面的长横线        tabStrip.setBackgroundColor(123);//设置tab的背景色        tabStrip.setTabIndicatorColor(234);//设置当前tab页签下划线颜色        tabStrip.setTextSpacing(200);        /*        *   1， LayoutInflater作用是将layout的xml布局文件实例化为View类对象。        *   2，inflater.inflate(R.layout.main, null)与LayoutInflater.from(this).inflate(R.layout.tab1,null);作用一样        * */        View view1= LayoutInflater.from(this).inflate(R.layout.tab1,null);        View view2=LayoutInflater.from(this).inflate(R.layout.tab2,null);        View view3=LayoutInflater.from(this).inflate(R.layout.tab3,null);        View view4=LayoutInflater.from(this).inflate(R.layout.tab4,null);        //从ViewPager开始添加View        viewContainter.add(view1);        viewContainter.add(view2);        viewContainter.add(view3);        viewContainter.add(view4);        //页签项        titleContainer.add("讲师信息");        titleContainer.add("讲师课程");        titleContainer.add("讲师评价");        titleContainer.add("讲师主页");        pager.setAdapter(new PagerAdapter() {            /*            * viewpager中组件数量            * */            @Override            public int getCount() {                return viewContainter.size();            }            /*            * 初始化item            *   做了两件事，第一：将当前视图添加到container中，第二：返回当前View            *            *   这个函数的实现的功能是创建指定位置的页面视图。            *   适配器有责任增加即将创建的View视图到这里给定的container中，            *   这是为了确保在finishUpdate(viewGroup)返回时this is be done!            返回值：返回一个代表新增视图页面的Object（Key），这里没必要非要返回视图本身，                也可以这个页面的其它容器。其实我的理解是可以代表当前页面的任意值，                只要你可以与你增加的View一一对应即可，比如position变量也可以做为Key            * */            @Override            public Object instantiateItem(ViewGroup container, int position) {                ((ViewPager) container).addView(viewContainter.get(position));                return viewContainter.get(position);            }            /*滑动切换的时候销毁当前组件            *   从当前container中删除指定位置（position）的View;            * */            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                ((ViewPager) container).removeView(viewContainter.get(position));            }            /*            * */            @Override            public int getItemPosition(Object object) {                return super.getItemPosition(object);            }            /*为每个页面提供页面标题*/            @Override            public CharSequence getPageTitle(int position) {                return titleContainer.get(position);            }            /*            * 该函数用来判断instantiateItem(ViewGroup, int)            *   函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)            *            *返回值：如果对应的是同一个View，返回True，否则返回False。            * */            @Override            public boolean isViewFromObject(View view, Object object) {                return view == object;  //官方提示这样写            }        });        /**/        pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            /*            * 这个方法会在屏幕滚动过程中不断被调用。            有三个参数，第一个position，这个参数要特别注意一下。            当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的；            如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，            只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），            这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。            当直接设置setCurrentItem翻页时，            如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），            如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；            如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。            如果不是相邻的情况，比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，            然后逐步变成2；我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，            并没有出现为2的情况。            positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，            最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。            positionOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致。            * */            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                Log.d(TAG, "------scrolled positon:" + position);                Log.d(TAG, "------scrolled positionOffset:" + positionOffset);                Log.d(TAG, "------scrolled positionOffsetPixels:" + positionOffsetPixels);            }            /*            *            * 这个方法有一个参数position，代表哪个页面被选中。            * 当用手指滑动翻页的时候，如果翻动成功了（滑动的距离够长），            * 手指抬起来就会立即执行这个方法，position就是当前滑动到的页面。            * 如果直接setCurrentItem翻页，那position就和setCurrentItem的参数一致，            * 这种情况在onPageScrolled执行方法前就会立即执行。            * */            @Override            public void onPageSelected(int position) {                Log.d(TAG, "-----Selected:" + position);            }            /*           * 这个方法在手指操作屏幕的时候发生变化。           * 有三个值：0（END）,1(PRESS) , 2(UP) 。           当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，           手指抬起时，如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 。           总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，           这个时候只会调用这个方法两次，state值分别是1,0 。           当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 , 0           * */            @Override            public void onPageScrollStateChanged(int state) {                Log.d(TAG,"-----changed:"+state);            }        });    }}

      run完之后发现基本功能有了，剩下的还有一点儿小bug，在后续blog中，我们将对这个东西做一个改进。

     PS：不要指望一口吃成胖子，胖子是一口一口吃成的。