方式一：利用shape绘制
xml布局
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@drawable/shape_dash"
android:layerType="software" />
shape_dash.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="3px"
android:color="#FF0000"
android:dashWidth="10px"
android:dashGap="10px" />
</shape>
方式二：自定义View绘制虚线，drawLines实现
xml布局
<com.jianshu.DashView
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="10dp"
app:dashWidth="5dp"
app:lineColor="@color/colorPrimary"
app:lineHeight="2dp"
app:lineWidth="5dp" />
自定义view：
public class DashView extends View {
private static final String TAG = "DashView";
public static final int DEFAULT_DASH_WIDTH = 100;
public static final int DEFAULT_LINE_WIDTH = 100;
public static final int DEFAULT_LINE_HEIGHT = 10;
public static final int DEFAULT_LINE_COLOR = 0x9E9E9E;
/**虚线的方向*/
public static final int ORIENTATION_HORIZONTAL = 0;
public static final int ORIENTATION_VERTICAL = 1;
/**默认为水平方向*/
public static final int DEFAULT_DASH_ORIENTATION = ORIENTATION_HORIZONTAL;
/**间距宽度*/
private float dashWidth;
/**线段高度*/
private float lineHeight;
/**线段宽度*/
private float lineWidth;
/**线段颜色*/
private int lineColor;
private int dashOrientation;
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private int widthSize;
private int heightSize;
public DashView(Context context) {
this(context,null);
}
public DashView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.DashView);
dashWidth = typedArray.getDimension(R.styleable.DashView_dashWidth,DEFAULT_DASH_WIDTH);
lineHeight = typedArray.getDimension(R.styleable.DashView_lineHeight, DEFAULT_LINE_HEIGHT);
lineWidth = typedArray.getDimension(R.styleable.DashView_lineWidth, DEFAULT_LINE_WIDTH);
lineColor = typedArray.getColor(R.styleable.DashView_lineColor, DEFAULT_LINE_COLOR);
dashOrientation = typedArray.getInteger(R.styleable.DashView_dashOrientation,DEFAULT_DASH_ORIENTATION);
mPaint.setColor(lineColor);
mPaint.setStrokeWidth(lineHeight);
typedArray.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
widthSize = MeasureSpec.getSize(widthMeasureSpec)-getPaddingLeft()-getPaddingRight();
heightSize = MeasureSpec.getSize(heightMeasureSpec - getPaddingTop() - getPaddingBottom());
Log.d(TAG, "onMeasure: "+widthSize+"----"+heightSize);
Log.d(TAG, "dashOrientation: "+dashOrientation);
if(dashOrientation == ORIENTATION_HORIZONTAL){
//不管在布局文件中虚线高度设置为多少，虚线的高度统一设置为实体线段的高度
setMeasuredDimension(widthSize, (int) lineHeight);
}else{
setMeasuredDimension((int) lineHeight, heightSize);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (dashOrientation){
case ORIENTATION_VERTICAL:
drawVerticalLine(canvas);
break;
default:
drawHorizontalLine(canvas);
}
}
/**
* 画水平方向虚线
* @param canvas
*/
public void drawHorizontalLine(Canvas canvas){
float totalWidth = 0;
canvas.save();
float[] pts = {0,0,lineWidth,0};
//在画线之前需要先把画布向下平移办个线段高度的位置，目的就是为了防止线段只画出一半的高度
//因为画线段的起点位置在线段左下角
canvas.translate(0,lineHeight/2);
while(totalWidth<=widthSize){
canvas.drawLines(pts,mPaint);
canvas.translate(lineWidth + dashWidth,0);
totalWidth += lineWidth + dashWidth;
}
canvas.restore();
}
/**
* 画竖直方向虚线
* @param canvas
*/
public void drawVerticalLine(Canvas canvas){
float totalWidth = 0;
canvas.save();
float[] pts = {0,0,0,lineWidth};
//在画线之前需要先把画布向右平移半个线段高度的位置，目的就是为了防止线段只画出一半的高度
//因为画线段的起点位置在线段左下角
canvas.translate(lineHeight/2,0);
while(totalWidth<=heightSize){
canvas.drawLines(pts,mPaint);
canvas.translate(0,lineWidth + dashWidth);
totalWidth += lineWidth + dashWidth;
}
canvas.restore();
}
}
方式三：自定义View绘制虚线，drawPath实现
xml布局
<com.jianshu.DashView2
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="10dp"
app:dashOrientation="1"
app:dashWidth="10dp"
app:lineColor="@color/colorPrimary"
app:lineHeight="200dp"
app:lineWidth="400dp" />
自定义view：
public class DashView2 extends View {
private Paint mPaint;
private Path mPath;
public DashView2(Context context) {
this(context, null);
}
public DashView2(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(0xffff0000);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(3);
//设置绘制路径的效果
mPaint.setPathEffect(new DashPathEffect(new float[]{15, 5},0));
mPath = new Path();
mPath.addCircle(0, 0, 3, Path.Direction.CW);
mPaint.setPathEffect(new PathDashPathEffect(mPath, 15, 0, PathDashPathEffect.Style.ROTATE));
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//设置渐变色，选用
// mPaint.setShader(new LinearGradient(0, 0, getWidth(), 0,
// new int[]{Color.TRANSPARENT, Color.BLACK, Color.BLACK, Color.TRANSPARENT},
// new float[]{0, 0.3f, 0.7f, 1f}, Shader.TileMode.CLAMP));
}
@Override
protected void onDraw(Canvas canvas) {
int centerY = getHeight() / 2;
mPath.reset();
mPath.moveTo(0, centerY);
mPath.lineTo(getWidth(), centerY);
canvas.drawPath(mPath, mPaint);
}
}
网友评论