流量显示

电量显示

存储空间显示

先介绍最后这个存储空间显示的LinearColorBar，通过名字就可以看出是是继承于LinearLayout，确实也是如此。分析一下这个效果，在控件的左边显示已经使用了多少空间，右边是所有可用空间。上面还有所显示的类别，RAM。当然最主要的还是那个环形的效果。看一下LinearColorBar的实现代码：

/**
*
*/
package com.example.settingscustomviewdemo.widget;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.widget.LinearLayout;public class LinearColorBar extends LinearLayout {static final int LEFT_COLOR = 0xff0099cc;static final int MIDDLE_COLOR = 0xff0099cc;static final int RIGHT_COLOR = 0xff888888;private float mRedRatio;private float mYellowRatio;private float mGreenRatio;private boolean mShowingGreen;final Rect mRect = new Rect();final Paint mPaint = new Paint();int mLastInterestingLeft, mLastInterestingRight;int mLineWidth;final Path mColorPath = new Path();final Path mEdgePath = new Path();final Paint mColorGradientPaint = new Paint();final Paint mEdgeGradientPaint = new Paint();public LinearColorBar(Context context, AttributeSet attrs) {super(context, attrs);setWillNotDraw(false);mPaint.setStyle(Paint.Style.FILL);mColorGradientPaint.setStyle(Paint.Style.FILL);mColorGradientPaint.setAntiAlias(true);mEdgeGradientPaint.setStyle(Paint.Style.STROKE);mLineWidth = getResources().getDisplayMetrics().densityDpi >= DisplayMetrics.DENSITY_HIGH? 2 : 1;mEdgeGradientPaint.setStrokeWidth(mLineWidth);mEdgeGradientPaint.setAntiAlias(true);}public void setRatios(float red, float yellow, float green) {mRedRatio = red;mYellowRatio = yellow;mGreenRatio = green;invalidate();}public void setShowingGreen(boolean showingGreen) {if (mShowingGreen != showingGreen) {mShowingGreen = showingGreen;updateIndicator();invalidate();}}private void updateIndicator() {int off = getPaddingTop() - getPaddingBottom();if (off < 0) off = 0;mRect.top = off;mRect.bottom = getHeight();if (mShowingGreen) {mColorGradientPaint.setShader(new LinearGradient(0, 0, 0, off-2, RIGHT_COLOR&0xffffff, RIGHT_COLOR, Shader.TileMode.CLAMP));} else {mColorGradientPaint.setShader(new LinearGradient(0, 0, 0, off-2, MIDDLE_COLOR&0xffffff, MIDDLE_COLOR, Shader.TileMode.CLAMP));}mEdgeGradientPaint.setShader(new LinearGradient(0, 0, 0, off/2, 0x00a0a0a0, 0xffa0a0a0, Shader.TileMode.CLAMP));}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);updateIndicator();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);int width = getWidth();int left = 0;int right = left + (int)(width*mRedRatio);int right2 = right + (int)(width*mYellowRatio);int right3 = right2 + (int)(width*mGreenRatio);int indicatorLeft, indicatorRight;if (mShowingGreen) {indicatorLeft = right2;indicatorRight = right3;} else {indicatorLeft = right;indicatorRight = right2;}if (mLastInterestingLeft != indicatorLeft || mLastInterestingRight != indicatorRight) {mColorPath.reset();mEdgePath.reset();if (indicatorLeft < indicatorRight) {final int midTopY = mRect.top;final int midBottomY = 0;final int xoff = 2;mColorPath.moveTo(indicatorLeft, mRect.top);mColorPath.cubicTo(indicatorLeft, midBottomY,-xoff, midTopY,-xoff, 0);mColorPath.lineTo(width+xoff-1, 0);mColorPath.cubicTo(width+xoff-1, midTopY,indicatorRight, midBottomY,indicatorRight, mRect.top);mColorPath.close();final float lineOffset = mLineWidth+.5f;mEdgePath.moveTo(-xoff+lineOffset, 0);mEdgePath.cubicTo(-xoff+lineOffset, midTopY,indicatorLeft+lineOffset, midBottomY,indicatorLeft+lineOffset, mRect.top);mEdgePath.moveTo(width+xoff-1-lineOffset, 0);mEdgePath.cubicTo(width+xoff-1-lineOffset, midTopY,indicatorRight-lineOffset, midBottomY,indicatorRight-lineOffset, mRect.top);}mLastInterestingLeft = indicatorLeft;mLastInterestingRight = indicatorRight;}if (!mEdgePath.isEmpty()) {canvas.drawPath(mEdgePath, mEdgeGradientPaint);canvas.drawPath(mColorPath, mColorGradientPaint);}if (left < right) {mRect.left = left;mRect.right = right;mPaint.setColor(LEFT_COLOR);canvas.drawRect(mRect, mPaint);width -= (right-left);left = right;}right = right2;if (left < right) {mRect.left = left;mRect.right = right;mPaint.setColor(MIDDLE_COLOR);canvas.drawRect(mRect, mPaint);width -= (right-left);left = right;}right = left + width;if (left < right) {mRect.left = left;mRect.right = right;mPaint.setColor(RIGHT_COLOR);canvas.drawRect(mRect, mPaint);}}
}

读完源码看一下它的变量，画笔Paint不说了，用于设置笔触的样式。除此之外就是Rect和Path了，关于这两个类的功能，其实从字面意思大体可以猜得出来。Rect是用于绘制矩形的，Path则用于画线，包括直线、二次曲线、三次曲线等。那从这两个类的用途就不难猜出它们各自在LinaerColorBar中的作用了，Rect用于绘制使用了多少空间的进度条，Path则是用于绘制那个二次型图案。

然后直接进入Draw()方法，开始初始化一些变量，这些变量之后会使用到。

          int width = getWidth();//获取组件宽度int left = 0;//int right = left + (int) (width * mRedRatio);//int right2 = right + (int) (width * mYellowRatio);//int right3 = right2 + (int) (width * mGreenRatio);//int indicatorLeft, indicatorRight;if (mShowingGreen) {indicatorLeft = right2;indicatorRight = right3;} else {indicatorLeft = right;indicatorRight = right2;}

这几个right值就是根据设置的空间使用大小转换而来的，其实就是控件宽度的比例值，在画Rect的时候传入即可。接着往下看，

                    mColorPath.moveTo(indicatorLeft, mRect.top);mColorPath.cubicTo(indicatorLeft, midBottomY, -xoff, midTopY,-xoff, 0);mColorPath.lineTo(width + xoff - 1, 0);mColorPath.cubicTo(width + xoff - 1, midTopY, indicatorRight,midBottomY, indicatorRight, mRect.top);mColorPath.close();

这段代码就是用于画这个弧形的，首先moveTo()方法，将画笔移动到这个点，然后使用cubicTo方法画一个二次曲线，因为画笔设置了Paint.Style.FILL，所以看起来像是一片的效果，而不是直线。

                    final float lineOffset = mLineWidth + .5f;mEdgePath.moveTo(-xoff + lineOffset, 0);mEdgePath.cubicTo(-xoff + lineOffset, midTopY, indicatorLeft+ lineOffset, midBottomY, indicatorLeft + lineOffset,mRect.top);mEdgePath.moveTo(width + xoff - 1 - lineOffset, 0);mEdgePath.cubicTo(width + xoff - 1 - lineOffset, midTopY,indicatorRight - lineOffset, midBottomY, indicatorRight- lineOffset, mRect.top);

这段代码用于在之前的基础上描边，

这样，弧形效果就实现了。然后就是下面的矩形了，

if (left < right) {mRect.left = left;mRect.right = right;mPaint.setColor(LEFT_COLOR);canvas.drawRect(mRect, mPaint);width -= (right - left);left = right;}right = right2;if (left < right) {mRect.left = left;mRect.right = right;mPaint.setColor(MIDDLE_COLOR);canvas.drawRect(mRect, mPaint);width -= (right - left);left = right;}right = left + width;if (left < right) {mRect.left = left;mRect.right = right;mPaint.setColor(RIGHT_COLOR);canvas.drawRect(mRect, mPaint);}

这个就相对简单了，用Rect直接画就行了。

总结：这个自定义的控件是继承于系统原有的容器控件LinearLayout，为什么要选择LinearLayout呢，其实也可以是RelativeLayout,容器控件都可以，只要把那三个TextView安放好位置就行。然后就是绘图了，这里结合了Paint、Path、Rect以及Canvas的使用，其实自定义控件很多时候就是使用这几个类，所以对这几个类的掌握尤为重要。那最后就是逻辑，这也是很重要的一个部分，对于效果我们可能想到使用什么类去实现，那对于效果的控制与变化就需要依靠逻辑了。

demo下载