Android使用RecyclerView實(shí)現(xiàn)日期分組以及時(shí)間軸顯示

抽空介紹一下如何使用RecyclerView來實(shí)現(xiàn)分組列表以及時(shí)間軸的顯示，先看下效果圖：


Video_231202152515.gif

作為Android的小伙伴，在需求方面上，難免遇到實(shí)現(xiàn)類似的功能實(shí)現(xiàn)，實(shí)現(xiàn)起來有一定的難度，RecyclerView進(jìn)行分組，和時(shí)間軸的顯示。
重點(diǎn)講下，RecyclerView如何進(jìn)行分組，其實(shí)就是對(duì)數(shù)據(jù)源集合進(jìn)行分組：
BuildListDataUtil.kt

object BuildListDataUtil {

    /**
     * 集合進(jìn)行分組
     */
    fun buildListData(sourceList:MutableList<AppInfo>?): MutableList<AppInfo>{
        val tempData = ArrayList<AppInfo>()
        val appInfo = createEmptyObject(sourceList!![0])
        tempData.add(appInfo)
        tempData.add(sourceList[0])
        var preDate = DateUtils.getTimeStampConvertToDate(sourceList[0]
            .orderInfoApp?.publicFirstTime!!, DateUtils.PARAMETER_ALL_DATE_TYPE)
        for (index in 1 until sourceList.size) {
            val curDate = DateUtils.getTimeStampConvertToDate(sourceList[index]
                .orderInfoApp?.publicFirstTime!!, DateUtils.PARAMETER_ALL_DATE_TYPE)
            //日期一致的話，就添加至集合
            if (TextUtils.equals(preDate, curDate)) {
                tempData.add(sourceList[index])
            } else {
                // 日期不一致，則創(chuàng)建新的對(duì)象并添加到集合中
                val curAppInfo = createEmptyObject(sourceList[index])
                tempData.add(curAppInfo)
                tempData.add(sourceList[index])
                preDate = curDate
            }
        }
        return tempData
    }

    /**
     * 創(chuàng)建空對(duì)象
     */
    private fun createEmptyObject(appInfo: AppInfo): AppInfo {
        var tempInfo = AppInfo()
        var orderInfoApp = OrderInfoApp()
        orderInfoApp.publicFirstTime = appInfo.orderInfoApp?.publicFirstTime!!
        tempInfo.orderInfoApp = orderInfoApp
        return tempInfo
    }
}

我封裝了BuildListDataUtil工具類，主要是對(duì)數(shù)據(jù)源集合邏輯進(jìn)行分組處理，首先根據(jù)集合的索引值拿到第一個(gè)對(duì)象，進(jìn)行創(chuàng)建空的對(duì)象，同時(shí)根據(jù)時(shí)間戳進(jìn)行賦值，并返回空的對(duì)象作為用來展示標(biāo)題布局的日期標(biāo)題，并添加到臨時(shí)的集合中，根據(jù)當(dāng)前的對(duì)象的時(shí)間戳返回當(dāng)前的preDate變量，接下來sourceList進(jìn)行遍歷，遍歷下一個(gè)對(duì)象的時(shí)間戳返回當(dāng)前的curDate 變量，和上一個(gè)preDate變量進(jìn)行對(duì)比，如果日期一致，就添加到同一集合里面，否則就創(chuàng)建空的對(duì)象并添加到集合里面，并且把curDate值賦值給preDate，以此類推。
我打了斷點(diǎn)，如下：


圖片1.png

圖片2.png

接下來就是把集合分好組的tempData變量返回給外部調(diào)用。
重點(diǎn)看下RecycleView的Adapter做了什么。
BuildGroupDateAdapter.kt

class BuildGroupDateAdapter constructor(datas:MutableList<AppInfo>?): Adapter<ViewHolder>() {
    //標(biāo)題
    val ITEM_TITLE_TYPE = 1
    //內(nèi)容
    val ITEM_CONTENT_TYPE = 2
    private var datas:MutableList<AppInfo>? = null
    private lateinit var itemTitleBing :ItemTitleLayoutBinding
    private lateinit var itemContentBinding: ItemContentLayoutBinding

    init {
        this.datas = datas
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
      var view :View
        return when(viewType) {
            ITEM_TITLE_TYPE -> {
                itemTitleBing = ItemTitleLayoutBinding.inflate(LayoutInflater.from(parent.context), parent, false)
                view = itemTitleBing.root
                TitleViewHolder(view)
            }
            else -> {
                itemContentBinding = ItemContentLayoutBinding
                    .inflate(LayoutInflater.from(parent.context), parent, false)
                view = itemContentBinding.root
                ContentViewHolder(view)
            }
        }
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        when(holder) {
            is TitleViewHolder -> {
                val titleDate = getTimeStampConvertToDate(
                    datas
                        ?.get(position)!!.orderInfoApp!!.publicFirstTime,
                    DateUtils.PARAMETER_ALL_DATE_TYPE
                )
                itemTitleBing.tvTitle.text = titleDate
                dealWithTitleTimeLine(position)
            }
            is ContentViewHolder -> {
                itemContentBinding.tvContent.text = datas!![position].name
                dealWithContentTimeLine(position)
            }
        }
    }

    /**
     * 標(biāo)題時(shí)間軸
     */
    private fun dealWithTitleTimeLine(index: Int) {
        when(index) {
            0 -> {
                itemTitleBing.aboveLineTitle.visibility = View.INVISIBLE
                itemTitleBing.belowLineTitle.visibility = View.VISIBLE
            }
            else -> {
                itemTitleBing.aboveLineTitle.visibility = View.VISIBLE
                itemTitleBing.belowLineTitle.visibility = View.VISIBLE
            }
        }
    }

    /**
     * 內(nèi)容時(shí)間軸
     */
    private fun dealWithContentTimeLine(index: Int) {
        when(index) {
            datas!!.size - 1  -> {
                itemContentBinding.timeLineContent.renderBg(R.color.time_line_color, true)
            }
            else -> {
                itemContentBinding.timeLineContent.renderBg(R.color.time_line_color, false)
            }
        }
    }

    override fun getItemCount(): Int {
       return datas!!.size
    }

    override fun getItemViewType(position: Int): Int {
        var id = datas!![position].id
        //id是空的 說明該對(duì)象是用來展示標(biāo)題item布局的
        if(id.isNullOrEmpty()) {
          return ITEM_TITLE_TYPE
        }
        return ITEM_CONTENT_TYPE
    }

    class TitleViewHolder(view: View) : ViewHolder(view)

    class ContentViewHolder(view: View) : ViewHolder(view)
}

上面代碼邏輯不是很復(fù)雜，其實(shí)就是創(chuàng)建了兩個(gè)ViewHolder，一個(gè)是用來展示標(biāo)題的ViewHolder，一個(gè)是來展示內(nèi)容的ViewHolder。
重點(diǎn)看下這個(gè),


圖片3.png

根據(jù)position獲取當(dāng)前對(duì)象的id，id是空的用來展示標(biāo)題item布局的。因?yàn)閯傊v過，


圖片4.png

創(chuàng)建空對(duì)象的時(shí)候，僅僅是把時(shí)間戳賦值給它，并沒有賦值給id,因此id是空的話，是用來展示標(biāo)題的type。
BuildGroupDateActivity.kt 
class BuildGroupDateActivity : AppCompatActivity() {

    lateinit var adapter: BuildGroupDateAdapter
    lateinit var binding: ActivityMainBuildGroupDateBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBuildGroupDateBinding.inflate(layoutInflater)
        setContentView(binding.root)
        adapter = BuildGroupDateAdapter(getDatas())
        binding.baseRecyclerView.layoutManager = LinearLayoutManager(this)
        binding.baseRecyclerView.adapter = adapter
    }

    private fun getDatas() : MutableList<AppInfo> {
        return BuildListDataUtil.buildListData(TestBuildData.datas())
    }
}

運(yùn)行此項(xiàng)目，界面上就可以正常展示RecyclerView日期分組了。
接下來，我們看下時(shí)間軸怎么實(shí)現(xiàn)。
在adapter里面創(chuàng)建了兩個(gè)ViewHolder,每個(gè)ViewHolder創(chuàng)建了item布局，時(shí)間線的顯示其實(shí)就是在布局里面做。
item_title_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        >
        <RelativeLayout
            android:layout_width="30dp"
            android:layout_height="match_parent"
            >
            <View
                android:id="@+id/above_line_title"
                android:layout_width="1dp"
                android:layout_height="18dp"
                android:background="@color/time_line_color"
                android:layout_centerHorizontal="true"
                android:layout_above="@+id/middle_line"
                />
            <View
                android:id="@+id/middle_line"
                android:layout_width="5dp"
                android:layout_height="5dp"
                android:background="@drawable/time_line_round_bg"
                android:layout_centerInParent="true"
                />

            <View
                android:id="@+id/below_line_title"
                android:layout_width="1dp"
                android:layout_height="18dp"
                android:layout_below="@id/middle_line"
                android:layout_centerHorizontal="true"
                android:background="@color/time_line_color" />
        </RelativeLayout>
    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_gravity="center_vertical"
        />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

item_content_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        >
        <RelativeLayout
            android:layout_width="30dp"
            android:layout_height="match_parent"
            >
            <com.xilianke.mainapp_master.view.TimeLineView
                android:id="@+id/time_line_content"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:background="@color/teal_700" />
        </RelativeLayout>
        <TextView
            android:id="@+id/tvContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:layout_gravity="center_vertical"
            />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

在該布局里面需要自定義一個(gè)View，也就是TimeLineView，需要處理時(shí)間線漸變。
TimeLineView.kt

class TimeLineView : View {

    constructor(context: Context) : this(context, null)

    constructor(context: Context, attributeSet: AttributeSet?) :this (context, attributeSet, 0)

    constructor(context: Context, attributeSet: AttributeSet?, def: Int):super(context, attributeSet, def)

    fun renderBg(color: Int,lastItem:Boolean) {
        if (lastItem) {
          val gradient = gradientDrawable(color)
            background = gradient
        } else {
            background = context.resources.getDrawable(color)
        }
        post {
            invalidate()
        }
    }

    private fun gradientDrawable(arg: Int): GradientDrawable {
      val colors = intArrayOf(
//          arg and 0xFFFFFFFF.toInt(),//0%
//          arg and 0x7FFFFFFF,//50%
          arg and 0x33FFFFFF,//80%
          arg and 0x00FFFFFF,//100%
      )
        val gradientDrawable = GradientDrawable()
        gradientDrawable.colors = colors
        gradientDrawable.orientation = GradientDrawable
            .Orientation.TOP_BOTTOM//從上到下漸變
        return gradientDrawable
    }
}
圖片5.png

運(yùn)行此項(xiàng)目，最終的效果就是文章開頭的效果圖。
我把這次案例進(jìn)行總結(jié)，方便后續(xù)可能會(huì)使用到，難免會(huì)使用RecyclerView分組實(shí)現(xiàn)，例如RecyclerView聯(lián)系人分組實(shí)現(xiàn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容