Android中ViewPager组件的基本用法及实现图片切换的示例

概述ViewPager是android-support-v4.jar包里的组件。在布局文件里标签需要连包名一起写全称<android.support.v4.view.ViewPager/>

VIEwPager是androID-support-v4.jar包里的组件。在布局文件里标签需要连包名一起

写全称<androID.support.v4.vIEw.VIEwPager />

基本用法

VIEwPager的基本用法我概括为三步

第一步 在主布局文件里放一个VIEwPager组件

第二步 为每个页面建立布局文件，把界面写好

第三步 在主Activity里获取VIEwPager组件，并为它设定Adapter。

Adapter详细讲讲，VIEwPager对应的Adapter继承自PagerAdapter，

也是androID.support.v4.vIEw包里的，继承类需要实现四个方法：

int getCount():返回页面数目 Object instantiateItem(VIEwGroup,int position):创建position位置的页面视图，加入到VIEwGroup中，并返回该视图的Key。Key可以是该视图，也可以是其他唯一与该视图对应的对象： boolean isVIEwFromObject(VIEw,Object)：判断Object所代表的Key是否对应指定的VIEw。 voID destroyItem(VIEwGroup,int position,Object)：从VIEwGroup里删除position位置的VIEw。

我们先用LayoutInflater将前面为每个页面建立的界面加载进来，并放在一个ArrayList之类的容器里面。然后在PagerAdapter的这四个方法里，我们 *** 作的，就是与这些页面对应的VIEw。

使用VIEwPager组件实现图片切换
上面说的这些步骤可能听起来挺空洞的，下面我们来看这个使用VIEwPager组件实现图片切换的实例：
在很多App中，尤其是第一次安装启动后，都会出现几个图片进行一些app的介绍和说明，图片可以随着滑动而切换。

我们这里利用 VIEwPager组件来演示如何实现这一点。

1、创建一个app工程，默认创建一个主 Activity

2、设置该Activity的布局文件activity_main.xml内容如下：

<?xml version="1.0" enCoding="utf-8"?><FrameLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:orIEntation="vertical" >     <androID.support.v4.vIEw.VIEwPager     androID:ID="@+ID/vIEwPager"     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content" />       <relativeLayout     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content"    androID:orIEntation="vertical" >       <linearLayout       androID:ID="@+ID/tagVIEw"       androID:layout_wIDth="match_parent"       androID:layout_height="wrap_content"       androID:layout_alignParentBottom="true"      androID:layout_marginBottom="20dp"       androID:gravity="center_horizontal"       androID:orIEntation="horizontal" >     </linearLayout>   </relativeLayout>  </FrameLayout>

因为我们希望再切换图片上，能有一些点点形状的图标（或者数字）显示当前图片。所以这里的activity采用了FrameLayout布局（可以实现vIEw重叠放置）。

第一个控件就是VIEwPager （注意VIEwPager 是在support.v4包中的，新的andorID中并没有移植该组件）。

第二个控件是放置一个relativeLayout，其中放置一个linearLayout（位于屏幕的底部位置），该linearLayout采用水平布局，用来放置小的图标。

3、准备图片

准备5张用于切换显示的图片，如 pic1.jpg、pic2.jpg、pic3.jpg、pic4.jpg、pic5.jpg，再准备两个小图标图片page_current.png、page_not_current.png。

将这些图片放到drawable-hdpi目录下（或相应尺寸的drawable目录下）。

4、编写activity的代码

package com.example.showvIEwpager; import java.util.ArrayList; import androID.app.Activity;import androID.os.Bundle;import androID.support.v4.vIEw.PagerAdapter;import androID.support.v4.vIEw.VIEwPager;import androID.support.v4.vIEw.VIEwPager.OnPagechangelistener;import androID.vIEw.Menu;import androID.vIEw.MenuItem;import androID.vIEw.VIEw;import androID.vIEw.VIEwGroup;import androID.Widget.ImageVIEw;import androID.Widget.ImageVIEw.ScaleType;import androID.Widget.linearLayout;import androID.Widget.linearLayout.LayoutParams; public class MainActivity extends Activity {   private static final int VIEW_NUM = 5;  private VIEwPager vIEwPager;  private ImageVIEw[] tagImageVIEws = new ImageVIEw[VIEW_NUM];   @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_main);    addTagImage();    initVIEwPager();  }   private voID addTagImage() {    linearLayout layout = (linearLayout)findVIEwByID(R.ID.tagVIEw);    linearLayout.LayoutParams params = new linearLayout.LayoutParams(     linearLayout.LayoutParams.WRAP_CONTENT,linearLayout.LayoutParams.WRAP_CONTENT);    params.setmargins(15,0);    for (int i = 0; i < VIEW_NUM; i++) {      ImageVIEw tagImageVIEw = new ImageVIEw(this);      tagImageVIEw.setLayoutParams(params);      tagImageVIEws[i] = tagImageVIEw;      if (i == 0) {        tagImageVIEw.setBackgroundResource(R.drawable.page_current);      } else {        tagImageVIEw.setBackgroundResource(R.drawable.page_not_current);      }       layout.addVIEw(tagImageVIEw);    }  }     private voID initVIEwPager() {    vIEwPager = (VIEwPager) findVIEwByID(R.ID.vIEwPager);    vIEwPager.setAdapter(new MyAdapter());    vIEwPager.setonPagechangelistener(new OnPagechangelistener() {      @OverrIDe      public voID onPageSelected(int arg0) {        for (int i = 0; i < tagImageVIEws.length; i++) {          if (i == arg0 % VIEW_NUM) {            tagImageVIEws[i].setBackgroundResource(R.drawable.page_current);          } else {            tagImageVIEws[i].setBackgroundResource(R.drawable.page_not_current);          }        }      }             @OverrIDe      public voID onPageScrolled(int arg0,float arg1,int arg2) {               }             @OverrIDe      public voID onPageScrollStateChanged(int arg0) {               }    });    vIEwPager.setCurrentItem(0);  }     class MyAdapter extends PagerAdapter{    private ArrayList<VIEw> vIEwList;    public MyAdapter(){      vIEwList = new ArrayList<VIEw>();      vIEwList.add(createPagerImageVIEw(R.drawable.pic1));      vIEwList.add(createPagerImageVIEw(R.drawable.pic2));      vIEwList.add(createPagerImageVIEw(R.drawable.pic3));      vIEwList.add(createPagerImageVIEw(R.drawable.pic4));      vIEwList.add(createPagerImageVIEw(R.drawable.pic5));    }         private VIEw createPagerImageVIEw(int resID){      LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);      linearLayout layout = new linearLayout(MainActivity.this);      layout.setLayoutParams(params);      layout.setorIEntation(linearLayout.VERTICAL);      ImageVIEw imageVIEw = new ImageVIEw(MainActivity.this);      imageVIEw.setLayoutParams(params);      imageVIEw.setScaleType(ScaleType.CENTER_CROP);      imageVIEw.setimageResource(resID);      layout.addVIEw(imageVIEw);      return layout;    }         @OverrIDe    public int getCount() {      return Integer.MAX_VALUE;    }     @OverrIDe    public boolean isVIEwFromObject(VIEw arg0,Object arg1) {      return arg0 == arg1;    }         @OverrIDe    public Object instantiateItem(VIEwGroup container,int position) {      ((VIEwPager) container).addVIEw(vIEwList.get(position % VIEW_NUM),0);      return vIEwList.get(position % VIEW_NUM);    }     @OverrIDe    public voID destroyItem(VIEw container,Object object) {      ((VIEwPager) container).removeVIEw(vIEwList          .get(position % VIEW_NUM));    }       }   @OverrIDe  public boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.main,menu);    return true;  }   @OverrIDe  public boolean onoptionsItemSelected(MenuItem item) {    int ID = item.getItemID();    if (ID == R.ID.action_settings) {      return true;    }    return super.onoptionsItemSelected(item);  }}

5、如果需要不显示activity的标题栏，可修改manifest中的activity中的配置,设置样式为：

androID:theme="@androID:style/theme.Black.NoTitlebar" 

<?xml version="1.0" enCoding="utf-8"?><manifest xmlns:androID="http://schemas.androID.com/apk/res/androID"  package="com.example.showvIEwpager"  androID:versionCode="1"  androID:versionname="1.0" >   <uses-sdk    androID:minSdkVersion="16"    androID:targetSdkVersion="21" />   <application    androID:allowBackup="true"    androID:icon="@drawable/ic_launcher"    androID:label="@string/app_name"    androID:theme="@style/Apptheme" >    <activity      androID:name=".MainActivity"      androID:label="@string/app_name"      androID:theme="@androID:style/theme.Black.NoTitlebar" >      <intent-filter>        <action androID:name="androID.intent.action.MAIN" />        <category androID:name="androID.intent.category.LAUNCHER" />      </intent-filter>    </activity>  </application> </manifest>

　　

其它配置文件、代码等都是采用eclipse创建的默认设置。

总结

以上是内存溢出为你收集整理的Android中ViewPager组件的基本用法及实现图片切换的示例全部内容，希望文章能够帮你解决Android中ViewPager组件的基本用法及实现图片切换的示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。