Android隨筆--使用ViewPager實現簡單地圖片的左右滑動切換

Android中圖片的左右切換隨處可見，今天我也試着查閱資料試着作了一下，挺簡單的一個小Demo，卻也發現了一些問題，話很少說，上代碼~：

1. 使用了3個xml文件做爲ViewPager的滑動page，佈局都是相同的，以下只展現其中之一：

    1 <?xml version="1.0" encoding="utf-8"?>
    2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3     android:layout_width="match_parent"
    4     android:layout_height="match_parent"
    5     android:orientation="vertical"
    6     >
    7     <ImageView
    8         android:layout_width="match_parent"
    9         android:layout_height="match_parent"
   10         android:scaleType="centerCrop"
   11         android:src="@mipmap/view1"/>
   12 
   13 </LinearLayout>

   只是用了一個ImageView做爲顯示圖片的容器

2. 主頁面佈局：

    1 <?xml version="1.0" encoding="UTF-8"?>
    2 
    3 <RelativeLayout android:orientation="vertical"
    4 android:layout_height="match_parent"
    5 android:layout_width="match_parent"
    6 xmlns:android="http://schemas.android.com/apk/res/android">
    7 
    8 
    9 
   10 
   11 <!-- 切換卡 -->
   12 
   13 
   14 <android.support.v4.view.ViewPager
   15     android:layout_height="wrap_content"
   16     android:layout_width="match_parent"
   17     android:id="@+id/viewPager"></android.support.v4.view.ViewPager>
   18 
   19 <!-- 點點 -->
   20 
   21 
   22 <LinearLayout
   23     android:orientation="horizontal"
   24     android:layout_height="wrap_content"
   25     android:layout_width="fill_parent"
   26     android:id="@+id/viewGroup"
   27     android:layout_alignParentBottom="true"
   28     android:gravity="center_horizontal"
   29     android:layout_marginBottom="40dp"></LinearLayout>
   30 </RelativeLayout>

    

3. 接下來就是主函數的的代碼了：

     1 package com.yztc.lx.homework;
     2 
     3 import android.app.Activity;
     4 import android.os.Bundle;
     5 import android.support.v4.view.PagerAdapter;
     6 import android.support.v4.view.ViewPager;
     7 import android.view.LayoutInflater;
     8 import android.view.ViewGroup.LayoutParams;
     9 import android.view.View;
    10 import android.view.ViewGroup;
    11 import android.widget.ImageView;
    12 
    13 import java.util.ArrayList;
    14 import java.util.List;
    15 
    16 /**
    17  * Created by Lx on 2016/8/6.
    18  */
    19 
    20 public class Layout1Activity extends Activity {
    21     private ViewPager viewPager;
    22     private PagerAdapter adapter;
    23     private List<View> viewPages = new ArrayList<>();
    24 
    25     //包裹點點的LinearLayout
    26     private ViewGroup group;
    27     private ImageView imageView;
    28     //定義一個ImageVIew數組，來存放生成的小園點
    29     private ImageView[] imageViews;
    30 
    31     @Override
    32     protected void onCreate(Bundle savedInstanceState) {
    33         super.onCreate(savedInstanceState);
    34         setContentView(R.layout.layout1);
    35 
    36         initView();
    37         initPageAdapter();
    38         initPointer();
    39         initEvent();
    40     }
    41 
    42     //爲控件綁定事件,綁定適配器
    43     private void initEvent() {
    44         viewPager.setAdapter(adapter);
    45         viewPager.addOnPageChangeListener(new GuidePageChangeListener());
    46     }
    47 
    48     //初始化ViewPager
    49     private void initPageAdapter() {
    50         /**
    51          * 對於這幾個想要動態載入的page頁面，使用LayoutInflater.inflate()來找到其佈局文件，並實例化爲View對象
    52          */
    53         LayoutInflater inflater = LayoutInflater.from(this);
    54         View page1 = inflater.inflate(R.layout.page1, null);
    55         View page2 = inflater.inflate(R.layout.page2, null);
    56         View page3 = inflater.inflate(R.layout.page3, null);
    57 
    58         //添加到集合中
    59         viewPages.add(page1);
    60         viewPages.add(page2);
    61         viewPages.add(page3);
    62 
    63         adapter = new PagerAdapter() {
    64             //獲取當前界面個數
    65             @Override
    66             public int getCount() {
    67                 return viewPages.size();
    68             }
    69 
    70             //判斷是否由對象生成頁面
    71             @Override
    72             public boolean isViewFromObject(View view, Object object) {
    73                 return view == object;
    74             }
    75 
    76             @Override
    77             public void destroyItem(ViewGroup container, int position, Object object) {
    78                 container.removeView(viewPages.get(position));
    79             }
    80 
    81             //返回一個對象，這個對象代表了PagerAdapter適配器選擇哪一個對象放在當前的ViewPager中
    82             @Override
    83             public Object instantiateItem(ViewGroup container, int position) {
    84                 View view = viewPages.get(position);
    85                 container.addView(view);
    86                 return view;
    87             }
    88         };
    89     }
    90 
    91     //綁定控件
    92     private void initView() {
    93         viewPager = (ViewPager) findViewById(R.id.viewPager);
    94         group = (ViewGroup) findViewById(R.id.viewGroup);
    95     }
    96 
    97     //初始化下面的小圓點的方法
    98     private void initPointer() {
    99         //有多少個界面就new多長的數組
   100         imageViews = new ImageView[viewPages.size()];
   101         for (int i = 0; i < imageViews.length; i++) {
   102             imageView = new ImageView(this);
   103             //設置控件的寬高
   104             imageView.setLayoutParams(new LayoutParams(25, 25));
   105             //設置控件的padding屬性
   106             imageView.setPadding(20, 0, 20, 0);
   107             imageViews[i] = imageView;
   108             //初始化第一個page頁面的圖片的原點爲選中狀態
   109             if (i == 0) {
   110                 //表示當前圖片
   111                 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_focused);
   112                 /**
   113                  * 在java代碼中動態生成ImageView的時候
   114                  * 要設置其BackgroundResource屬性纔有效
   115                  * 設置ImageResource屬性無效
   116                  */
   117 
   118             } else {
   119                 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
   120             }
   121             group.addView(imageViews[i]);
   122         }
   123     }
   124 
   125     //ViewPager的onPageChangeListener監聽事件，當ViewPager的page頁發生變化的時候調用
   126     public class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
   127         @Override
   128         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   129 
   130         }
   131 
   132         //頁面滑動完成後執行
   133         @Override
   134         public void onPageSelected(int position) {
   135             //判斷當前是在那個page，就把對應下標的ImageView原點設置爲選中狀態的圖片
   136             for (int i = 0; i < imageViews.length; i++) {
   137                 imageViews[position].setBackgroundResource(R.mipmap.page_indicator_focused);
   138                 if (position != i) {
   139                     imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
   140                 }
   141             }
   142         }
   143 
   144         //監聽頁面的狀態，0--靜止  1--滑動   2--滑動完成
   145         @Override
   146         public void onPageScrollStateChanged(int state) {
   147 
   148         }
   149     }
   150 
   151 }

    

4. 這樣，一個簡單地滑動圖片的Demo就完成了，須要注意的地方有：在java代碼中生成ImageView的時候，若是想爲其設置顯示的圖片，要使用setBackgroundResource()方法而不是setImageResource()方法