自定義控制元件-時間軸

由于專案中有需求，就簡單的封裝一個，先記錄一下，有時間上傳到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:id="@+id/tl_02"
    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 = context
        mLinePaint = 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 = top
        mFirstX = paddingLeft + mLineMarginLeft + max(mPointOutSize, mPointInnerSize)
        mFirstY = top + paddingTop + mPointMarginTop + max(mPointOutSize, mPointInnerSize)

        //畫圓外環
        mPointPaint?.color = mPointOutColor
        canvas.drawCircle(mFirstX.toFloat(), mFirstY.toFloat(), mPointOutSize.toFloat(), mPointPaint)
        //畫圓內環
        mPointPaint?.color = mPointInnerColor
        canvas.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 = top
        mLastX = mLineMarginLeft + paddingLeft
        mLastY = 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 = top
        mFirstX = paddingLeft + mLineMarginLeft + max(mPointOutSize, mPointInnerSize)
        mFirstY = top + paddingTop + mLineMarginTop
        mLastX = 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.TimelineLayout
                android: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)

僅供大家參考！