Setting下的自定义控件LinearColorBar
版本：1.0
日期：2014.3.21
版权：© 2013，2014 kince 转载注明出处
Setting应用下使用了不少自定义控件，比如这些效果：
![]()
![]()
![]()
流量显示
电量显示
存储空间显示
先介绍最后这个
存储空间显示的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));
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
updateIndicator();
}
@Override
protected 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下载