转载请注明出处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中的第一个控件。会被当成是抽屉，而第二个控件。会被当成主要内容。
由此可见，側拉的效果是非常easy实现(使用google提供的包)。
然而对照我们的DrawerArrowDrawable，会发现DrawerArrowDrawable有一个很炫的效果，就是标题栏上的箭头变化。在初始状态。箭头是三条横线，当側拉时，三条横线逐渐聚合成箭头。当側拉返回时，又由箭头分散为三条横线。
本质上，这个箭头的实现，就是整个DrawerArrowDrawable的难点。大家可能一下子没有太好的思路。
我们先来看一下箭头变化的过程图
对于整个箭头总体，本质上是一个drawable,也就是说我们自己定义一个drawable(这样的方法我们在本专栏的其它文章也见过)，改动它的ondraw方法。来实现一些复制的动画效果。
对于DrawerArrowDrawable，我们先关注三条横线中的第一条，对于第一条横线，有首尾两个点(这个两个点决定了这条横线)。以下的说明都是针对第一条横线而言(其它横线的原理和第一条是一样的)
横线在初始状态，有首尾两个点。称为a,b。a，b在整个箭头变化过程中，所在位置不断变化，从而构成一条轨迹(a,b各自一条)
我们将这个箭头状态分成三部分，例如以下
对于1,2,3三个状态。我们仅仅考察a点。对于a点而言。状态1，到状态2，能够形成一个轨迹，是一个贝塞尔曲线(什么是贝塞尔曲线，大家能够自行百度，简而言之就是由一系列控制点（至少一个）。能够确定两点之间的一条平滑曲线)。
有人会问。凭什么确定这是一条贝塞尔曲线呢，事实上我们没有办法确定。可是我们能够确定一条贝塞尔曲线，使之近似等于a点的运动过轨，也就是说我们是把a点的轨迹抽象成函数，然后通过这个函数，我们就能够确定轨迹上每一点的坐标了。
注意。这里的因果关系要弄明确。是现有轨迹，后有曲线，这个控件的作者，也是依据实际的轨迹，推算出轨迹的函数表达式的。
Ok,那么我们也easy知道。状态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);//中心点不变