ViewPager最簡單的無限輪播

puyaCheer發表於2018-07-25

第一步：重寫一下ViewPager

package com.diction.app.android.view.indicator;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 *
 * 這個是自己定義的仿寫的viewpger  huguomin
 *
 * */
public class IndicatorPager extends ViewPager {
    private boolean scrollable = true;

    public IndicatorPager(Context context) {
        super(context);
    }

    public IndicatorPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if(this.scrollable) {
            if (getCurrentItem() == 0 && getChildCount() == 0) {
                return false;
            }
            return super.onTouchEvent(ev);
        } else {
            return false;
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if(this.scrollable) {
            if (getCurrentItem() == 0 && getChildCount() == 0) {
                return false;
            }
            return super.onInterceptTouchEvent(ev);
        } else {
            return false;
        }
    }

    public void setScrollable(boolean scrollable) {
        this.scrollable = scrollable;
    }
}

第二步封裝一下

package com.diction.app.android.view.indicator;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;


import com.diction.app.android.R;
import com.diction.app.android.utils.ImageLoadUtils;
import com.diction.app.android.utils.LogUtils;
import com.diction.app.android.utils.ScreenUtils;
import com.diction.app.android.utils.SizeUtils;
import com.facebook.drawee.view.SimpleDraweeView;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by huguomin on 2018/7/24.
 */

public class CoustomIndicator extends FrameLayout implements ViewPager.OnPageChangeListener {
    public static final String TAG = "CoustomBanner--->  ";
    private IndicatorPager mCoustomViewPager;
    private CoustomScroller mScroller;
    private int count;
    private List<String> imageViewsList = new ArrayList<>();
    private List<String> descLists = new ArrayList<>();
    private int currentItem;
    private BannerPagerAdapter adapter;
    private Context mContext;
    private RecyclerView mMRecycler;

    public CoustomIndicator(@NonNull Context context) {
        super(context);
        initView(context);
    }

    public CoustomIndicator(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        mContext = context;
        int margrleft = SizeUtils.px2dp((ScreenUtils.getScreenWidth()-dip2px(mContext,10)));
        LogUtils.e(TAG + "   " + margrleft);
        LayoutInflater.from(context).inflate(R.layout.item_banner_layout, this, true);
        mCoustomViewPager = (IndicatorPager) findViewById(R.id.banner_view);
        mMRecycler = findViewById(R.id.sub_recycler);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(context);
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        mMRecycler.setLayoutManager(linearLayoutManager);
        initViewPagerScroll();
    }


    private void initViewPagerScroll() {
        try {
            Field mField = ViewPager.class.getDeclaredField("mScroller");
            mField.setAccessible(true);
            mScroller = new CoustomScroller(mCoustomViewPager.getContext());
            mScroller.setDuration(800);
            mField.set(mCoustomViewPager, mScroller);
        } catch (Exception e) {
//            Log.e(tag, e.getMessage());
        }
    }


    public void setImageListAndText(List<String> imagesUrl, List<String> descList) {
        if (imagesUrl == null || imagesUrl.size() <= 0) {
            Log.e(TAG, "The image data set is empty.");
            return;
        }
        count = imagesUrl.size();
        for (int i = 0; i <= count + 1; i++) {
            String url = "";
            String desc = "";
            if (i == 0) {
                url = imagesUrl.get(count - 1);
                desc = descList.get(count - 1);
            } else if (i == count + 1) {
                url = imagesUrl.get(0);
                desc = descList.get(0);
            } else {
                url = imagesUrl.get(i - 1);
                desc = descList.get(i - 1);
            }
            imageViewsList.add(url);
            descLists.add(desc);
        }


        setData();
    }

    private  void setData(){
        currentItem = 1;
        if (adapter == null) {
            adapter = new BannerPagerAdapter();
            mCoustomViewPager.addOnPageChangeListener(this);
        }
        mCoustomViewPager.setPageMargin(dip2px(mContext, 10));
        mCoustomViewPager.setOffscreenPageLimit(imageViewsList.size());
        mCoustomViewPager.setAdapter(adapter);
        mCoustomViewPager.setPageTransformer(true,new ZoomOutSlideTransformer());
        mCoustomViewPager.setFocusable(true);
        mCoustomViewPager.setCurrentItem(1);
    }




    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        currentItem=position;
        if (mPageSelectedListener != null ){
            mPageSelectedListener.onPageSelected(toRealPosition(position) );
        }

    }


    public int toRealPosition(int position) {
        int realPosition = (position - 1) % count;
        if (realPosition < 0)
            realPosition += count;
        return realPosition;
    }



    @Override
    public void onPageScrollStateChanged(int state) {
        switch (state) {
            case 0://No operation
                if (currentItem == 0) {
                    mCoustomViewPager.setCurrentItem(count, false);
                } else if (currentItem == count + 1) {
                    mCoustomViewPager.setCurrentItem(1, false);
                }
                break;
            case 1://start Sliding
                if (currentItem == count + 1) {
                    mCoustomViewPager.setCurrentItem(1, false);
                } else if (currentItem == 0) {
                    mCoustomViewPager.setCurrentItem(count, false);
                }
                break;
            case 2://end Sliding
                break;
        }


    }




    class BannerPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return imageViewsList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            View inflate = LayoutInflater.from(mContext).inflate(R.layout.item_gallery_layout, null);
            SimpleDraweeView image = inflate.findViewById(R.id.indicator_bg_image);
            TextView desc = inflate.findViewById(R.id.indicator_bg_text);
            RelativeLayout containerView = inflate.findViewById(R.id.contianer);

            ImageLoadUtils.loadImage(image,"http://epdapi2.diction.diexun.com"+imageViewsList.get(position));
            desc.setText(descLists.get(position));
            container.addView(inflate);
            return inflate;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

    }


    public void setCurrentPosition(int position) {
        Log.e(TAG, "setCurrentPosition: -----currentItem     》" + currentItem );
        Log.e(TAG, "setCurrentPosition: -----currentItem     》" + currentItem );
        if (position == toRealPosition(currentItem))return;
        mCoustomViewPager.setCurrentItem(position,false);
    }

    /**
     * dp 的單位 轉成為 px(畫素)
     */
    public static int dip2px(Context context, float dpValue) {
      /*  return (int) (dpValue
                * context.getResources().getDisplayMetrics().density + 0.5f);*/
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpValue, context.getResources().getDisplayMetrics());
    }

    public interface OnPageSelectedListenter{

        void onPageSelected(int position);

    }
    private OnPageSelectedListenter mPageSelectedListener;

    public void setOnPageSelectedListenter(OnPageSelectedListenter l){
        mPageSelectedListener = l;
    }


}

相關的類

import android.content.Context;
import android.view.animation.Interpolator;
import android.widget.Scroller;

public class CoustomScroller extends Scroller {
        private int mDuration = 800;

        public CoustomScroller(Context context) {
            super(context);
        }

        public CoustomScroller(Context context, Interpolator interpolator) {
            super(context, interpolator);
        }

        public CoustomScroller(Context context, Interpolator interpolator, boolean flywheel) {
            super(context, interpolator, flywheel);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy, int duration) {
            super.startScroll(startX, startY, dx, dy, mDuration);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy) {
            super.startScroll(startX, startY, dx, dy, mDuration);
        }

        public void setDuration(int time) {
            mDuration = time;
        }

    }

相關的佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:clipChildren="false"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

    <com.diction.app.android.view.indicator.IndicatorPager
        android:clipChildren="false"
        android:id="@+id/banner_view"
        android:layout_marginLeft="@dimen/x200"
        android:layout_marginRight="@dimen/x200"
        android:layout_width="match_parent"
        android:layout_height="70dp"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/sub_recycler"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

</LinearLayout>

搞定！！！！！！

打造萬能的BannerView（ViewPager）無限輪播圖
2021-09-09
Viewpager
ViewPager兩種方式實現無限輪播
2019-06-19
Viewpager
安卓之viewPager簡單用法圖片輪播
2018-04-19
安卓Viewpager
【iOS】自定義控制元件無限輪播 + 無限圖片輪播
2017-12-13
iOS控制元件
【Swift】自定義控制元件無限輪播 + 無限圖片輪播
2017-12-13
Swift控制元件
iOS無限輪播圖片
2016-09-03
iOS
CollectionView 無限輪播設計思路
2018-01-11
View
iOS-無限迴圈輪播圖
2015-09-10
iOS
利用RecyclerView實現無限輪播廣告條
2019-03-03
View
Swift應用案例 1.無限輪播
2017-03-10
Swift
原生js系列之無限迴圈輪播元件
2019-03-04
JS元件
在 Flutter 中實現一個無限輪播
2019-06-13
Flutter
直播平臺製作，ViewPager自動輪播，手指按住停止輪播
2023-11-15
Viewpager
有間隙卡片縮放/無縫CollectionViewBanner無限輪播圖
2018-06-28
View
HTML+CSS使用swiper快速生成最簡單、最快捷、最易看懂的輪播圖
2020-09-22
HTMLCSS
iOS無限迴圈輪播圖（只使用三個imageView）
2016-10-17
iOSView
Android複習之旅--ViewPager（自動輪播條）
2016-12-02
AndroidViewpager
Android常用控制元件-BannerView(無限輪播圖控制元件)
2018-08-05
Android控制元件View
iOS開發之ImageView複用實現圖片無限輪播
2015-12-03
iOSView
實現簡單的輪播圖（單張圖片、多張圖片）
2020-02-11
android可以無限迴圈滑動的ViewPager
2018-09-10
AndroidViewpager
Flutter教程-自定義無限滾動輪播器infinity_slider-增加多輪播巢狀聯動功能(二)
2019-09-02
FlutterIDE巢狀
ViewPager實現左右無限迴圈滑動
2014-10-17
Viewpager
android圖片輪播效果，RollViewPager的簡單使用
2016-05-06
AndroidViewpager
iOS開發：Swift實現的輪播圖、無限迴圈檢視控制元件
2017-01-09
iOSSwift控制元件
web前端入門到實戰：簡單的圖片輪播
2020-01-13
Web前端
利用回撥函式實現簡單的輪播圖效果
2019-05-19
函式
左右無縫輪播圖的實現
2016-04-29
react無縫滾動輪播圖
2018-07-22
React
無縫輪播圖的一種方式原理
2019-02-16
手把手、腦把腦教你實現一個無限迴圈的輪播控制元件
2019-03-04
控制元件
ViewPager巢狀fragment簡單使用
2018-07-11
Viewpager巢狀Fragment
用Scroller完成一個簡單的ViewPager
2017-02-23
Viewpager
短視訊軟體開發，實現簡單的輪播圖效果
2022-05-19
jQuery輪播圖之上下輪播
2018-06-30
jQuery
better-scroll 實現無縫輪播
2018-07-11
做一個簡單好看的ViewPager翻轉動畫
2017-05-18
Viewpager動畫
Android開發之ViewPager簡單使用
2017-12-13
AndroidViewpager

ViewPager最簡單的無限輪播

相關文章