android自定義控件實現簡易時間軸(2)
這篇做瞭一個簡單的時間軸控件。右側的數據就是一個簡單的字符串。問題還是有的，當右側的文字長度不一樣的時候就會有問題瞭。現在可以修改一下適配右側的文字。
效果如下：
代碼：
private Paint bgPaint, linePaint, borderPaint,textPaint;
private Rect bgRect, textRect;
//基本屬性
private int mTextSize;
private int mTextColor;
private String mTextTitle="默認文本內容";
private int lineColr = Color.parseColor("#AAAAAA");
private int borderColor = Color.parseColor("#AAAAAA");
private int bgColor = Color.parseColor("#138DDD");
private int mBorderColor=0xFFDDDDDD;
private int mBorderWidth = 10;
private int mLineColor=Color.parseColor("#ff000000");
private int mLineWidth = 2;
private int mLineHeight;
private int mBgColor;
private int mWidth =0;
private int mHeight =300;//整個控件的寬和高
//line繪制
private int lineLocation = -1;//0 上方 1 下方 2 上下兩個
private int mRadius = 90;//直徑,最終會被寬高限制
//設置line的位置 0 上方 1 下方 2 上下兩個
public void setLineLocation(int lineLocation) {
this.lineLocation = lineLocation;
}
//設置純色的整圓形，包括背景
public void setBgAndBorderColor(int color) {
this.mBgColor = color;
}
public void setmHeight(int mHeight) {
this.mHeight = mHeight;
}
public void setmBorderColor(int mBorderColor) {
this.mBorderColor = mBorderColor;
}
public void setmTextTitle(String mTextTitle) {
this.mTextTitle = mTextTitle;
}
public void setmRadius(int mRadius) {
this.mRadius = mRadius;
}
public void setmLineHeight(int mLineHeight) {
this.mLineHeight = mLineHeight;
}
public TimeLineSingleView(Context context) {
this(context,null);
}
public TimeLineSingleView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public TimeLineSingleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCicleView, defStyleAttr, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.CustomCicleView_textSize:
// 默認設置為16sp，TypeValue也可以把sp轉化為px
mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 14, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_textColor:
mTextColor = a.getColor(attr, Color.BLACK);
break;
case R.styleable.CustomCicleView_textTitle:
mTextTitle = a.getString(attr);
break;
case R.styleable.CustomCicleView_lineWidth:
mLineWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_lineColor:
mLineColor = a.getColor(attr, lineColr);
break;
case R.styleable.CustomCicleView_mRadius:
mRadius=a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_borderWidth:
mBorderWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomCicleView_borderColor:
mBorderColor = a.getColor(attr, borderColor);
break;
case R.styleable.CustomCicleView_bgColor:
mBgColor = a.getColor(attr, bgColor);
break;
}
}
a.recycle();
bgPaint = new Paint();
borderPaint = new Paint();
linePaint = new Paint();
textPaint = new Paint();
textRect = new Rect();
textPaint.setTextSize(mTextSize);
}
//EXACTLY :在準確的數值和Match_parent的狀態是這個值 列表中，wrap_content的狀態下必須計算一個合適的值
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int w = 0;
int h =0;
int widthMode=MeasureSpec.getMode(widthMeasureSpec);
int heightMode=MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if(widthMode==MeasureSpec.EXACTLY){
w=widthSize;
}else{
w=Math.max(mHeight,mRadius+getPaddingRight()+getPaddingLeft());
}
if(heightMode==MeasureSpec.EXACTLY){
h=heightSize;
}else{
h=Math.max(mHeight,mRadius+getPaddingTop()+getPaddingBottom());
}
setMeasuredDimension(w,h);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centreX = getWidth()/ 2; // 獲取圓心的x坐標
int centreY=getHeight()/2;
//半徑比較
mBorderWidth =(mBorderWidth>=mRadius/10)?(mRadius/10):mBorderWidth;//半徑的1/5
int radius = mRadius/2 - mBorderWidth / 2;// 半徑
if(mLineHeight<=0){
mLineHeight=Math.abs(getHeight()/2-radius);//這個地方要判斷設置正負
}
//繪制圓
bgPaint.setAntiAlias(true); // 消除鋸齒
bgPaint.setColor(mBgColor);
bgPaint.setStyle(Paint.Style.FILL); // 設置實心
canvas.drawCircle(centreX, centreY, radius, bgPaint);
//繪制圓環
borderPaint.setStrokeWidth(mBorderWidth); // 設置圓環的寬度
borderPaint.setAntiAlias(true); // 消除鋸齒
if (mBorderColor != 0) {
borderPaint.setColor(mBorderColor);
} else {
borderPaint.setColor(borderColor);
}
borderPaint.setStyle(Paint.Style.STROKE); // 設置實心
canvas.drawCircle(centreX,centreY, radius - mBorderWidth / 2+mLineWidth/2, borderPaint);
//繪制文本
textPaint.setTextSize(mTextSize);
textPaint.setColor(mTextColor);
textPaint.getTextBounds(mTextTitle, 0, mTextTitle.length(), textRect);
canvas.drawText(mTextTitle, centreX -textRect.width()/2-mBorderWidth/2, centreY + textRect.height() / 2, textPaint);
//繪制線條
drawLineAll(canvas,centreX,centreY,radius);
}
//上下都繪制不用
//1 上方 0 下方 2 上下兩個
private void drawLineAll(Canvas canvas, float centreX, float centreY,int radius) {
if(lineLocation==-1){
linePaint.setColor(borderColor);
linePaint.setStrokeWidth(mLineWidth);
canvas.drawLine(centreX, 0, centreX, centreY-radius, linePaint);//上方的
canvas.drawLine(centreX, centreY+radius, centreX, getHeight(), linePaint);//下方的
}else{
//這個可以繪制不同的line
linePaint.setColor(lineColr);
linePaint.setStrokeWidth(mLineWidth);
if (lineLocation == 0) {
canvas.drawLine(centreX, centreY+radius, centreX, getHeight(), linePaint);
} else if (lineLocation == 1) {
canvas.drawLine(centreX, 0, centreX, centreY -radius , linePaint);
} else if (lineLocation == 2) {
canvas.drawLine(centreX, centreY+radius, centreX, getHeight(), linePaint);
canvas.drawLine(centreX, 0, centreX, centreY -radius , linePaint);
}
}
}
其他代碼和之前文章一樣就不貼瞭，但是還有一個問題就是，這個控件是放在一個列表裡面的，你在適配器中使用的時候佈局要是wrap的狀態下要計算一個合適的高度，比如listView 的Item的高度。這裡我沒有實現，還是在Match和固定高度中，後期更改。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。
推薦閱讀：
- android自定義控件實現簡易時間軸(1)
- android自定義帶箭頭對話框
- Android自定義控件實現通用驗證碼輸入框（二）
- Android開發Kotlin實現圓弧計步器示例詳解
- Android自定義view實現圓環進度條效果