viewpager实现轮播图加小点

2019-02-27  本文已影响0人  crush_d872
public class CircleViewPager extends FrameLayout {

private Context mContext;

private ViewPager mViewPager;

private List<View> mIvList;//  图片对应的ImageView的集合

// private List<SimpleDraweeView> mIvList;// 图片对应的ImageView的集合
private List<View> mIvDotList;// 圆点对应的ImageView的集合
private List<String> mUrlList;// 图片连接集合
private List<String> mTextList;// 文字标题连接集合
private float mDotWidth;// 轮播原点宽度
private int interval; // 图片切换时间间隔
private int dotPosition = 0;// 圆点位置
private int prePosition = 0;// 图片上一个位置
private int currentPosition = 1;// 图片当前位置
private boolean isLoop;// 是否循环

private LinearLayout mLlDot;
private CirclePagerAdapter mAdapter;
private Timer mTimer;

private OnCirclePagerItemClickListener mOnItemClickListener;

public CircleViewPager(Context context) {
    super(context);
    mContext = context;
    init(null);
}

public CircleViewPager(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
    mContext = context;
    init(attrs);
}

public CircleViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mContext = context;
    init(attrs);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    if (changed) {
        initImage();
        setDotImage();
        setViewPager();
    }
}

private void init(AttributeSet attrs) {
    if (attrs != null) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CircleViewPager);
        mDotWidth = typedArray.getDimension(R.styleable.CircleViewPager_dotWidth, 20);
        interval = typedArray.getInteger(R.styleable.CircleViewPager_interval, 3000);
        typedArray.recycle();
    }
    View mView = LayoutInflater.from(getContext()).inflate(R.layout.view_pager_layout, this);
    mLlDot = (LinearLayout) mView.findViewById(R.id.ll_main_dot);
    mViewPager = (ViewPager) mView.findViewById(R.id.vp_main);
    mIvList = new ArrayList<>();
    mIvDotList = new ArrayList<>();
}

//  根据图片URL创建对应的ImageView并添加到集合
private void initImage() {
    SimpleDraweeView imageView;
    if (mUrlList == null){
        return;
    }
    int width = SystemUtils.getScreenWidth(mContext);
    int height = width / 2;

    if (mUrlList.size() > 1) {
        for (int i = 0; i < mUrlList.size() + 2; i++) {
            if (i == 0) {   //判断当i=0为该处的ImageView设置最后一张图片作为背景
                View circleItemLayout = LayoutInflater.from(mContext).inflate(R.layout.item_pager_circle, null);
                imageView = circleItemLayout.findViewById(R.id.circle_viewpager_image);
                TextView textView = circleItemLayout.findViewById(R.id.circle_viewpager_text);
                textView.setText(mTextList.get(mUrlList.size() - 1));

                ViewGroup.LayoutParams params = imageView.getLayoutParams();
                params.width = width;
                params.height = height;
                imageView.setLayoutParams(params);
                ImageUtils.loadImage(mUrlList.get(mUrlList.size() - 1), imageView, 0);

                mIvList.add(circleItemLayout);
            } else if (i == mUrlList.size() + 1) {   //判断当i=images.length+1时为该处的ImageView设置第一张图片作为背景
                View circleItemLayout = LayoutInflater.from(mContext).inflate(R.layout.item_pager_circle, null);
                imageView = circleItemLayout.findViewById(R.id.circle_viewpager_image);
                TextView textView = circleItemLayout.findViewById(R.id.circle_viewpager_text);
                textView.setText(mTextList.get(0));

                ViewGroup.LayoutParams params = imageView.getLayoutParams();
                params.width = width;
                params.height = height;
                imageView.setLayoutParams(params);
                ImageUtils.loadImage(mUrlList.get(0), imageView, 0);

                mIvList.add(circleItemLayout);
            } else {  //其他情况则为ImageView设置images[i-1]的图片作为背景
                View circleItemLayout = LayoutInflater.from(mContext).inflate(R.layout.item_pager_circle, null);
                imageView = circleItemLayout.findViewById(R.id.circle_viewpager_image);
                TextView textView = circleItemLayout.findViewById(R.id.circle_viewpager_text);
                textView.setText(mTextList.get(i - 1));

                ViewGroup.LayoutParams params = imageView.getLayoutParams();
                params.width = width;
                params.height = height;
                imageView.setLayoutParams(params);
                ImageUtils.loadImage(mUrlList.get(i - 1), imageView, 0);

                mIvList.add(circleItemLayout);
            }
        }
    }else if(mUrlList.size()==1) {
        View circleItemLayout = LayoutInflater.from(mContext).inflate(R.layout.item_pager_circle, null);
        imageView = circleItemLayout.findViewById(R.id.circle_viewpager_image);
        TextView textView = circleItemLayout.findViewById(R.id.circle_viewpager_text);
        textView.setText(mTextList.get(0));

        ViewGroup.LayoutParams params = imageView.getLayoutParams();
        params.width = width;
        params.height = height;
        imageView.setLayoutParams(params);
        ImageUtils.loadImage(mUrlList.get(0), imageView, 0);

        mIvList.add(circleItemLayout);
    }
}

//  设置触摸事件,当滑动或者触摸时停止自动轮播
private void setTouchListener() {
    mViewPager.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            int action = event.getAction();
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    isLoop = true;
                    stopCircleViewPager();
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    isLoop = false;
                    startCircleViewPager();
                default:
                    break;
            }
            return false;
        }
    });
}

public void startCircleViewPager() {
    if (mViewPager != null){
        if (mTimer != null){
            stopCircleViewPager();
        }
        mTimer = new Timer();
        mTimer.schedule(new TimerTask() {
            @Override
            public void run() {
                if (mViewPager.getChildCount() > 1) {
                    currentPosition++;
                    ((Activity)mContext).runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            mViewPager.setCurrentItem(currentPosition, true);
                        }
                    });
                }
            }
        }, interval, interval);
    }
}

public void stopCircleViewPager() {
    if (mViewPager != null && mTimer != null){
        mTimer.purge();
        mTimer.cancel();
        mTimer = null;
    }
}

//  设置轮播小圆点
private void setDotImage() {
    //  设置LinearLayout的子控件的宽高,这里单位是像素。
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    params.leftMargin = SystemUtils.dip2px(getContext(),  5);

// params.width = SystemUtils.dip2px(getContext(), 10);
// params.height = SystemUtils.dip2px(getContext(), 2);

    mLlDot.removeAllViews();
    mIvDotList.clear();
    if (mUrlList == null){
        return;
    }
    if(mUrlList.size()>1){
        for (int i = 0; i < mUrlList.size(); i++) {

// ViewDot viewDot = new ViewDot(getContext());
// viewDot.setDotColor(R.drawable.home_pot);
// viewDot.setLayoutParams(params);
ImageView dotImage = new ImageView(getContext());
dotImage.setLayoutParams(params);
dotImage.setImageResource(R.drawable.home_pot);
mLlDot.addView(dotImage);
mIvDotList.add(dotImage);
}
}

    //设置第一个小圆点图片背景
    if (mUrlList.size() > 1) {
        ((ImageView)mIvDotList.get(dotPosition)).setImageResource(R.drawable.home_pot_optfor);
    }
}


private void setViewPager() {
    mAdapter = new CirclePagerAdapter(mIvList, this);
    mViewPager.setAdapter(mAdapter);
    mViewPager.setCurrentItem(currentPosition);

    setPageChangeListener();
    startCircleViewPager();
    setTouchListener();
}

//  ViewPager页面改变监听
private void setPageChangeListener() {
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            if (mUrlList == null){
                return;
            }
            if (position == 0) {
                //判断当切换到第0个页面时把currentPosition设置为images.length,即倒数第二个位置,小圆点位置为length-1
                currentPosition = mUrlList.size();
                dotPosition = mUrlList.size() - 1;
            } else if (position >= mUrlList.size() + 1) {
                //当切换到最后一个页面时currentPosition设置为第一个位置,小圆点位置为0
                currentPosition = 1;
                dotPosition = 0;
            } else {
                currentPosition = position;
                dotPosition = position - 1;
            }
            if (dotPosition > mIvDotList.size() - 1){
                dotPosition = 0;
            }
            //  把之前的小圆点设置背景为暗红,当前小圆点设置为红色

// ((ViewDot)mIvDotList.get(prePosition)).setDotColor(R.drawable.home_pot);
// ((ViewDot)mIvDotList.get(dotPosition)).setDotColor(R.drawable.home_pot_optfor);
((ImageView)mIvDotList.get(prePosition)).setImageResource(R.drawable.home_pot);
((ImageView)mIvDotList.get(dotPosition)).setImageResource(R.drawable.home_pot_optfor);
prePosition = dotPosition;
}

        @Override
        public void onPageScrollStateChanged(int state) {
            //当state为SCROLL_STATE_IDLE即没有滑动的状态时切换页面
            if (state == ViewPager.SCROLL_STATE_IDLE) {
                mViewPager.setCurrentItem(currentPosition, false);
            }
        }
    });
}

public void setDotWidth(float dotWidth) {
    mDotWidth = SystemUtils.dip2px(getContext(), dotWidth);
}

public void setInterval(int interval) {
    this.interval = interval;
}

public List<String> getUrlList() {
    return mUrlList;
}

public void setUrlList(List<String> urlList) {
    mUrlList = urlList;
}

public void setTextList(List<String> textList){
    mTextList = textList;
}

public void setOnItemClickListener(OnCirclePagerItemClickListener onPageClickListener) {
    this.mOnItemClickListener = onPageClickListener;
}

public OnCirclePagerItemClickListener getOnItemClickListener(){
    return mOnItemClickListener;
}

/**
 * 这个方法来不不急解释了,看名字吧
 * */
public View getCurrentItemView(){
    return mAdapter.getCurrentItem();
}

public int getCurrentPosition(){
    return currentPosition;
}

}

上一篇下一篇

猜你喜欢

热点阅读