封裝一個ViewPager真正的實現圖片無限迴圈滾動帶導航點
阿新 • • 發佈:2019-01-25
效果圖:
大家在寫專案的過程中經常會碰到需要實現Viewpager裡面載入幾張圖片來迴圈自動輪播的效果,如果不封裝一下的話程式碼分散在activity裡面會顯得很亂,而且也不利於我們下次複用,所以這裡我把viewpager的相關程式碼抽取出來放在了一個類裡面,使用的時候只需要new 這個物件即可。直接看程式碼:
MyViewPager.java類:在activity中只需要在初始化資料的時候加入MyViewPager myViewPager=new MyViewPager(this)這段程式碼就ok。
package com.duora.bobge.duoradeliverly_version2.custom_view; import android.app.Activity; import android.os.Handler; import android.os.Message; import android.support.v4.view.ViewPager; import android.util.Log; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import com.duora.bobge.duoradeliverly_version2.R; import com.duora.bobge.duoradeliverly_version2.adapter.EventPageAdapter; import com.duora.bobge.duoradeliverly_version2.base.BaseConfig; import com.duora.bobge.duoradeliverly_version2.listener.NavigationPageChangeListener; import java.util.ArrayList; /** * Created by bobge on 15/8/10. */ public class MyViewPager { private Activity activity; private ViewPager viewPager; private LinearLayout mViewPoints; private ArrayList<View> pageViews; private ImageView imageView; /** 將小圓點的圖片用陣列表示 */ private ImageView[] imageViews; private Handler mHandler = new Handler() { @Override public void dispatchMessage(Message msg) { switch (msg.what) { case BaseConfig.MSG_CHANGE_PHOTO: int index = viewPager.getCurrentItem(); viewPager.setCurrentItem(index + 1); mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO, BaseConfig.PHOTO_CHANGE_TIME); break; } super.dispatchMessage(msg); } }; public MyViewPager(Activity activity) { this.activity = activity; findViewById(activity); addData(); initPoint(); } private void addData() { pageViews = new ArrayList<View>(); for (int i = 0; i < 5; i++) { ImageView imageView = new ImageView(activity); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); //picasso載入圖片 switch (i){ case 0: imageView.setBackgroundResource(R.mipmap.a); break; case 1: imageView.setBackgroundResource(R.mipmap.b); break; case 2: imageView.setBackgroundResource(R.mipmap.c); break; case 3: imageView.setBackgroundResource(R.mipmap.e); break; case 4: imageView.setBackgroundResource(R.mipmap.f); break; } pageViews.add(imageView); } } private void findViewById(Activity activity) { this.viewPager= (ViewPager)activity.findViewById(R.id.viewPager_main); this.mViewPoints= (LinearLayout)activity.findViewById(R.id.viewGroup); } //建立viewpager的那幾個滑動的點 private void initPoint() { // 建立imageviews陣列,大小是要顯示的圖片的數量 imageViews = new ImageView[pageViews.size()]; // 新增小圓點的圖片 for (int i = 0; i < pageViews.size(); i++) { imageView = new ImageView(activity); // 設定小圓點imageview的引數 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( 20, 20); layoutParams.setMargins(5, 0, 5, 0); imageView.setLayoutParams(layoutParams);// 建立一個寬高均為20 的佈局 // 將小圓點layout新增到陣列中 imageViews[i] = imageView; // 預設選中的是第一張圖片,此時第一個小圓點是選中狀態,其他不是 if (i == 0) { imageViews[i] .setBackgroundResource(R.mipmap.face_float_icon_on); } else { imageViews[i] .setBackgroundResource(R.mipmap.face_float_icon); } // 將imageviews新增到小圓點檢視組 mViewPoints.addView(imageViews[i]); } // 設定viewpager的介面卡和監聽事件 Log.i("test", pageViews.size() + "===="); viewPager.setAdapter(new EventPageAdapter(pageViews)); viewPager.setOnPageChangeListener(new NavigationPageChangeListener(pageViews, imageViews)); viewPager.setCurrentItem((pageViews.size()) * 50); if(pageViews.size()>1){ mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO, BaseConfig.PHOTO_CHANGE_TIME); } } }
它的滑動監聽和介面卡:
NavigationPageChangeListener.java看命名應該就能知道這個類的作用了,不多說。
EventPagerAdapter.java類是viewpager的介面卡。instantiateItem方法做了一些處理,使其實現無限迴圈。package com.duora.bobge.duoradeliverly_version2.listener; import android.support.v4.view.ViewPager; import android.view.View; import android.widget.ImageView; import com.duora.bobge.duoradeliverly_version2.R; import java.util.ArrayList; /** * Created by bobge on 15/8/5. */ //viewpager滑動監聽 public class NavigationPageChangeListener implements ViewPager.OnPageChangeListener { private ArrayList<View> pageViews; /** 將小圓點的圖片用陣列表示 */ private ImageView[] imageViews; public NavigationPageChangeListener(ArrayList<View> pageViews, ImageView[] imageViews) { this.pageViews=pageViews; this.imageViews=imageViews; } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageSelected(int position) { //當頁面切換時設定導航點的狀態 setPointStatus(position); } //設定導航點的狀態 private void setPointStatus(int position) { position=position%pageViews.size(); for (int i = 0; i < imageViews.length; i++) { imageViews[position] .setBackgroundResource(R.mipmap.face_float_icon_on); // 不是當前選中的page,其小圓點設定為未選中的狀態 if (position != i) { imageViews[i] .setBackgroundResource(R.mipmap.face_float_icon); } } } }
package com.duora.bobge.duoradeliverly_version2.adapter; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import java.util.ArrayList; /** * Created by bobge on 15/7/30. */ public class EventPageAdapter extends PagerAdapter { private ArrayList<View> pageViews; public EventPageAdapter(ArrayList<View> pageViews) { this.pageViews=pageViews; } // 銷燬position位置的介面 @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(pageViews.get(position%pageViews.size())); } // 獲取當前窗體介面數 @Override public int getCount() { return Integer.MAX_VALUE; } // 初始化position位置的介面 @Override public Object instantiateItem(View v, int position) { try{ //((ViewPager) arg0).addView(list.get(arg1),0); ((ViewPager) v).addView((View)pageViews.get(position%pageViews.size()),0); }catch (Exception e) { // TODO: handle exception } return pageViews.get(position%pageViews.size()); } @Override public boolean isViewFromObject(View v, Object arg1) { return v == arg1; } @Override public void startUpdate(View arg0) { } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } }
佈局:custom_viewpager.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--帶導航點的viewpager佈局-->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
在activity的佈局中只需要匯入上面那個佈局即可:
<include layout="@layout/custom_viewpager" android:id="@+id/myViewPager" android:layout_width="match_parent" android:layout_height="@dimen/viewpager_height" />