日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Android如何實現時間線效果_Android

更新時間： 2021-11-08 編程語言

1、背景

這天下班前，老板找到小莊：“有個頁面要優化，小需求，你跟進一下。”
小莊：“好的老板！”他看了看時間，忐忑地翻出原型，看到了這樣一個頁面：

需要優化頁面的原型圖：

思索片刻后，小莊熟練地打開了某搜索引擎，沒有找到合適的輪子，小莊知道軟件開發的第一步必須是先進行需求分析和設計，而不是擼起袖子一把梭。于是他決定先分析下功能并整理思路。

2、分析

2.1功能分析

頁面的大致功能：

  • 該頁面是個展示了某種流程的列表，每個列表項有不同的狀態（已完成、進行中、未開始）
  • 在列表的一側有個類似時間線的view，根據每個項的狀態不同，展示不同顏色的圓點和豎線

2.2細節分析

對于其中一個項的時間線view，有哪些細節呢？

首先發現，這個時間線view是由兩個大部分組成的，分別是：圓、線

然后我們自然可以注意到，在一個項的時間線中，又出現了兩種顏色：圓上面的線（以下簡稱為上線）是綠色，圓本身和圓下面的線（以下簡稱為下線）又是紅色

  • 也就是說，這個view不僅要知道自身的顏色，還得知道上一個item是什么顏色的
  • 也就是說，這個view的繪制應該分成三個部分，分別是：上線、圓、下線

這是一個普通的中間的item。然而對于第一個item和最后一個item來說，它們是分別沒有上線和下線的

2.3方案設想

小莊的腦海里迅速地閃過了幾個想法：

第一個想法是根據數據的狀態，在adapter中設置顏色和是否線顯示。

  • 但是這么簡單的圓和線還要找設計師要圖么？這樣豈不是顯得他很菜。那要用Drawable？然而將來要改顏色什么的，也是麻煩，而且要寫好幾個文件。所以這個想法很快就被pass了

第二個想法就是使用自定義view，在每一個item中畫出圓和線，然后用自定義屬性設置顏色。

  • 他馬上寫了個demo嘗試了一下，結果是他自定義view學藝不精，遇到了難以解決的問題[注]，所以只能哭著放棄了

也許是命中注定他將推開一扇大門：旁友，也許你聽說過RecyclerView.ItemDecoration嗎？

注：2000 years later，我發現我根本復現不出來那問題，也許這就是緣分吧

RecyclerView.ItemDecoration簡介

這是一款功能強大的神器，用來給列表添加分隔線只是它最常見又最普通的能力。這里簡單介紹一下，不是本文的主要內容。因為它能實現的效果太多太厲害了，我學不過來(?_?)

實現自定義的一個ItemDecoration，需要繼承它并按需重寫以下兩個方法：

onDraw：用于具體的繪制內容

  • 方法有個參數是parent: RecyclerView，即列表本身，所以我們可以從這里獲取每個子項的內容
  • 要注意的是這個方法里的繪制維度是整個列表，所以我們需要遍歷列表，為每一個子項進行計算位置和繪制

getItemOffsets：用于控制item的四周的偏移量，onDraw中繪制的內容會在這些留白上畫出來

  • 然而這個方法的繪制維度又是針對每一個itemView，所以設置的是每個item的上下左右邊距

3、編碼

小莊現在已經有了基本的思路和知識儲備，他打開IDE準備動手編碼了。不過軟件開發是迭代的過程，即使是這樣的一個小需求，他也打算先從實現一個簡單的版本開始。

3.1第一版

第一個版本，小莊打算只實現畫出圓和線的形狀，沒有狀態也沒有顏色，主要為了驗證自己的想法是否可行，

具體的實現需要做以下幾個內容：

準備定義兩個重要屬性，它們將會參與計算位置和繪制內容

  • radius：用于確定圓的半徑
  • offset：用于表示圓點到item頂部的距離

并且在getItemOffsets中留出繪制整個時間線的空間，即item的左邊距

最重要的工作內容是我們計算并繪制了圓和線（具體的計算可以看代碼）

class FirstVerTimeline : RecyclerView.ItemDecoration() {



    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    var radius = 8f

    var offset = 15



    override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {

        super.onDraw(c, parent, state)

        val count = parent.childCount

        for (i in 0 until count) {

            // 獲取當前的itemView

            val itemView = parent.getChildAt(i)

            // 整個軸線的x坐標都是相同的

            val xPosition = radius



            // 畫上線。第一個item不畫

            if (i != 0) {

                c.drawLine(xPosition, itemView.top.toFloat(),

                            xPosition, itemView.top.toFloat() + offset, paint)

            }

            // 畫下線。最后一個item不畫

            if (i != count - 1) {

                c.drawLine(xPosition, itemView.top  + radius * 2 + offset, 

                            xPosition, itemView.bottom.toFloat(),paint)

            }

            // 畫圓

            c.drawCircle(xPosition, itemView.top + offset + radius, radius, paint)

        }

    }



    override fun getItemOffsets(outRect: Rect, view: View, : RecyclerView, state: RecyclerView.State) {

        super.getItemOffsets(outRect, view, parent, state)

        // 設置item在左邊的偏移量

        outRect.left = radius.toInt() * 2

    }

}

現在我們可以來定義一個虛擬的數據源Record，把這個ItemDecoration應用到一個RecyclerView上康康效果：

rv_timeline1.adapter = RecordAdapter(ArrayList<Record>())// 省略構造假數據

rv_timeline1.addItemDecoration(FirstVerTimeline())

已經初具規模了！只是時間線和文字之間擠了一點，我們只需要加上一些合適的padding，換一下測試數據，看起來就會像真的一樣了！

為了從圖1到達圖2，我們需要做：

定義paddingLeft和paddingRight屬性，用來表示軸線的左右padding

  • 修改getItemOffsets為outRect.left = paddingLeft + paddingRight + radius.toInt() * 2，留出偏移量的位置
  • 修改xPosition的初始值為radius + paddingLeft，改變軸線的x坐標

到這里第一個版本就算完成啦，第二個版本會有什么新功能呢↓↓↓

3.2第二版

小莊打算在第二版里實現狀態的不同顏色。為了實現這個需求，他陷入了深深的沉思：

  • 數據類中肯定不可能耦合顏色這種UI實現，所以需要一個由狀態獲取顏色的辦法
  • 由于畫一個item還需要知道上一個item的顏色，干脆直接把整個數據源列表data傳入ItemDecoration好了
  • 結合以上兩點，我們可以定義一個函數類型的屬性var color: (item: T) -> Int，實現這個屬性就可以讓使用者通過數據狀態設置想要的顏色了

函數類型是kotlin（或者說函數式編程）的特性之一。如果是Java的話可以考慮用模板模式實現，即定義一個抽象方法讓子類去重寫


class SecondVerTimeline<T> : RecyclerView.ItemDecoration() {

    // 其他屬性...

    var data: List<T> = ArrayList()  //-->這里有更新，定義了數據源



    var color: (item: T) -> Int = { _ -> Color.GRAY }  //-->這里有更新，通過這個屬性設置顏色選擇策略



    override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {

        super.onDraw(c, parent, state)

        val count = parent.childCount

        for (i in 0 until count) {

            // ...

            val adapterPosition = parent.getChildAdapterPosition(itemView)  //-->這里有更新，獲取當前項的真正位置

            val item = data[adapterPosition]  //-->這里有更新，獲取當前項的數據源



            // 畫上線。第一個item不畫

            if (adapterPosition != 0) {

                paint.color = color(data[adapterPosition - 1])  //-->這里有更新，設置上線的顏色

                c.drawLine(...)

            }



            paint.color = color(item)  //-->這里有更新，設置圓和下線的顏色

            // 畫下線。最后一個item不畫

            if (adapterPosition != data.size - 1) {//-->這里有更新，改用數據源的大小判斷是否為最后一個item

                c.drawLine(...)

            }

            // 畫圓...

        }

    }

    // getItemOffsets...

}

代碼中可能需要注意的點：

  • 繪制上線前，需要通過data數據源獲取到上一個item，并用color屬性獲得其狀態對應的顏色
  • 繪制圓和下線前，同樣需要改變到這一個item的顏色
  • 用parent.childCount獲取到的子項數量指的是屏幕中可見的部分，必須要用parent.getChildAdapterPosition獲取到該項在列表中的真正位置，才能確定下線要不要畫。否則會出現【當前屏幕上可見的最后一項不是真正的最后一項，但它卻沒有下線，但向下滑動后它又有下線了】的尷尬場景
  • 注意到此時用于判斷是否為最后一個item的方法，從count - 1變為了data.size - 1，用數據源的大小判斷，比count更加準確（原因同上一條）

使用時也需要有一些變化：

  • 把data設置給ItemDecoration
  • 通過color屬性設置顏色策略
val secondVerTimeline = SecondVerTimeline<Record>()

secondVerTimeline.data = records

secondVerTimeline.color = { item ->

    when (item.status) {

        1 -> color1

        2 -> color2

        ...

    }

}

rv_timeline2.addItemDecoration(secondVerTimeline)

然后就可以運行看一下效果了：

哇哦，鵝妹子嚶，這樣就已經實現根據狀態轉變顏色的功能了！第二版的功能也圓滿實現！

4、結語

后來小莊又根據UI一頓修修改改，很快就完成了這個需求~但是小莊是一個有追求的程序員，他開始思考起了這個代碼的擴展性和通用性如何。不想不要緊，一想發現根本沒有鴨！如果產品想要把圓點變成圖片怎么辦？或者產品想要更隨風飛翔自由是方向呢？

于是他想找個時間完善改進一下這個ItemDecoration，最好能應對產品的所有需求！具體升級內容請看下集~

原文鏈接：https://juejin.cn/post/6844904110559330312

欄目分類
最近更新