Android中圖片的左右切換隨處可見，今天我也試著查閱資料試著做了一下，挺簡單的一個小Demo，卻也發現了一些問題，話不多說，上代碼~： 只是用了一個ImageView作為顯示圖片的容器 ...
Android中圖片的左右切換隨處可見，今天我也試著查閱資料試著做了一下，挺簡單的一個小Demo，卻也發現了一些問題，話不多說，上代碼~：
- 使用了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作為顯示圖片的容器
- 主頁面佈局：
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>
- 接下來就是主函數的的代碼了：
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 }
- 這樣，一個簡單地滑動圖片的Demo就完成了，需要註意的地方有：在java代碼中生成ImageView的時候，如果想為其設置顯示的圖片，要使用setBackgroundResource()方法而不是setImageResource()方法
