Android开发之ViewPager滑动页面效果实现

      我们先来谷歌官方文档对viewpager的介绍，该类允许用户通过页面翻转左右的数据，需要通过实现PagerAdapter适配器来生成视图显示的页面。因为注意这个类是早期设计和开发的，API可能会改变，并在以后更新兼容库,到时候我们需要做相应的处理。ViewPager最常用于结合Fragment,这是一个方便的方式来供应和管理每个页面的生命周期,我们后面的博客介绍相关的内容，今天我们先来简单实现viewpager的功能。


MainAcitivity的代码

[java] view plaincopy
package com.example.f10_viewpager;  
  
import java.util.ArrayList;  
import java.util.List;  
import android.os.Bundle;  
import android.app.Activity;  
import android.support.v4.view.PagerAdapter;  
import android.support.v4.view.PagerTabStrip;  
import android.support.v4.view.ViewPager;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
  
public class MainActivity extends Activity {  
  
    private View view1, view2, view3;// 需要滑动的页卡  
    private ViewPager viewPager;  
    private PagerTabStrip pagerTabStrip;  
    private List<View> viewList;// 把需要滑动的页卡添加到这个list中  
    private List<String> titleList;// viewpager的标题  
  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        // 像普通控件一样先初始化  
        viewPager = (ViewPager) findViewById(R.id.viewpager);  
        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);  
        pagerTabStrip.setDrawFullUnderline(false);//设置下划线不整页显示  
        pagerTabStrip.setTextSpacing(1000);//设置标题之间的距离  
        initView();  
        MyAdapter pagerAdapter = new MyAdapter();  
        viewPager.setAdapter(pagerAdapter);  
    }  
    //填充布局，设置每一页的标题  
    private void initView() {  
        view1 = findViewById(R.layout.layout1);  
        view2 = findViewById(R.layout.layout2);  
        view3 = findViewById(R.layout.layout3);  
        getLayoutInflater();  
        LayoutInflater lf = LayoutInflater.from(this);  
        view1 = lf.inflate(R.layout.layout1, null);  
        view2 = lf.inflate(R.layout.layout2, null);  
        view3 = lf.inflate(R.layout.layout3, null);  
        viewList = new ArrayList<View>();// 将要分页显示的View装入数组中  
        viewList.add(view1);  
        viewList.add(view2);  
        viewList.add(view3);  
        titleList = new ArrayList<String>();// 每个页面的Title数据  
        titleList.add("第一个页面");  
        titleList.add("第二个页面");  
        titleList.add("第三个页面");  
    }  
  
    public class MyAdapter extends PagerAdapter {  
        @Override  
        public boolean isViewFromObject(View arg0, Object arg1) {  
  
            return arg0 == arg1;  
        }  
  
        @Override  
        public int getCount() {  
  
            return viewList.size();  
        }  
  
        @Override  
        public void destroyItem(ViewGroup container, int position, Object object) {  
            container.removeView(viewList.get(position));  
  
        }  
  
        @Override  
        public int getItemPosition(Object object) {  
  
            return super.getItemPosition(object);  
        }  
  
        @Override  
        public CharSequence getPageTitle(int position) {  
  
            return titleList.get(position);  
  
        }  
  
        // 将每一页的布局填充如ViewGroup容器中  
        @Override  
        public Object instantiateItem(ViewGroup container, int position) {  
            container.addView(viewList.get(position));  
  
            return viewList.get(position);  
        }  
  
    };  
  
}  


   在我之间浏览博文的时候，有人提到过第30行代码设置标题的距离效果没有实现，不知道为什么，后来我调试了一下，发现应该是这个值要设置的大一些，我这里设置的就是1000就实现了一个页面只显示一个标题的效果。在layout布局文件下，我们首先得先创建三个简单的布局文件，来实现滑动效果，当然最重要的是main.xml的代码书写
[java] view plaincopy
<?xml version="1.0" encoding="utf-8"?>    
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent"    
    android:orientation="vertical" >    
    
   <android.support.v4.view.ViewPager    
        android:id="@+id/viewpager"    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:layout_gravity="center" >    
                  
        <android.support.v4.view.PagerTabStrip      
            android:id="@+id/pagertab"      
            android:layout_width="wrap_content"      
            android:layout_height="wrap_content"      
            android:layout_gravity="top"/>     
         
                  
               
       
             
    </android.support.v4.view.ViewPager>    
    
</LinearLayout>