時間軸、流程類時間軸繪製

目錄

• 效果圖
• 思路
• 具體實現
  • 步驟一：ItemView頂部偏移
  • 步驟二：繪製圓和線條
  • 注意：下標的獲取
  • 流程類的繪製
• 總結

效果圖

• 可控制是否繪製在中間
• 控制繪製的線條是否為虛線
• 控制第一條資料圓頂部線條和最後一條資料圓底部線條是否繪製

除了gif圖片展示的屬性，還可以控制圓的大小顏色、圓是否有上和左偏移、線條顏色等屬性

除了通用的時間軸繪製，我們還可以透過改變繪製圓的樣式，改為繪製相應的bitmap影像，來實現展示相關的流程

思路

關於ItemDecoration相關的內容已經寫了不少，這個其實就是小菜一碟。我們需要做的工作有兩點

• ItemDecoration在getItemOffsets()方法內做相應的偏移
• 在onDraw()方法內分別繪製圓、圓頂部線條、圓底部線條
  • 繪製線條，我們需要知道start和end的點座標；
  • 繪製圓，我們需要知道圓心和半徑；

透過下圖，你將能清楚地獲取到這些繪製需要的一些資訊

具體實現

有了以上內容，我們開始繪製

步驟一：ItemView頂部偏移

 override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State,
    ) {
        if (parent.getChildAdapterPosition(view) != 0) {
            //第一個不做頂部偏移
            outRect.top = topItemSpace
        }
        outRect.left = leftItemSpace

    }

步驟二：繪製圓和線條

override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        //獲取到的是當前螢幕可見的個數
        val childCount = parent.childCount

        for (i in 0 until childCount) {
            val view = parent.getChildAt(i)
            //獲取真實的在整體資料中的位置
            val index=parent.getChildAdapterPosition(view)

            //ItemView左側+偏移的矩形框(綠色框部分)
            val spaceRectTop = if (index == 0) view.top else view.top - topItemSpace
            val spaceRectBottom = view.bottom
            val spaceRectLeft = view.left - leftItemSpace
            val spaceRectRight = view.left

            //ItemView左側,不包含偏移的矩形框(紅色框部分)
            val dataRectLeft = view.left - leftItemSpace
            val dataRectTop = view.top
            val dataRectRight = view.left
            val dataRectBottom = view.bottom

            //圓心座標
            var centerX = if(isDrawAtMiddle) (dataRectLeft + dataRectRight)/ 2  else (dataRectLeft + dataRectRight)/ 2 + circleLeftPadding
            val centerY =
                if (isDrawAtMiddle) (dataRectTop + dataRectBottom) / 2 else dataRectTop + circleRadius + circleTopPadding

            //繪製第一條線
            if (index==0){
                if (isDrawFirstItemTopLine){
                    c.drawLine(
                        centerX.toFloat(),
                        spaceRectTop.toFloat(),
                        centerX.toFloat(),
                        (centerY - circleRadius).toFloat(),
                        mLinePaint
                    )
                }
            }else{
                c.drawLine(
                    centerX.toFloat(),
                    spaceRectTop.toFloat(),
                    centerX.toFloat(),
                    (centerY - circleRadius).toFloat(),
                    mLinePaint
                )
            }
            //繪製圓（居中顯示）
            c.drawCircle(centerX.toFloat(), centerY.toFloat(), circleRadius.toFloat(), mCirclePaint)


            //繪製第二條線，注意這裡要用itemCount，因為上面的childCount是當前頁面可見的個數
            parent.adapter?.let {
                if (index!=it.itemCount-1){
                    c.drawLine(
                        centerX.toFloat(),
                        (centerY + circleRadius).toFloat(),
                        centerX.toFloat(),
                        spaceRectBottom.toFloat(),
                        mLinePaint
                    )
                }else{
                    if (isDrawLastItemBottomLine){
                        c.drawLine(
                            centerX.toFloat(),
                            (centerY + circleRadius).toFloat(),
                            centerX.toFloat(),
                            spaceRectBottom.toFloat(),
                            mLinePaint
                        )
                    }
                }
            }
        }
    }

注意：下標的獲取

因為我們需要每個ItemView都繪製，所以需要使用迴圈。但因為val childCount = parent.childCount獲取到的是當前頁面可見的個數，並不是實際的個數，所以我們在判斷是否是首條或者最後一條資料時，那個index要透過val index=parent.getChildAdapterPosition(view)的方式來獲取到真實的下標位置。

流程類的繪製

和繪製通用的圓類似，不過是將Canvas.drawCircle()改為Canvas.drawBitmap()。至於不同的bitmap的載入，我們可以透過傳入集合的資料型別來判斷繪製哪種圖片即可。

override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
	...
	val srcRect = Rect(0, 0, progressBitmap.width, progressBitmap.height)
	val dstRect = Rect(
        centerX - circleRadius,
        centerY - circleRadius,
        centerX + circleRadius,
        centerY + circleRadius
    )
    c.drawBitmap(errorBitmap, srcRect, dstRect, mCirclePaint)
    ...
}

總結

其實主要還是ItemDecoration相關的內容，在onDraw()方法內繪製圓、繪製bitmap和繪製線條，根據上面的圖，知道具體的座標位置，繪製就很輕鬆了，也可以在此基礎上繼續擴充套件，使得我們的時間軸ItemDecoration更加的通用，方便運用到專案中。

如果本文對你有幫助，請別忘記三連，如果有不恰當的地方也請提出來，下篇文章見。