Android自定义控件实现时间轴

本文实例为大家分享了Android自定义控件实现时间轴的具体代码，供大家参考，具体内容如下

由于项目中有需求，就简单的封装一个，先记录一下，有时间上传到github。

1、先增加自定义属性：

<?xml version='1.0' encoding='utf-8'?><resources> <declare-styleable name='global_TimelineLayout'><!--时间轴左偏移值--><attr name='global_line_margin_left' format='dimension' /><!--时间轴上偏移值--><attr name='global_line_margin_top' format='dimension' /><!--线宽--><attr name='global_line_stroke_width' format='dimension' /><!--线的颜色--><attr name='global_line_color' format='color' /><!--点的大小--><attr name='global_point_inner_size' format='dimension' /><attr name='global_point_out_size' format='dimension' /><!--点的上偏移值--><attr name='global_point_margin_top' format='dimension' /><!--点的颜色--><attr name='global_point_inner_color' format='color' /><attr name='global_point_out_color' format='color' /><!--图标--><attr name='global_icon_src' format='reference' /><!--虚线--><attr name='global_dash_gap' format='dimension' /><attr name='global_dash_width' format='dimension' /> </declare-styleable></resources>

2、自定义时间轴类：

/** * 时间轴控件 * <p>The following snippet shows how to include a linear layout in your layout XML file:</p> * * <com.taoche.mars.commonres.widget.TimelineLayout android: android:layout_width='40dp' android:layout_height='match_parent' app:global_line_margin_left='10dp' app:global_line_margin_top='0dp' app:global_point_margin_top='10dp' app:global_point_inner_color='#377CFF' app:global_point_out_color='#FFE8F0FF' app:global_point_out_size='8dp' app:global_point_inner_size='4dp' app:global_dash_width='8dp' app:global_dash_gap='2dp' app:global_line_color='#C9DCFF'> </com.taoche.mars.commonres.widget.TimelineLayout> * * <p>The following snippet shows how to java file:</p> * timelineLayout.setPointMarginTop(10) timelineLayout.setLineMarginTop(10) timelineLayout.setPointMarginTop(40) timelineLayout.setInterrupt(true) */class TimeLinearLayout @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : LinearLayout(context, attrs, defStyleAttr) { private var mContext: Context? = null private var mLineMarginLeft: Int = 10 private var mLineMarginTop: Int = 0 private var mPointMarginTop: Int = 0 private var mLineStrokeWidth: Int = 2 private var mLineColor: Int = 0 //内圆半径 private var mPointInnerSize: Int = 8 //外圆半径 private var mPointOutSize: Int = 18 //内圆颜色 private var mPointInnerColor: Int = 0 //外圆颜色 private var mPointOutColor: Int = 0 //虚线宽 private var mDashWidth: Int = 0 //虚线空白宽 private var mDashGap: Int = 0 //是否中断 private var mInterrupt: Boolean = false private var mIcon: Bitmap? = null //线的画笔 private var mLinePaint: Paint? = null //点的画笔 private var mPointPaint: Paint? = null //第一个点的位置 private var mFirstX = 0 private var mFirstY = 0 //最后一个图标的位置 private var mLastX = 0 private var mLastY = 0 init {setLayerType(View.LAYER_TYPE_SOFTWARE, null) //开启硬件加速val ta = context.obtainStyledAttributes(attrs, R.styleable.global_TimelineLayout)mLineMarginLeft = ta.getDimensionPixelOffset(R.styleable.global_TimelineLayout_global_line_margin_left, 10)mLineMarginTop = ta.getDimensionPixelOffset(R.styleable.global_TimelineLayout_global_line_margin_top, 0)mPointMarginTop = ta.getDimensionPixelOffset(R.styleable.global_TimelineLayout_global_point_margin_top, 0)mLineStrokeWidth = ta.getDimensionPixelOffset(R.styleable.global_TimelineLayout_global_line_stroke_width, 2)mLineColor = ta.getColor(R.styleable.global_TimelineLayout_global_line_color, -0xc22e5b)mPointInnerSize = ta.getDimensionPixelSize(R.styleable.global_TimelineLayout_global_point_inner_size, 8)mPointOutSize = ta.getDimensionPixelSize(R.styleable.global_TimelineLayout_global_point_out_size, 18)mPointInnerColor = ta.getColor(R.styleable.global_TimelineLayout_global_point_inner_color, -0xc22e5b)mPointOutColor = ta.getColor(R.styleable.global_TimelineLayout_global_point_out_color, -0x170f01)mDashGap = ta.getDimensionPixelOffset(R.styleable.global_TimelineLayout_global_dash_gap, 0)mDashWidth = ta.getDimensionPixelOffset(R.styleable.global_TimelineLayout_global_dash_width, 0)val iconRes = ta.getResourceId(R.styleable.global_TimelineLayout_global_icon_src, View.NO_ID)if (iconRes > View.NO_ID) { val drawable = ContextCompat.getDrawable(context,iconRes) as? BitmapDrawable if (drawable != null) {mIcon = drawable.bitmap }}ta.recycle()setWillNotDraw(false)initView(context) } fun setLineMarginTop(lineMarginTop:Int){this.mLineMarginTop = lineMarginTop } fun setPointMarginTop(pointMarginTop:Int){this.mPointMarginTop = pointMarginTop } fun setInterrupt(interrupt:Boolean){this.mInterrupt = interrupt } private fun initView(context: Context) {mContext = contextmLinePaint = Paint()mLinePaint?.apply { isAntiAlias = true isDither = true color = mLineColor strokeWidth = mLineStrokeWidth.toFloat() style = Paint.Style.FILL_AND_STROKE //虚线设置 if (mDashGap > 0 && mDashWidth > 0) {//mLinePaint.setPathEffect(new DashPathEffect(new float[]{20,5}, 20));pathEffect = DashPathEffect(floatArrayOf(mDashWidth.toFloat(), mDashGap.toFloat()), mDashWidth.toFloat()) }} mPointPaint = Paint()mPointPaint?.apply { isAntiAlias = true isDither = true color = mPointInnerColor style = Paint.Style.FILL} } override fun onDraw(canvas: Canvas) {super.onDraw(canvas)drawTimeline(canvas) } private fun drawTimeline(canvas: Canvas) {drawBetweenLine(canvas)drawFirstPoint(canvas)drawLastIcon(canvas) } private fun drawFirstPoint(canvas: Canvas) {val top = topmFirstX = paddingLeft + mLineMarginLeft + max(mPointOutSize, mPointInnerSize)mFirstY = top + paddingTop + mPointMarginTop + max(mPointOutSize, mPointInnerSize) //画圆外环mPointPaint?.color = mPointOutColorcanvas.drawCircle(mFirstX.toFloat(), mFirstY.toFloat(), mPointOutSize.toFloat(), mPointPaint)//画圆内环mPointPaint?.color = mPointInnerColorcanvas.drawCircle(mFirstX.toFloat(), mFirstY.toFloat(), mPointInnerSize.toFloat(), mPointPaint) } private fun drawLastIcon(canvas: Canvas) {/*if (child != null) { int top = child.getTop(); mLastX = mLineMarginLeft; mLastY = top + child.getPaddingTop() + mLineMarginTop; //画图 canvas.drawBitmap(mIcon, mLastX - (mIcon.getWidth() >> 1), mLastY, null);}*/val top = topmLastX = mLineMarginLeft + paddingLeftmLastY = top + paddingTop + mLineMarginTop //画图if (mIcon != null) { canvas.drawBitmap(mIcon, mLastX - (mIcon!!.width shr 1).toFloat(), height - mIcon!!.height.toFloat(), null)} } private fun drawBetweenLine(canvas: Canvas) {val top = topmFirstX = paddingLeft + mLineMarginLeft + max(mPointOutSize, mPointInnerSize)mFirstY = top + paddingTop + mLineMarginTopmLastX = paddingLeft + mLineMarginLeft + max(mPointOutSize, mPointInnerSize)mLastY = if(!mInterrupt) {top + paddingTop + mLineMarginTop + height} else mPointMarginTop //从开始的点到最后的图标之间，画一条线canvas.drawLine(mFirstX.toFloat(), mFirstY.toFloat(), mLastX.toFloat(), mLastY.toFloat(), mLinePaint)//画圆//val y = top + paddingTop + mLineMarginTop + mPointInnerSize//canvas.drawCircle(mFirstX, y, mPointSize, mPointPaint); } override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {super.onMeasure(widthMeasureSpec, heightMeasureSpec)val mode = MeasureSpec.getMode(widthMeasureSpec)var measuredWidth = MeasureSpec.getSize(widthMeasureSpec)val measuredHeight = MeasureSpec.getSize(heightMeasureSpec)if (mode == MeasureSpec.AT_MOST) { measuredWidth = paddingLeft + mLineMarginLeft + max(mPointOutSize, mPointInnerSize) * 2}setMeasuredDimension(measuredWidth, measuredHeight) }}

布局中可以直接引用，如下：

<com.example.demo1224.TimelineLayoutandroid:layout_width='wrap_content'android:layout_height='match_parent'app:line_margin_left='25dp'app:line_margin_top='0dp'app:point_margin_top='10dp'app:point_inner_color='#377CFF'app:point_out_color='#FFE8F0FF'app:point_out_size='8dp'app:point_inner_size='4dp'app:dash_width='8dp'app:dash_gap='2dp'app:line_color='#C9DCFF'android:orientation='vertical'android:background='@android:color/white'> </com.example.demo1224.TimelineLayout>

也可以在代码里面动态设置相关属性（相关属性注释，在自定义属性时有说明）：

timelineLayout.setPointMarginTop(10) timelineLayout.setLineMarginTop(10) timelineLayout.setPointMarginTop(40) timelineLayout.setInterrupt(true)

仅供大家参考！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。