【Android】时间轴

• 前言
• 一、主要思路
• 二、代码展示
• • 1.RecyclerView适配器
  • 2.MainActicity
  • 3.布局文件
  • • 1）account_item.xml
    • 2) activity_main.xml
• 总结

提示：代码为Kotlin语言

在写记账本项目的时候，需要完成一个时间轴的效果，在此做下记录。

主要的思路就是一个RecyclerView的应用，把RecyclerView的item分成左右两部分，左边用来显示收入的内容，右部用来显示支出的内容。
效果如下图：

代码如下：

package com.example.timer_shaft_bill

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import de.hdodenhof.circleimageview.CircleImageView

class Account(val type:String, val price:String, val remark:String, val payType:Int)
class AccountAdapter(private val accountLists:ArrayList):RecyclerView.Adapter() {
    inner class IncomeViewHolder(view: View): RecyclerView.ViewHolder(view){
        val type:TextView = view.findViewById(R.id.income_type)
        val num:TextView = view.findViewById(R.id.income_num)
        val remark:TextView = view.findViewById(R.id.income_remark)
        val icon:CircleImageView = view.findViewById(R.id.type_icon)
    }
    inner class ExpendViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val type:TextView = view.findViewById(R.id.expend_type)
        val price:TextView = view.findViewById(R.id.expend_price)
        val remark:TextView = view.findViewById(R.id.expend_remark)
        val icon:CircleImageView = view.findViewById(R.id.type_icon)
    }

    override fun getItemViewType(position: Int): Int {
        val account = accountLists[position]
        return account.payType
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return if (viewType == 1){
            val view =
                LayoutInflater.from(parent.context).inflate(R.layout.account_item, parent, false)
            IncomeViewHolder(view)
        }else{
            val view =
                LayoutInflater.from(parent.context).inflate(R.layout.account_item, parent, false)
            ExpendViewHolder(view)
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val account = accountLists[position]
        when (holder) {
            is ExpendViewHolder -> {
                holder.type.text = account.type
                holder.price.text = account.price
                holder.remark.text = account.remark
                holder.icon.bringToFront()
            }
            is IncomeViewHolder -> {
                holder.type.text = account.type
                holder.num.text = account.price
                holder.remark.text = account.remark
                holder.icon.bringToFront()
            }
            else -> throw IllegalArgumentException()
        }
    }
    override fun getItemCount() = accountLists.size

    fun updateAccounts(lists:ArrayList){
        accountLists.clear()
        accountLists.addAll(lists)
        notifyDataSetChanged()
    }
}

代码如下：

package com.example.timer_shaft_bill

import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import de.hdodenhof.circleimageview.CircleImageView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        window.statusBarColor = Color.TRANSPARENT // 设置状态栏颜色为透明
        initView()
    }
    private fun initView(){
        val accountLists = ArrayList()
        repeat(3){
            accountLists.add(Account("饮食","12","午饭",0))
            accountLists.add(Account("饮食","11","晚饭",0))
            accountLists.add(Account("兼职","50","家教",1))
        }

        // 获取layoutManager
        val layoutManager = LinearLayoutManager(this)
        val recyclerview = findViewById(R.id.recyclerview)
        recyclerview.layoutManager = layoutManager
        // 获取适配器
        val adapter = AccountAdapter(accountLists)
        recyclerview.adapter = adapter

        // 显示在最上层
        val addAccount = findViewById(R.id.add_account)
        addAccount.bringToFront()
    }
}

注意：CoordinatorLayout和CollapsingToolbarLayout是为了图片延伸到状态栏。

总的来说，就是RecyclerView设置不同的View Holder：收入与支出，然后根据ViewHolder的类型放置到左边或右边。