Android开发之使用ViewPager实现图片左右滑动切换效果

Android中图片的左右切换随处可见，今天我也试着查阅资料试着做了一下，挺简单的一个小Demo，却也发现了一些问题，话不多说，上代码~：

使用了3个xml文件作为ViewPager的滑动page，布局都是相同的，如下只展示其中之一：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 >
 <ImageView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:scaleType="centerCrop"
   android:src="@mipmap/view1"/>
</LinearLayout>

只是用了一个ImageView作为显示图片的容器

主页面布局：

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 切换卡 -->
<android.support.v4.view.ViewPager
 android:layout_height="wrap_content"
 android:layout_width="match_parent"
 android:id="@+id/viewPager"></android.support.v4.view.ViewPager>
<!-- 点点 -->
<LinearLayout
 android:orientation="horizontal"
 android:layout_height="wrap_content"
 android:layout_width="fill_parent"
 android:id="@+id/viewGroup"
 android:layout_alignParentBottom="true"
 android:gravity="center_horizontal"
 android:layout_marginBottom="40dp"></LinearLayout>
</RelativeLayout>

接下来就是主函数的的代码了：

package com.yztc.lx.homework;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.ViewGroup.LayoutParams;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Lx on 2016/8/6.
*/
public class Layout1Activity extends Activity {
 private ViewPager viewPager;
 private PagerAdapter adapter;
 private List<View> viewPages = new ArrayList<>();
 //包裹点点的LinearLayout
 private ViewGroup group;
 private ImageView imageView;
 //定义一个ImageVIew数组，来存放生成的小园点
 private ImageView[] imageViews;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.layout1);
   initView();
   initPageAdapter();
   initPointer();
   initEvent();
 }
 //为控件绑定事件,绑定适配器
 private void initEvent() {
   viewPager.setAdapter(adapter);
   viewPager.addOnPageChangeListener(new GuidePageChangeListener());
 }
 //初始化ViewPager
 private void initPageAdapter() {
   /**
    * 对于这几个想要动态载入的page页面，使用LayoutInflater.inflate()来找到其布局文件，并实例化为View对象
    */
   LayoutInflater inflater = LayoutInflater.from(this);
   View page1 = inflater.inflate(R.layout.page1, null);
   View page2 = inflater.inflate(R.layout.page2, null);
   View page3 = inflater.inflate(R.layout.page3, null);
   //添加到集合中
   viewPages.add(page1);
   viewPages.add(page2);
   viewPages.add(page3);
   adapter = new PagerAdapter() {
     //获取当前界面个数
     @Override
     public int getCount() {
       return viewPages.size();
     }
     //判断是否由对象生成页面
     @Override
     public boolean isViewFromObject(View view, Object object) {
       return view == object;
     }
     @Override
     public void destroyItem(ViewGroup container, int position, Object object) {
       container.removeView(viewPages.get(position));
     }
     //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
     @Override
     public Object instantiateItem(ViewGroup container, int position) {
       View view = viewPages.get(position);
       container.addView(view);
       return view;
     }
   };
 }
 //绑定控件
 private void initView() {
   viewPager = (ViewPager) findViewById(R.id.viewPager);
   group = (ViewGroup) findViewById(R.id.viewGroup);
 }
 //初始化下面的小圆点的方法
 private void initPointer() {
   //有多少个界面就new多长的数组
   imageViews = new ImageView[viewPages.size()];
   for (int i = 0; i < imageViews.length; i++) {
     imageView = new ImageView(this);
     //设置控件的宽高
     imageView.setLayoutParams(new LayoutParams(25, 25));
     //设置控件的padding属性
     imageView.setPadding(20, 0, 20, 0);
     imageViews[i] = imageView;
     //初始化第一个page页面的图片的原点为选中状态
     if (i == 0) {
       //表示当前图片
       imageViews[i].setBackgroundResource(R.mipmap.page_indicator_focused);
       /**
        * 在java代码中动态生成ImageView的时候
        * 要设置其BackgroundResource属性才有效
        * 设置ImageResource属性无效
        */
     } else {
       imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
     }
     group.addView(imageViews[i]);
   }
 }
 //ViewPager的onPageChangeListener监听事件，当ViewPager的page页发生变化的时候调用
 public class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
   @Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   }
   //页面滑动完成后执行
   @Override
   public void onPageSelected(int position) {
     //判断当前是在那个page，就把对应下标的ImageView原点设置为选中状态的图片
     for (int i = 0; i < imageViews.length; i++) {
       imageViews[position].setBackgroundResource(R.mipmap.page_indicator_focused);
       if (position != i) {
         imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
       }
     }
   }
   //监听页面的状态，0--静止 1--滑动  2--滑动完成
   @Override
   public void onPageScrollStateChanged(int state) {
   }
 }
}

这样，一个简单地滑动图片的Demo就完成了，需要注意的地方有：在java代码中生成ImageView的时候，如果想为其设置显示的图片，要使用setBackgroundResource()方法而不是setImageResource()方法

以上所述是小编给大家介绍的Android开发之使用ViewPager实现图片左右滑动切换效果网站的支持！

来源：http://www.cnblogs.com/RabbitLx/archive/2016/08/07/5745857.html