Android自定义随手势滑动的滚动条实现——HorizontalScrollCursor

化作孤岛的瓜

于 2016-05-22 15:59:29 发布

阅读量3.1k

点赞数 4

分类专栏： Android 基础与进阶文章标签： Tab滑动条选项卡滑动条水平滑动Tab 滑动条 Android

本文链接：https://blog.csdn.net/qq_22770457/article/details/51475243

版权

Android 基础与进阶专栏收录该内容

60 篇文章 18 订阅

订阅专栏

从早上开始撸到现在撸了一个小组件HorizontalScrollCursor，废话不多说先上效果预览图：

下面是在项目中的预览图：

QAQ看起来还是很Nice滴。之前写的一个下滑条是能实现跟随Viewpager移动到指定的下标下面，但是不能随着手指拖动而滑动，所以这个控件的实现目的就在于此。

项目以及上传到Github，克隆地址为：点击打开链接

功能简介：

1：实现了随手势滑动滑动条。

2：做了简单的封装，将间距(每个滑动位置之间的宽度)以及滑动条颜色自定义为可在XML中设置的属性。

3：在该类的内部实现了回调接口onViewPagerChanggedListner，设置了setcallback(Activity activity)方法可将实现了该接口的Activity传进去以实现随着目录改变对其他UI(比如上面的选项按钮)的更新。

使用方法：

总的步骤很简单只有三步：设置布局，设置回调接口，设置Viewpager。

下面是详细步骤：

首先在布局文件中设置自定义的属性以及默认宽高：

   <com.whale.nangua.gestureslide.HorizontalScrollCursor
        xmlns:cursor="http://schemas.android.com/apk/res/com.whale.nangua.gestureslide"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        cursor:cursorcolor = "#ef0bef"
        cursor:space = "60"
        android:id="@+id/title"
        />

然后将Activity继承HorizontalScrollCursor的接口：

public class MainActivity extends FragmentActivity implements HorizontalScrollCursor.onViewPagerChanggedListner{

实现接口的方法：

  @Override
    public void CheckPage(int position) {
        //这里实现对其他UI的更新
    }

最后再对HorizontalScrollCursor进行初始化以及设置回调接口与Viewpager

        HorizontalScrollCursor cursor = (HorizontalScrollCursor) findViewById(R.id.title);
        cursor.setcallback(this);
        cursor.setViewPager(mViewPager);

这里要注意传入的Viewpager是在HorizontalScrollCursor内部实现了监听，不要再到其他地方写该Viewpager的监听事件以免发生冲突！

实现解析：

建议先看完最后粘贴出来的HorizontalScrollCursor类源码再来看这里！

实现下滑条随手势滑动的原理很简单，就是在draw中不断测量滑条的位置并不断进行重绘，那么最关键的是下面这个测量的方法：

   /**
     * 测量下划线的位置
     */
    private void measureLineSize(){
        lineStartX = strX[lastPosition]   + (DEFAULT_CURSOR_WIDTH   )* lineScale + space/2;
        if ((lastPosition + 1) == mViewPager.getAdapter().getCount()) {
            lineEndX = strX[lastPosition] + DEFAULT_CURSOR_WIDTH   - space/2;
        }else {
            lineEndX = strX[lastPosition] + DEFAULT_CURSOR_WIDTH   + (DEFAULT_CURSOR_WIDTH  ) * lineScale - space/2;
        }
    }

方法中的关键字依次为：

lineStartX:滑条左侧位置点

lineEndX:滑条右侧位置点

lastPosition:滑条滚到的位置，strX[]数组数据如下，可以看到依次为下滑条宽度的倍数：

       for (int i = 0;i<count;i++) {
            strX[i] = DEFAULT_CURSOR_WIDTH*i ;
        }

space:间隔

lineScale ：在onPageScrolled（）方法中的第二个变量positionOffset处获取，为当前滑动页面的偏移百分比
如下图所以可以很好的解释它们之间の关系（画的很挫见谅..）：

可以看出：

1、可以看到在每个固定点位置，startX都往右偏移了space/2的距离，而endX都往左偏移了space/2的距离。

2、在滑动过程中，位移量应该为width*lineScale ：宽度乘以滑动的百分比来计算得出。

3、每到一个固定点要对之前得位置距离进行累加。

搞懂了这三点，就能清楚地理解measureLineSize方法的实现了。

最后附上HorizontalScrollCursor实现代码：

 package com.whale.nangua.gestureslide;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by nangua on 2016/5/21.
 */
public class HorizontalScrollCursor extends View implements ViewPager.OnPageChangeListener{
    private Context context;
    //传入的Viewpager
    private ViewPager mViewPager;
    private float lineStartX;
    private int lastPosition = 0 ;
    private float lineScale = 0 ; //Page移动的比例
    private float lineEndX = 0  ;
    //在XML中设定的参数
    private int width = 0;//控件总宽度
    private int height = 0;//控件总高度
    private int padingLeft = 0;//设置的padingLeft
    private int padingRight = 0;//设置的padingRight

    //间隔
    private int space   ;//默认为0
    //指定的页面个数
    private int count = 0;//!!!这里后面应该改为set方法得到

    //Cursor的画笔
    private Paint linePaint;

    //测量参数
    private void measureSize(){
        width = getWidth(); //得到宽度
        DEFAULT_CURSOR_WIDTH = width/count ;
        strX  = new float[count];
        for (int i = 0;i<count;i++) {
            strX[i] = DEFAULT_CURSOR_WIDTH*i ;
        }


        height = getHeight();//得到设定的高度
        padingLeft = getPaddingLeft();   //得到的是40
        padingRight = getPaddingRight();  //得到padingRight
    }

    private int DEFAULT_CURSOR_WIDTH  ;//默认游标宽度
    private float [] strX  ;

    /**
     * 测量下划线的位置
     */
    private void measureLineSize(){
        lineStartX = strX[lastPosition]   + (DEFAULT_CURSOR_WIDTH   )* lineScale + space/2;
        if ((lastPosition + 1) == mViewPager.getAdapter().getCount()) {
            lineEndX = strX[lastPosition] + DEFAULT_CURSOR_WIDTH   - space/2;
        }else {
            lineEndX = strX[lastPosition] + DEFAULT_CURSOR_WIDTH   + (DEFAULT_CURSOR_WIDTH  ) * lineScale - space/2;
        }
    }


    /**
     * 初始化画笔
     * @param context
     * @param attrs
     */
    private void init(Context context, AttributeSet attrs){
        this.context = context ;
        TypedArray t = getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalScrollCursor);

        int cursorspace = t.getInt(R.styleable.HorizontalScrollCursor_space, 0);
        space = cursorspace;
        int cursorColor = t.getColor(R.styleable.HorizontalScrollCursor_cursorcolor, Color.BLACK);
        Log.d("nanguabaobeia" ,"" + cursorColor + "||" + cursorspace);
        t.recycle();
        linePaint = new Paint();
        linePaint.setColor(cursorColor);
        linePaint.setStyle(Paint.Style.FILL);
        linePaint.setStrokeWidth(80);
    }

    /**
     * 设置游标间距
     * @param space
     */
    public void setspace(int space){
        this.space = space ;
    }


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

    public HorizontalScrollCursor(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

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


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        measureSize();  //测量数值
        measureLineSize();//测量下划线的位置
        drawLine(canvas);//画下划线

    }

    private void drawLine(Canvas canvas){
        canvas.drawLine(lineStartX, height, lineEndX, height, linePaint);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        this.lastPosition = position ;
        lineScale = positionOffset ;

        invalidate();
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public void setViewPager(ViewPager mViewPager){
        this.mViewPager = mViewPager;
        if (this.mViewPager != null) {
            this.mViewPager.setOnPageChangeListener(this);
        }
        count = mViewPager.getAdapter().getCount();
    }


    //回调接口实例
    onViewPagerChanggedListner callback;

    public void setcallback(Activity activity) {
        callback = (onViewPagerChanggedListner) activity;
    }

    //回调接口
    public interface onViewPagerChanggedListner {
        void CheckPage(int position);
    }
}