ViewPager實現自動輪播和下方向導圓點

2019-11-08 00:15:39

字體：大中小

來源：轉載

供稿：網友

代碼可以直接調用,使用. 效果圖,哪不懂可以直接評論問我/ 這里寫圖片描述

一’ 布局

小圓點形狀的生成shape.xml文件

使用空心還是實心的把對應的注釋去掉就可以了.

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false">   <size android:width="8dp" android:height="8dp"/></shape>

輪播的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="200dp"> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/hometab_vp" android:layout_width="match_parent" android:layout_height="200dp"> </android.support.v4.view.ViewPager> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp" > <LinearLayout android:id="@+id/ll_dot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/shape_guide_dot_default"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:src="@drawable/shape_guide_dot_default"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:src="@drawable/shape_guide_dot_default"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:src="@drawable/shape_guide_dot_default"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:src="@drawable/shape_guide_dot_default"/> </LinearLayout> <ImageView android:id="@+id/dot_red" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/shape_guide_dot_solid"/> </RelativeLayout></RelativeLayout>

二,代碼

左右輪播的ViewPager的Adapter

/** * 輪播 viewpager的adapter */ class MyLoopPagerAdapter extends PagerAdapter { PRivate int[] welcomes; private Context mContext; public MyLoopPagerAdapter(int[] welcomes, Context context) { this.welcomes = welcomes; mContext = context; } // //返回實際要顯示的圖片數+2 @Override public int getCount() { return welcomes.length + 2; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView iv = new ImageView(mContext); int realPosition = (position - 1 + welcomes.length) % welcomes.length;// 設置背景圖片 iv.setBackgroundResource(welcomes[realPosition]); container.addView(iv); return iv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { //注意不要remove 否則容易閃屏 // container.removeView((ImageView) object); } }

添加viewpager的addOnPageChangeListener

/** * 循環輪播界面change的監聽器 */ class MyLoopPageChangeListener implements ViewPager.OnPageChangeListener { private ViewPager mViewPager; private LinearLayout mLlDot; private ImageView dotRed; private Handler mHandler; private TimerTask mTask; private Timer mTimer; private boolean isStop = false; /** * 初始化控件和 handler * * @param viewPager * @param llDot * @param dotRed */ public MyLoopPageChangeListener(ViewPager viewPager, LinearLayout llDot, ImageView dotRed) { mViewPager = viewPager; this.mLlDot = llDot; this.dotRed = dotRed; initAutoLoop(); } /** * 初始化自動輪播 handler 和 runnable */ private void initAutoLoop() { mHandler = new Handler() { @Override public void handleMessage(Message msg) {// LogUtils.e("have received a msg"); int curindex = (mViewPager.getCurrentItem() + 1) % (welcomes.length + 2); mViewPager.setCurrentItem(curindex, true); } };// 開始輪播 startTimer(); } /** * 當頁面在滑動了調用 * * @param position 當前頁面，即點擊滑動的頁面 * @param positionOffset 當前頁面偏移的百分比 * @param positionOffsetPixels 當前頁面偏移的像素位置 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {// 獲取到真正圖片所在的位置. int realPosition = (position - 1 + welcomes.length) % welcomes.length;// 獲取到紅點的 layout 參數 RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) dotRed.getLayoutParams();// 計算兩個點之間的距離 int dotDis = mLlDot.getChildAt(1).getLeft() - mLlDot.getChildAt(0).getLeft();// 計算總共的左邊距 int totalLeftMargin = (welcomes.length - 1) * dotDis; // 計算滑動的距離 float dis = realPosition * dotDis + positionOffset * dotDis;// 設置 margin_left 的值,// 如果 position 等于 0 說明正在從第一個圖片想最后一個滑動,那么保持向導的狀態為不動 if (position == 0) { params.leftMargin = 0;// 如果滑動距離超過了最大邊距,那么將最大邊距賦值給紅點的參數左邊距 } else if (dis > totalLeftMargin) { params.leftMargin = totalLeftMargin;// 正常情況就將滑動的距離直接賦值 } else { params.leftMargin = (int) dis; }// 設置紅點的參數 dotRed.setLayoutParams(params);// 在position4左滑且左滑positionOffset百分比接近1時，偷偷替換為position1（原本會滑到position5） if (position == welcomes.length && positionOffset > 0.99) { mViewPager.setCurrentItem(1, false);// 在position1右滑且右滑百分比接近0時，偷偷替換為position4（原本會滑到position0） } else if (position == 0 && positionOffset < 0.01) { mViewPager.setCurrentItem(welcomes.length, false); } } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { switch (state) { case 0://什么都沒做空閑狀態 break; case 1://正在滑動:// 手動滑動取消自動滑動 stopTimer(); break; case 2://滑動完畢:// 繼續自動滑動 if (isStop) { startTimer(); isStop = false; } break; } } /** * 開啟輪播 */ private void startTimer(){ if (mTimer == null) { mTimer = new Timer(); } if (mTask == null) { mTask = new TimerTask() { @Override public void run() { // 輪播 mHandler.sendEmptyMessage(0); } }; } if(mTimer != null && mTask != null ) mTimer.schedule(mTask, 2000, 2000); } /** 停止輪播 * */ private void stopTimer() { if (mTimer != null) { mTimer.cancel(); mTimer = null; } if (mTask != null) { mTask.cancel(); isStop = true; mTask = null; } } }

// 主要的算法參考下圖 int realPosition = (position - 1 + welcomes.length) % welcomes.length; 由下圖可以發現，應該初始化ViewPager.setCurrentItem(1);才能從預設的第一頁開始播放。

這里寫圖片描述