Android随笔使用ViewPager实现简单地图片的左右滑动切换

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

1. 使用了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作为显示图片的容器

2. 主页面布局：

   <?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>

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

   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) {
   
           }
       }
   
   }

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