android 自定义轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/xiangxi101/article/details/53420992

问题描述
很多时候我们会做轮播图的需求，但是需求都类似，现在做一个例子
解决方案
我们将轮播的内容和和指示部分单独封装起来，遇到独特的需求只需要微调就可以

现在直接上图
这里写图片描述

下面我们来分析代码

首先我们自定义配套的指示条，只需要根据viewpager的滑动位置来绘制指示条的滚动位置，这样我们就需要拿到viewpager的监听器。

先上xml文件，很简单的设置宽高和位置

<com.song.testview.TouchViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="180dp" />

    <com.song.testview.UnderlinePageIndicator
        android:id="@+id/line"
        android:layout_width="64dp"
        android:layout_height="5dp"
        android:layout_alignBottom="@+id/viewpager"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"/>

现在核心是自定义view里面的ondraw方法，但是先要初始化两个画笔类paint，还要拿到OnPageChangeListener 监听器类，还有设置宽高的辅助类RectF ，下面列出声明的属性，还有构造方法需要初始化的参数。

private final Paint mPaintBottom = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint mPaintTop = new Paint(Paint.ANTI_ALIAS_FLAG);

    private ViewPager mViewPager;
    private ViewPager.OnPageChangeListener mListener;
    private int mScrollState;
    private float mPositionOffset;
    private RectF mBottomRect = new RectF();
    private RectF mTopRect = new RectF();
    private int mCurrentPage;// 当前页 以0开始

    public UnderlinePageIndicator(Context context) {
        super(context, null);
        init(context);
    }

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

    public UnderlinePageIndicator(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        if (isInEditMode())
            return;
        init(context);
    }

    private void init(Context context) {
        mPaintBottom.setColor(Color.parseColor("#000000"));
        mPaintTop.setColor(Color.WHITE);
        // 颜色可以设置为直接自定义属性
    }

初始化的准备工作做好了，那么我们开始核心的ondraw方法

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mViewPager == null) {
            return;
        }
        // 初识化item个数
        final int count = getSize();
        if (count == 0) {
            return;
        }
        // 绘制底部的背景 为圆角矩形
        final float bgLeft = 0.0f;
        final float bgTop = 0.0f;
        final float bgRight = getWidth(); // 整个空间的宽
        final float bgBottom = getHeight();
        mBottomRect.left = bgLeft;
        mBottomRect.top = bgTop;
        mBottomRect.right = bgRight;
        mBottomRect.bottom = bgBottom;
        // draw圆角矩形，半径为控件高的一半
        canvas.drawRoundRect(mBottomRect, bgBottom * 0.5f, bgBottom * 0.5f, mPaintBottom);

        // 核心的方法是根据viewpager的位置绘制顶部的滑动条，
        // 每一页进度的宽度
        final float pageWidth = (bgRight) / (1f * count);
        // 绘制上层的圆角矩形 top和bottom不变 只改变left和right 左边缘padding 2个像素 右边缘缩4个像素
        final float upperLeft = pageWidth * (mCurrentPage % count + mPositionOffset) + 2;
        final float upperTop = 0.0f + 1;
        final float upperRight = upperLeft + pageWidth - 4;
        final float upperBottom = bgBottom - 1;
        mTopRect.left = upperLeft;
        mTopRect.top = upperTop;
        mTopRect.right = upperRight;
        mTopRect.bottom = upperBottom;
        canvas.drawRoundRect(mTopRect, bgBottom * 0.3f, bgBottom * 0.3f, mPaintTop);
    }

ondraw里面有几个核心参数mCurrentPage（viewpager处在当前第几页），mPositionOffset(当前viewpager的item偏移左边界距离)，这两个参数都是通过OnPageChangeListener 传过来，并且计算得到，下面分析监听器的三个核心方法

public void onPageScrollStateChanged(int state) {
        mScrollState = state;
        if (mListener != null) {
            mListener.onPageScrollStateChanged(state);
        }
    }

    /*
     * (non-Javadoc)
     * 
     * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrolled(int, float, int)
     * position：当前滑动的页面，当前页面，及你点击滑动的页面；positionOffset：当前页面偏移的百分比，positionOffsetPixels：当前页面偏移的像素位置
     */
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        mCurrentPage = position;
        mPositionOffset = positionOffset;
        int size = getSize();
        if (size == 0) {
            return;
        }
        // 当position为最后一个元素或第一个元素时 不进行绘制 直接跳转
        int remainder = ((position + 1) % size);
        if (remainder != 0) {
            invalidate();
        } else {
            if (positionOffset == 0) {
                invalidate();
            }
        }
        if (mListener != null) {
            mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }

    public void onPageSelected(int position) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mCurrentPage = position;
            mPositionOffset = 0;
            invalidate();
        }
        if (mListener != null) {
            mListener.onPageSelected(position);
        }
    }

核心的内容都在代码上，我们可以根据这个例子类推出其他我们需要的效果

viewpager也可以进行自己定制，定义滑动的速度，或者其他的需求，例如下面给出的demo，现在我们贴出demo地址。
http://download.youkuaiyun.com/detail/xiangxi101/9700888

/**
* －－－－－－－－－－－－－－
* 欢迎转载｜转载请注明
* －－－－－－－－－－－－－－
* 如果对你有帮助，请点击｜顶｜
* －－－－－－－－－－－－－－
* 请保持谦逊｜你会走的更远
* －－－－－－－－－－－－－－
* @author css
* @github https://github.com/songsongbrother
* @blog http://blog.youkuaiyun.com/xiangxi101
*/