提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

AndroidViewPager相册横向移动的实现方法

方法 实现 移动 横向 相册
2023-06-13 09:14:50 时间

当我们第一次下载QQ并且打开的时候，会有一个新手引导，引导是几张图片，再加上一些文字说明，向右滑动，直到结束，今天一大早起来研究了一下关于此种效果的实现之ViewPager控件。

下面这个例子将用ViewPager实现横向移动相册，ViewPager有一个对应的PagerAdapter，用于绑定数据；我们需要继承此类并实现自己的功能。

1、首先定义一个显示项所需要使用的数据对象ImageItem

复制代码代码如下:

publicclassImageItem{
 privateintid;//资源id
 privateStringname;//显示的名称
 publicStringgetName(){
  returnname;
 }
 publicvoidsetName(Stringname){
  this.name=name;
 }
 publicImageItem(intid,Stringname){
  super();
  this.id=id;
  this.name=name;
 }
 publicintgetId(){
  returnid;
 }
 publicvoidsetId(intid){
  this.id=id;
 }
}

2、ViewPager中每一面为一个Item，所以在layout目录下定义一个ViewPager的每一页的Item，名为pageritem.xml

复制代码代码如下:

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
　　android:layout_width="match_parent"
　　android:layout_height="match_parent">

　　<ImageView
　　　　android:id="@+id/imgview"
　　　　android:layout_width="fill_parent"
　　　　android:layout_height="fill_parent"
　　　　android:contentDescription="@string/app_name"
　　　　android:scaleType="fitXY"/>

　　<TextView
　　　　android:id="@+id/textView"
　　　　android:layout_width="wrap_content"
　　　　android:layout_height="wrap_content"
　　　　android:layout_gravity="bottom|center_horizontal"/>

</FrameLayout>

3、新建一个java文件，对应ViewPager的每一项Item

复制代码代码如下:
publicclassViewpagerItemextendsFrameLayout{
 privateImageViewimageview;//显示图片的ImageView
 privateTextViewtextview;
 privateBitmapbitmap;//图片对应的Bitmap
 privateImageItemimageitem;//每一个图片项对象

 publicViewpagerItem(Contextcontext){
  super(context);
  setViews();
 }
 publicViewpagerItem(Contextcontext,AttributeSetattrs){
  super(context,attrs);
  setViews();
 }

 publicvoidsetData(ImageItemitem){//用ImageItem填充数据
  this.imageitem=item;
  intresid=item.getId();
  Stringname=item.getName();
  imageview.setImageResource(resid);
  textview.setText(name);
 }

 publicvoidreload(){//重新载入数据
  intresid=imageitem.getId();
  imageview.setImageResource(resid);
 }

 publicvoidrecycle(){//回收数据
  imageview.setImageBitmap(null);
  if(this.bitmap==null||this.bitmap.isRecycled()){
   return;
  }
  this.bitmap.recycle();
  this.bitmap=null;
 }

 publicvoidsetViews(){
  LayoutInflaterinfalter=LayoutInflater.from(getContext());
  Viewview=infalter.inflate(R.layout.pageritem,null);
  textview=(TextView)view.findViewById(R.id.textView);
  imageview=(ImageView)view.findViewById(R.id.imgview);

  addView(view);
 }
}

4、新建一个数据填充器PagerItemAdapter，继承自PagerAdapter

复制代码代码如下:
publicclassPagerItemAdapterextendsPagerAdapter{
 privateContextcontext;
 privateImageItem[]image;

 publicPagerItemAdapter(Contextcontext,ImageItem[]image){
  this.context=context;
  this.image=image;
  hashMap=newHashMap<Integer,ViewpagerItem>();
 }

 privateHashMap<Integer,ViewpagerItem>hashMap;//保存相片的id以及对应的ViewpagerItem

 @Override
 publicintgetCount(){
  returnimage.length;
 }

 @Override
 publicbooleanisViewFromObject(Viewarg0,Objectarg1){
  returnarg0==arg1;
 }

 @Override
 publicvoidfinishUpdate(ViewGroupcontainer){
  super.finishUpdate(container);
 }

 @Override//初始化一个ViewpagerItem，如果已经存在就重新载入，没有的话new一个
 publicObjectinstantiateItem(ViewGroupcontainer,intposition){
  ViewpagerItemitem;
  if(hashMap.containsKey(position)){
   item=hashMap.get(position);
   item.reload();
  }else{
   item=newViewpagerItem(context);
   ImageItemitemimg=image[position];
   item.setData(itemimg);
   hashMap.put(position,item);
   ((ViewPager)container).addView(item);
  }
  returnitem;
 }

 @Override//当我们左右滑动图片的时候会将图片回收掉
 publicvoiddestroyItem(Viewcontainer,intposition,Objectobject){
  ViewpagerItemitem=(ViewpagerItem)object;
  item.recycle();
 }
}

5、在main.xml文件中添加一个ViewPager控件

复制代码代码如下:
<android.support.v4.view.ViewPager
　　android:id="@+id/viewpager"
　　android:layout_width="fill_parent"
　　android:layout_height="fill_parent"/>

6、修改MainActivity如下：

复制代码代码如下:
publicclassMainActivityextendsActivity{
 privatefinalstaticintRES[]={R.drawable.p1,R.drawable.p2};//p1,p2为drawable文件夹下的两张图片
 privateViewPagerviewpager;
 privatePagerItemAdapteradapter;
 privateImageItem[]item;

 privatevoidsetView(){
  item=newImageItem[2];
  item[0]=newImageItem(RES[0],"page1");
  item[1]=newImageItem(RES[1],"page2");
  viewpager=(ViewPager)findViewById(R.id.viewpager);
  adapter=newPagerItemAdapter(getApplicationContext(),item);
  viewpager.setAdapter(adapter);
 }

 @Override
 protectedvoidonCreate(BundlesavedInstanceState){
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  setView();
 }
}


 运行程序，左右滑动屏幕出现如下效果！

相关文章