用viewpager实现该效果大致需要5步
1,用support.v4包下的ViewPager。xml布局如下:
1 <android.support.v4.view.ViewPager 2 android:id="@+id/viewPager" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" />
2,定义一个List<View> list集合,用于盛装viewpager所需的资源(因为viewpager里面可以放图片也可以放置view视图,同样可以实现左右滑动加载布局的效果,所以List的泛型用view表示。)。设置ImageView的图片,并将imageview添加到list集合中。
list = new ArrayList<View>(); //定义一个for循环,设置imageview的背景图片,并将其放在list集合中 for (int i = 0; i < images.length; i++) { imageView = new ImageView(context); imageView.setBackgroundResource(images[i]); list.add(imageView); }
3,再定义一个List<ImageView> imPoint集合,用于盛装随图片滑动的‘小点’的Imageview,同样需要add到List集合中。
image1 = (ImageView) findViewById(R.id.imageView1); image2 = (ImageView) findViewById(R.id.imageView2); image3 = (ImageView) findViewById(R.id.imageView3); image4 = (ImageView) findViewById(R.id.imageView4); imPoint = new ArrayList<ImageView>(); imPoint.add(image1); imPoint.add(image2); imPoint.add(image3); imPoint.add(image4);
4,设置监听,实现方法。viewPager.setOnPageChangeListener(new MyPagerListener());
5,设置viewpager的适配器,需要重写isViewFromObject(),getCount(),isViewFromObject(),destroyItem()等方法。
整体实现方法如下:
首先是xml布局文件
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<FrameLayout 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="match_parent" android:layout_height="match_parent" /> <!-- 用于显示随图片滑动的底部或上部的小点图片 --> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:src="@drawable/qz_icon_point_sitecover" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:src="@drawable/qz_icon_point_sitecover" /> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:src="@drawable/qz_icon_point_sitecover" /> <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:src="@drawable/qz_icon_point_sitecover" /> </LinearLayout> </FrameLayout>
接下来是主界面
1 package com.dj.viewpagerdemo; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.app.Activity; 7 import android.os.Bundle; 8 import android.support.v4.view.ViewPager; 9 import android.support.v4.view.ViewPager.OnPageChangeListener; 10 import android.widget.ImageView; 11 12 public class MainActivity extends Activity { 13 private ViewPager viewPager; 14 15 // 定义一个集合盛装带点的图片 16 private List<ImageView> imPoint; 17 private ImageView image1, image2, image3, image4; 18 19 @Override 20 protected void onCreate(Bundle savedInstanceState) { 21 super.onCreate(savedInstanceState); 22 setContentView(R.layout.activity_main); 23 24 viewPager = (ViewPager) findViewById(R.id.viewPager); 25 viewPager.setOnPageChangeListener(new MyPagerListener()); 26 viewPager.setAdapter(new MyViewPagerAdapter(this)); 27 28 image1 = (ImageView) findViewById(R.id.imageView1); 29 image2 = (ImageView) findViewById(R.id.imageView2); 30 image3 = (ImageView) findViewById(R.id.imageView3); 31 image4 = (ImageView) findViewById(R.id.imageView4); 32 imPoint = new ArrayList<ImageView>(); 33 imPoint.add(image1); 34 imPoint.add(image2); 35 imPoint.add(image3); 36 imPoint.add(image4); 37 38 // 设置默认第一个点为蓝色 39 imageViewSelect(0); 40 } 41 42 // 此方法是设置小点的图片,正常情况下为白色,当在图片的position位置是设置为蓝色 43 public void imageViewSelect(int position) { 44 // 一般情况下小点是白色的 45 for (int i = 0; i < imPoint.size(); i++) { 46 imPoint.get(i).setImageResource(R.drawable.qz_icon_point_sitecover); 47 } 48 // viewpager有四张图片,当获得图片的位置的时候小点设置为蓝色。 49 imPoint.get(position).setImageResource( 50 R.drawable.qz_icon_point_sitecover_blue); 51 } 52 53 public class MyPagerListener implements OnPageChangeListener { 54 55 @Override 56 public void onPageScrollStateChanged(int arg0) { 57 } 58 @Override 59 public void onPageScrolled(int arg0, float arg1, int arg2) { 60 } 61 // 当新的页面被选中时调用 62 @Override 63 public void onPageSelected(int position) { 64 imageViewSelect(position); 65 } 66 67 } 68 }
最后是viewpager的适配器,在此适配器中设置viewpager需要的图片资源。
1 package com.dj.viewpagerdemo; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.content.Context; 7 import android.support.v4.view.PagerAdapter; 8 import android.support.v4.view.ViewPager; 9 import android.view.View; 10 import android.widget.ImageView; 11 12 public class MyViewPagerAdapter extends PagerAdapter { 13 //用于盛装Imageview的集合 14 private List<View> list; 15 //用于显示页面的图片 16 private int[] images = { R.drawable.a, R.drawable.b, R.drawable.c, 17 R.drawable.d }; 18 private ImageView imageView; 19 /**在构造函数中写for循环,设置背景,便于在主界面传参数的时候将其传入*/ 20 public MyViewPagerAdapter(Context context) { 21 list = new ArrayList<View>(); 22 //定义一个for循环,设置imageview的背景图片,并将其放在list集合中 23 for (int i = 0; i < images.length; i++) { 24 imageView = new ImageView(context); 25 imageView.setBackgroundResource(images[i]); 26 list.add(imageView); 27 } 28 } 29 30 // 获得页面数 31 @Override 32 public int getCount() { 33 return list.size(); 34 } 35 36 // 判断是否由对象生成界面 37 @Override 38 public boolean isViewFromObject(View arg0, Object arg1) { 39 40 return arg0 == arg1; 41 } 42 43 // 初始化position位置的界面 44 @Override 45 public Object instantiateItem(View container, int position) { 46 ((ViewPager) container).addView(list.get(position)); 47 return list.get(position); 48 } 49 50 // 当前页面滑动时调用,移除此页面,方便让下/上一个页面呈现。 51 @Override 52 public void destroyItem(View container, int position, Object object) { 53 ((ViewPager) container).removeView(list.get(position)); 54 } 55 56 }
以上是用viewpager实现左右滑动显示图片的效果,viewpager非常实用,也可以用它来实现左右滑动显示布局的效果。