【移动应用开发技术】怎么在Android中通过自定义View实现一个横行时间轴效果

【移动应用开发技术】怎么在Android中通过自定义View实现一个横行时间轴效果

这期内容当中在下将会给大家带来有关怎么在Android中通过自定义View实现一个横行时间轴效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。首先看下最终想要的效果：根据上图可以总结出以下几点：每个阶段要显示时间、阶段名、状态图标、中间有虚线；文字上下交错显示；相邻阶段的文字在垂直方向上是可以相交的；时间轴的个数不确定，但是要铺满屏幕并且不可滑动；如果只实现上两点的效果，使用RecycleView无疑是最好的选择，但是要同时实现以上整个效果目前想到的最好的办法就是使用自定义view。二、如何开始？相信也有人跟我一样，对自定义的绘制过程view、canvas、path、paint的使用有了解，但是真的要去写自定义view确不知道从何开始，不知道第一步如何下手。我个人的总结就是：想要的太多，迟迟不动手，所以有想法一定要去动手试验！不要想着写完第一次运行就是最终想展示的完美效果，而是要抱着整体拆分成不重复的小块，然后去绘制重复块，然后去一点点实现一步步完美的心态才能做出来。所以首先要把想实现的view拆分成一个个小的可绘制的并且没有重复的块，以目前想实现的时间轴效果来说，最小可绘制无重复块也就是只包括一个时间结点的块如图：它包括：垂直居中的一条虚线；一个表示状态的图标；一个显示时间的文本块；一个显示阶段名的文本块；三、开始画有了上面的分析，接下来就要开始画了。1.画中间的线首先画虚线，如果虚线不知道怎么画，可以先画一条实线，然后再去找画虚线的方法。使用canvas中画线的方法drawLine(floatstartX,floatstartY,floatstopX,floatstopY,@NonNullPaintpaint)根据参数得知需知道线的起点与终点坐标以及一个paint对象，因为是垂直居中且横穿整个控件的直线所以可以确定两个点的y坐标是一样的，也就是控件高的一半，起点的x坐标为0，终点的x坐标为控件的宽。也就是知道控件的宽和高之后就可以绘制出这条线。获取控件的宽高，可以在onMeasure方法中获取：@Override

protected

void

onMeasure(int

widthMeasureSpec,

int

heightMeasureSpec)

{

super.onMeasure(widthMeasureSpec,

heightMeasureSpec);

mViewWidth

=

MeasureSpec.getSize(widthMeasureSpec)

-

dip2px(mContext,

mSafeDistance

*

2);

mViewHeight

=

MeasureSpec.getSize(heightMeasureSpec);

}画线的代码（在onDraw方法中添加，下面其它的绘制方法同样是在onDraw方法中添加）：//

定义画笔，并设置相关属性

Paint

mLinePaint

=

new

Paint();

mLinePaint.setColor(Color.parseColor("#999999"));

mLinePaint.setStrokeWidth(1);

mLinePaint.setStyle(Paint.Style.STROKE);

//

画虚线

canvas.drawLine(0,

mViewHeight

/

2,

mViewWidth,

mViewHeight

/

2,

mLinePaint);2.画图标canvas画图标的方法：drawBitmap(@NonNullBitmapbitmap,floatleft,floattop,@NullablePaintpaint)，根据方法的参数去分析如何准备值，这里需要一个bitmap对象，起点坐标以及paint。bitmap对象可以将资源文件drawable转为bitmap格式；坐标就是控件的中心点。画图标的代码：//

图标

x，y

坐标

Bitmap

statusBitmap

=

BitmapFactory.decodeResource(mContext.getResources(),

R.mipmap.ic_no_pass);

float

bX

=

mViewWidth

/

2;

//

垂直的中心点在图标的顶部，所以要减去

bitmap

高的一半

float

bY

=

mViewHeight

/

2

-

statusBitmap.getHeight()

/

2f;

Paint

mBitmapPaint

=

new

Paint();

mBitmapPaint.setFilterBitmap(true);

canvas.drawBitmap(statusBitmap,

bX,

bY,

mBitmapPaint);3.画文本canvas画文本的方法：drawText(@NonNullStringtext,floatx,floaty,@NonNullPaintpaint)，依然是根据方法得知需要知道绘制的内容，开始的坐标点以及paint。当文本在图标上方时，文本的y坐标需要使用图标的y坐标减去文本到图标的距离，x坐标同图片的x坐标一样；当文本在图标下方时，文本的y坐标需要使用图标的y坐标加上文本到图标的距离。画文本的代码：//

定义画笔

Paint

mDatePaint

=

new

Paint();

mDatePaint.setColor(Color.parseColor("#666666"));

mDatePaint.setTextSize(dip2px(mContext,

12));

mDatePaint.setStyle(Paint.Style.FILL);

mDatePaint.setTextAlign(Paint.Align.CENTER);

mDatePaint.setAntiAlias(true);

Paint

mNamePain

=

new

Paint();

mNamePain.setColor(Color.parseColor("#666666"));

mNamePain.setTextSize(dip2px(mContext,

13));

mNamePain.setStyle(Paint.Style.FILL);

mNamePain.setTextAlign(Paint.Align.CENTER);

mNamePain.setAntiAlias(true);

//

定义坐标变量

float

dateX

=

bX

+

statusBitmap.getWidth()

/

2f;

float

dateY;

dateY

=

mViewHeight

/

2

-

dip2px(mContext,

19);

//

画文字，在图标上

canvas.drawText("有效时间",

dateX,

dateY,

mNamePain);

canvas.drawText("09.27-09.29",

dateX,

dateY

-

dateTextHeight

mDatePaint);

//

画文字，在图标下

dateY

=

mViewHeight

/

2

+

dip2px(mContext,

19);

canvas.drawText("09.27-09.29",

dateX,

dateY,

mDatePaint);

canvas.drawText("有效时间",

dateX,

dateY

+

dateTextHeigh,

mNamePain);4.由局部到整体上面已经完成了只有一个时间点的绘制，接下来思考如果有多个时间点时如何绘制。只有一个时间点时计算坐标是以控件的宽高进行计算，那么当有两个时间点的时候需要首先把控件均分成两部分，然后在均分的部分中计算对应的坐标，完成绘制。当有三个时间点的时候需要均分为三部分，然后在各自的部分计算对应的坐标，完成绘制。所以得到不论时间点的个数有多少绘制的方法不会改变，需要改变的是绘制时候用到的点的坐标。其实已经可以看出，当多个点的时候需要循环一下，代码如下：//

得到多个点时，其中每个部分的宽，itevW

也就等同与上面只有一个时间点时控件的宽

float

itemW

=

mViewWidth

/

mDataList.size();

for

(int

i

=

0;

i

<

mDataList.size();

i++)

{

//

完成相关计算、绘制

}5.完善到这里，整个分析及绘制就差不多要结束了。绘制虚线的方法：mLinePaint.setPathEffect(newD