码迷,mamicode.com
首页 > 其他好文 > 详细

ChrisRenke/DrawerArrowDrawable源码解析

时间:2015-06-02 23:32:53      阅读:437      评论:0      收藏:0      [点我收藏+]

标签:

转载请注明出处http://blog.csdn.net/crazy__chen/article/details/46334843

源码下载地址http://download.csdn.net/detail/kangaroo835127729/8765757

这次解析的控件DrawerArrowDrawable是一款侧拉抽屉效果的控件,在很多应用上我们都可以看到(例如知乎),控件的github地址为https://github.com/ChrisRenke/DrawerArrowDrawable

大家可以先来看一下控件的效果

技术分享

这个控件的作者,也写过一篇文章对控件的制作过程做了说明,其中更多的是涉及箭头的变换具体算法,我在本文中将简化对算法的说明(因为比较复杂,我会提供给大家算法的思路)。如果大家对原文感兴趣,可以参考这个地址http://chrisrenke.com/drawerarrowdrawable/

另外还有一篇中文翻译http://www.eoeandroid.com/thread-561707-1-1.html?_dsign=e25beff0


下面我来说一下这个控件的具体制作方法。

首先我们可以看到,有一个侧拉抽屉的效果,这个效果是用android.support.v4包提供的android.support.v4.widget.DrawerLayout来实现的,对于这个控件,大家导入对应包,就可以使用。例如

<!-- Content -->
  <android.support.v4.widget.DrawerLayout
      android:id="@+id/drawer_layout"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      >

    <TextView
        android:id="@+id/view_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textColor="#000000"
        android:text="@string/content_hint"
        android:background="#ffffff"
        />

    <TextView
        android:id="@+id/drawer_content"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:gravity="center"
        android:text="@string/drawer_hint"
        android:textColor="@color/light_gray"
        android:background="@color/darker_gray"
        />

  </android.support.v4.widget.DrawerLayout>
上面的xml,其实就是定义了一个侧拉抽屉,其中在.DrawerLayout中的第一个控件,会被当成是抽屉,而第二个控件,会被当成主要内容。

由此可见,侧拉的效果是很容易实现(使用google提供的包)。

然而对比我们的DrawerArrowDrawable,会发现DrawerArrowDrawable有一个非常炫的效果,就是标题栏上的箭头变化。在初始状态,箭头是三条横线,当侧拉时,三条横线逐渐聚合成箭头,当侧拉返回时,又由箭头分散为三条横线。

本质上,这个箭头的实现,就是整个DrawerArrowDrawable的难点,大家可能一下子没有太好的思路。

我们先来看一下箭头变化的过程图

技术分享

对于整个箭头整体,本质上是一个drawable,也就是说我们自定义一个drawable(这种方法我们在本专栏的其他文章也见过),修改它的ondraw方法,来实现一些复制的动画效果。

对于DrawerArrowDrawable,我们先关注三条横线中的第一条,对于第一条横线,有首尾两个点(这个两个点决定了这条横线)。下面的说明都是针对第一条横线而言(其他横线的原理和第一条是一样的)

横线在初始状态,有首尾两个点,称为a,b。a,b在整个箭头变化过程中,所在位置不断变化,从而构成一条轨迹(a,b各自一条)

我们将这个箭头状态分成三部分,如下

技术分享

对于1,2,3三个状态,我们只考察a点,对于a点而言,状态1,到状态2,可以形成一个轨迹,是一个贝塞尔曲线(什么是贝塞尔曲线,大家可以自行百度,简而言之就是由一系列控制点(至少一个),可以确定两点之间的一条平滑曲线)。

有人会问,凭什么确定这是一条贝塞尔曲线呢,其实我们没有办法确定,但是我们可以确定一条贝塞尔曲线,使之近似等于a点的运动过轨,也就是说我们是把a点的轨迹抽象成函数,然后通过这个函数,我们就可以确定轨迹上每一点的坐标了。注意,这里的因果关系要弄明白,是现有轨迹,后有曲线,这个控件的作者,也是根据实际的轨迹,推算出轨迹的函数表达式的。

Ok,那么我们也容易知道,状态2到状态3,a点的轨迹,是另外一条贝塞尔曲线

同理,b点整个过程的轨迹,也就是两条贝塞尔曲线,而两点确定一条直线,根据a,b两个的轨迹,我们就能确定横线的轨迹了。

其他横线同理。所以要实现箭头的变换效果,我们只要根据贝塞尔曲线,不断绘制这个三天横线就可以了。


那么,对应到具体的java代码,我们应该怎么实现呢?下面开始结合源码进行说明。

首先来看构造函数和初始化

public DrawerArrowDrawable(Resources resources, boolean rounded) {
	    this.rounded = rounded;
	    float density = resources.getDisplayMetrics().density;
	    float strokeWidthPixel = STROKE_WIDTH_DP * density;
	    halfStrokeWidthPixel = strokeWidthPixel / 2;
	
	    linePaint = new Paint(Paint.SUBPIXEL_TEXT_FLAG | Paint.ANTI_ALIAS_FLAG);
	    /* 当画笔样式为STROKE或FILL_OR_STROKE时,设置笔刷的图形样式,如圆形样式
	     * Cap.ROUND,或方形样式Cap.SQUARE
	     */	   
	    linePaint.setStrokeCap(rounded ? Cap.ROUND : Cap.BUTT);
	    //画笔颜色
	    linePaint.setColor(Color.BLACK);
	    //设置画笔的样式,为FILL,FILL_OR_STROKE,或STROKE,也就是画轮廓,而fill是填充  
	    linePaint.setStyle(Paint.Style.STROKE);
	    //设置空心的边框宽度
	    linePaint.setStrokeWidth(strokeWidthPixel);
	
	    int dimen = (int) (DIMEN_DP * density);
	    bounds = new Rect(0, 0, dimen, dimen);
	
	    Path first, second;
	    JoinedPath joinedA, joinedB;
	
	    // Top 第一条横线
	    first = new Path();
	    first.moveTo(5.042f, 20f);
	    //实现贝塞尔曲线,(x1,y1) 为控制点,(x2,y2)为控制点,(x3,y3) 为结束点
	    first.rCubicTo(8.125f, -16.317f, 39.753f, -27.851f, 55.49f, -2.765f);
	    second = new Path();
	    second.moveTo(60.531f, 17.235f);
	    second.rCubicTo(11.301f, 18.015f, -3.699f, 46.083f, -23.725f, 43.456f);	    
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedA = new JoinedPath(first, second);
	
	    first = new Path();
	    first.moveTo(64.959f, 20f);
	    first.rCubicTo(4.457f, 16.75f, 1.512f, 37.982f, -22.557f, 42.699f);
	    second = new Path();
	    second.moveTo(42.402f, 62.699f);
	    second.cubicTo(18.333f, 67.418f, 8.807f, 45.646f, 8.807f, 32.823f);
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedB = new JoinedPath(first, second);
	    topLine = new BridgingLine(joinedA, joinedB);
	
	    // Middle 第二条
	    first = new Path();
	    first.moveTo(5.042f, 35f);	    
	    first.cubicTo(5.042f, 20.333f, 18.625f, 6.791f, 35f, 6.791f);
	    second = new Path();
	    second.moveTo(35f, 6.791f);
	    second.rCubicTo(16.083f, 0f, 26.853f, 16.702f, 26.853f, 28.209f);
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedA = new JoinedPath(first, second);
	
	    first = new Path();
	    first.moveTo(64.959f, 35f);
	    first.rCubicTo(0f, 10.926f, -8.709f, 26.416f, -29.958f, 26.416f);
	    second = new Path();
	    second.moveTo(35f, 61.416f);
	    second.rCubicTo(-7.5f, 0f, -23.946f, -8.211f, -23.946f, -26.416f);
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedB = new JoinedPath(first, second);
	    middleLine = new BridgingLine(joinedA, joinedB);
	
	    // Bottom 第三条
	    first = new Path();
	    first.moveTo(5.042f, 50f);
	    first.cubicTo(2.5f, 43.312f, 0.013f, 26.546f, 9.475f, 17.346f);
	    second = new Path();
	    second.moveTo(9.475f, 17.346f);
	    second.rCubicTo(9.462f, -9.2f, 24.188f, -10.353f, 27.326f, -8.245f);
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedA = new JoinedPath(first, second);
	
	    first = new Path();
	    first.moveTo(64.959f, 50f);
	    first.rCubicTo(-7.021f, 10.08f, -20.584f, 19.699f, -37.361f, 12.74f);
	    second = new Path();
	    second.moveTo(27.598f, 62.699f);
	    second.rCubicTo(-15.723f, -6.521f, -18.8f, -23.543f, -18.8f, -25.642f);
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedB = new JoinedPath(first, second);
	    bottomLine = new BridgingLine(joinedA, joinedB);
	  }

上面的代码有点多,先看开始部分,发现是一些初始化属性的代码,做了画笔初始化的工作,使用bounds保存了drawable的大小信息。

注意到,还计算了当前屏幕的密度,这个密度非常重要。为什么呢?

根据上面的说法,作者是根据轨迹,计算出曲线的,但是这个曲线的具体方程,跟作者用来计算的屏幕大小是有关的。例如作者屏幕上,状态2,a点的坐标是(10,10),那么在你的屏幕上,假设你的屏幕密度是作者的两倍,那么a的坐标,可能是(20,20),那么计算出来的曲线方程就不一样了。

所以这里记录了你的屏幕密度,和作者的屏幕密度相比,然后放大相应的倍数就可以了。

从源码中我们可以看到这样两个属性

/** 
	   * Paths were generated at a 3px/dp density; this is the scale factor for different densities.
	   * 路径是在3px/dp密度下生成的,这将是不同屏幕密度的缩放因子
	   */
	  private final static float PATH_GEN_DENSITY = 3;
	
	  /** 
	   * Paths were generated with at this size for {@link DrawerArrowDrawable#PATH_GEN_DENSITY}.
	   * 在PATH_GEN_DENSITY密度下,将生成这个尺寸的路径 
	   */
	  private final static float DIMEN_DP = 23.5f;
这两个属性,就是作者的屏幕密度,和其密度下的尺寸大小,我们按比例缩放这个两个数字就可以了,下面会看到。


OK,初始化以后,开始设定曲线,我拿第一条横线做例子

// Top 第一条横线
	    first = new Path();
	    first.moveTo(5.042f, 20f);
	    //实现贝塞尔曲线,(x1,y1) 为控制点,(x2,y2)为控制点,(x3,y3) 为结束点
	    first.rCubicTo(8.125f, -16.317f, 39.753f, -27.851f, 55.49f, -2.765f);
	    second = new Path();
	    second.moveTo(60.531f, 17.235f);
	    second.rCubicTo(11.301f, 18.015f, -3.699f, 46.083f, -23.725f, 43.456f);	    
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedA = new JoinedPath(first, second);
	
	    first = new Path();
	    first.moveTo(64.959f, 20f);
	    first.rCubicTo(4.457f, 16.75f, 1.512f, 37.982f, -22.557f, 42.699f);
	    second = new Path();
	    second.moveTo(42.402f, 62.699f);
	    second.cubicTo(18.333f, 67.418f, 8.807f, 45.646f, 8.807f, 32.823f);
	    scalePath(first, density);
	    scalePath(second, density);
	    joinedB = new JoinedPath(first, second);
	    topLine = new BridgingLine(joinedA, joinedB);

可以看到,首先new了一个first,然后moveTo()到一个位置(可想而知,这是状态1,a点的位置),然后调用rCubicTo()方法构造了贝塞尔曲线路径,这是一个三次贝塞尔曲线,关于rCubicTo()的具体用法,大家可以看api文档。这里(55.49f, -2.765f)对应的,就是状态2,a点的位置了,至于其他两个控制点,是由作者自己算出来的(计算方法上面已经说过了,就是模拟轨迹得到的)。

然后是second,其实就是状态2,到状态3了

接着调用scalePath()方法,其实是就是根据屏幕比例缩放了,上面已经提到过

/**
	   * Scales the paths to the given screen density. If the density matches the
	   * {@link DrawerArrowDrawable#PATH_GEN_DENSITY}, no scaling needs to be done.
	   * 根据屏幕密度扩大路径尺寸
	   */
	  private static void scalePath(Path path, float density) {
	    if (density == PATH_GEN_DENSITY) return;
	    Matrix scaleMatrix = new Matrix();
	    scaleMatrix.setScale(density / PATH_GEN_DENSITY, density / PATH_GEN_DENSITY, 0, 0);
	    path.transform(scaleMatrix);
	  }

最后,将两条路径合并成一个JoinedPath对象,由此可得,JoinedPath对象是保存了a从状态1到2的路径和a从状态2到3的路径

也即是JoinedPath保留了a的整个运动轨迹

/**
	   * Joins two {@link Path}s as if they were one where the first 50% of the path is {@code
	   * PathFirst} and the second 50% of the path is {@code pathSecond}.
	   * 合并两个路径,前50%为路径1,后50%为路径2
	   */
	  private static class JoinedPath {	
	    private final PathMeasure measureFirst;
	    private final PathMeasure measureSecond;
	    private final float lengthFirst;
	    private final float lengthSecond;
	
	    private JoinedPath(Path pathFirst, Path pathSecond) {
	    	//PathMeasure类用于提供路径上的点坐标
	    	measureFirst = new PathMeasure(pathFirst, false);
	    	measureSecond = new PathMeasure(pathSecond, false);
	    	lengthFirst = measureFirst.getLength();
	    	lengthSecond = measureSecond.getLength();
	    }
	
	    /**
	     * Returns a point on this curve at the given {@code parameter}.
	     * For {@code parameter} values less than .5f, the first path will drive the point.
	     * For {@code parameter} values greater than .5f, the second path will drive the point.
	     * For {@code parameter} equal to .5f, the point will be the point where the two
	     * internal paths connect.
	     * 根据参数(比例)返回曲线上的点
	     * 如果参数parameter小于0.5,使用第一条路径计算,大于0.5,使用第二条路径计算
	     * 等于0.5,该点为两条路径的连接点
	     */
	    private void getPointOnLine(float parameter, float[] coords) {
	      if (parameter <= .5f) {
	        parameter *= 2;
	        /*
	         * Pins distance to 0 <= distance <= getLength(), 
	         * and then computes the corresponding position and tangent. 
	         * Returns false if there is no path, or a zero-length path was specified, 
	         * in which case position and tangent are unchanged.
	         * 根据距离(该距离范围在0到路径长度之间),计算路径上相应点的坐标和tan三角函数值,分别存储在
	         * 后两个参数之中(后两个参数都是拥有两个元素的一维数组)	         	         
	         */
	        measureFirst.getPosTan(lengthFirst * parameter, coords, null);
	      } else {
	        parameter -= .5f;
	        parameter *= 2;
	        measureSecond.getPosTan(lengthSecond * parameter, coords, null);
	      }
	    }
	  }
有上面代码可以看到,JoinedPath中有两个PathMeasure对象,PathMeasure是android提供的,用来获取路径上点的坐标的一个类

例如我们有path路径a,长度是10(路径可能是曲线),我们用这个path创建一个PathMeasure对象,调用PathMeasure的getPosTan()方法,传入一个比例p(0-1),就可以得到在路径上,走了10*p距离的点的坐标。

那么对于a点,也就是说我们现在可以获得其轨迹上任意一点的坐标。


同理,对于b点

我们再次创建了first,second,然后合并出JoinedPath。

对于a,b两点的JoinedPath,我们又利用一个类来封装它们BridgingLine

topLine = new BridgingLine(joinedA, joinedB);
来看BridgingLine
/** 
	   * Draws a line between two {@link JoinedPath}s at distance {@code parameter} along each path.
	   * 根据两条路径上的点画一条直线 
	   */
	  private class BridgingLine {
	
	    private final JoinedPath pathA;
	    private final JoinedPath pathB;
	
	    private BridgingLine(JoinedPath pathA, JoinedPath pathB) {
	      this.pathA = pathA;
	      this.pathB = pathB;
	    }
	
	    /**
	     * Draw a line between the points defined on the paths backing {@code measureA} and
	     * {@code measureB} at the current parameter
	     * 根据当前参数,利用在两条路径上的两个点,画一条直线
	     */
	    private void draw(Canvas canvas) {
	      pathA.getPointOnLine(parameter, coordsA);
	      pathB.getPointOnLine(parameter, coordsB);
	      if (rounded) insetPointsForRoundCaps();
	      canvas.drawLine(coordsA[0], coordsA[1], coordsB[0], coordsB[1], linePaint);
	    }
	
	    /**
	     * Insets the end points of the current line to account for the protruding
	     * ends drawn for {@link Cap#ROUND} style lines.
	     * 
	     */
	    private void insetPointsForRoundCaps() {
	      vX = coordsB[0] - coordsA[0];
	      vY = coordsB[1] - coordsA[1];
	
	      magnitude = (float) Math.sqrt((vX * vX + vY * vY));
	      paramA = (magnitude - halfStrokeWidthPixel) / magnitude;
	      paramB = halfStrokeWidthPixel / magnitude;
	
	      coordsA[0] = coordsB[0] - (vX * paramA);
	      coordsA[1] = coordsB[1] - (vY * paramA);
	      coordsB[0] = coordsB[0] - (vX * paramB);
	      coordsB[1] = coordsB[1] - (vY * paramB);
	    }
	  }
BridgingLine没有太复杂的东西,其实就是提供了draw方法,用于画出a,b两点连成的横线。


到此位置,我们就可以画出a,b两点的横线了,但是a,b两个的坐标变化,是取决于parameter这个参数的

 pathA.getPointOnLine(parameter, coordsA);
	      pathB.getPointOnLine(parameter, coordsB);
那么这个参数又是什么决定的呢?

其实这个参数是我们主动传进去的,而这个参数大小,就等于侧拉抽屉的显示比例(当前显示面积,除以总面积)

这个是可想而知的,当这个侧拉抽屉被拉出来时,parameter应该等于1,表示去a,b点轨迹的最后一个点

而完全没有被拉出是,parameter应该等于0,表示去a,b点轨迹的第一个点


我们来看在外部怎么调用

final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        final ImageView imageView = (ImageView) findViewById(R.id.drawer_indicator);
        final Resources resources = getResources();
    
        drawerArrowDrawable = new DrawerArrowDrawable(resources);
        drawerArrowDrawable.setStrokeColor(resources.getColor(R.color.light_gray));
        imageView.setImageDrawable(drawerArrowDrawable);
    
        drawer.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {
            @Override
            /*
             * Called when a drawer's position changes.//抽屉变化时调用
             * drawerView     The child view that was moved//被移动的子控件
             * slideOffset     The new offset of this drawer within its range, from 0-1//移动的比例 
             */
            public void onDrawerSlide(View drawerView, float slideOffset) {                
                offset = slideOffset;    
                // Sometimes slideOffset ends up so close to but not quite 1 or 0.
                //有时候移动停止时,slideOffset接近0或1,设置翻转
                if (slideOffset >= .995) {
                  flipped = true;
                  drawerArrowDrawable.setFlip(flipped);
                } else if (slideOffset <= .005) {
                  flipped = false;
                  drawerArrowDrawable.setFlip(flipped);
                }
            
                drawerArrowDrawable.setParameter(offset);                
        }
    });
从上面我们可以看到,我们为imageview设置了DrawerArrowDrawable对象,然后为DrawerLayout设置了一个监听器

对于这个监听器SimpleDrawerListener的onDrawerSlide()方法,当侧拉时,就会调用,传入slideOffset,也就是侧拉比例

可以知道slideOffset其实就是我们的parameter。

到此为止,这个箭头的效果就被我们实现了,接下只要在DrawerArrowDrawable的ondraw()方法里面,不断的绘制这三条曲线就好了

另外,这里做了一些近似处理,有时候移动停止时,slideOffset接近0或1,设置翻转

为什么要翻转呢,注意到,抽屉被拉出,和抽屉被缩入,箭头旋转的方向是不一样的,前者是0到180°,后者是180°到上360°

怎么实现呢,来看ondraw()方法就知道了

@Override 
	  public void draw(Canvas canvas) {
	    if (flip) {//是否翻转画布
	      canvas.save();
	      canvas.scale(1f, -1f, getIntrinsicWidth() / 2, getIntrinsicHeight() / 2);//中心点不变,y坐标对称
	    }
	
	    topLine.draw(canvas);
	    middleLine.draw(canvas);
	    bottomLine.draw(canvas);
	
	    if (flip) canvas.restore();
	  }

这个根据flip是否为真,从而决定是否翻转画布,翻转画布的效果的就是,使画布y坐标根据中心对称

对称以后,同样的效果0到180°,就会在画布上显示180°到上360°了,然后再讲画布恢复正常就可以了。


OK,DrawerArrowDrawable源码解析到这里就结束,看似简单的功能,却有复杂的逻辑。其实最复杂的逻辑在贝塞尔曲线的确定,本文提供了确定的思路,没有做具体的实现,大家可以参考控件原作者的文章。

ChrisRenke/DrawerArrowDrawable源码解析

标签:

原文地址:http://blog.csdn.net/crazy__chen/article/details/46334843

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!