【Android】时间轴

---

前言

提示：代码为Kotlin语言

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

---

一、主要思路

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

二、代码展示

1.RecyclerView适配器

代码如下：

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<Account>):RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    
    
    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<Account>){
    
    
        accountLists.clear()
        accountLists.addAll(lists)
        notifyDataSetChanged()
    }
}

2.MainActicity

代码如下：

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<Account>()
        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<RecyclerView>(R.id.recyclerview)
        recyclerview.layoutManager = layoutManager
        // 获取适配器
        val adapter = AccountAdapter(accountLists)
        recyclerview.adapter = adapter

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

3.布局文件

1）account_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="80dp">

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="@color/purple_500" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/type_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerInParent="true"
        android:src="@drawable/icon_demo"
        android:stateListAnimator="@null"/>

    <LinearLayout
        android:layout_width="120dp"
        android:layout_height="match_parent"
        android:layout_marginVertical="10dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="10dp"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp">
            <TextView
                android:id="@+id/expend_type"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="@color/black"/>
            <TextView
                android:id="@+id/expend_price"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="@color/black"/>
        </LinearLayout>
        <TextView
            android:id="@+id/expend_remark"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:gravity="center_vertical"
            android:textSize="14sp"
            android:textStyle="bold"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="120dp"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_marginStart="40dp"
        android:layout_marginVertical="10dp"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp">
            <TextView
                android:id="@+id/income_type"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="@color/black"/>
            <TextView
                android:id="@+id/income_num"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="@color/black"/>
        </LinearLayout>
        <TextView
            android:id="@+id/income_remark"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:gravity="center_vertical"
            android:textSize="14sp"
            android:textStyle="bold"/>
    </LinearLayout>
</RelativeLayout>

2) activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawerLayout"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/bg"
            android:fitsSystemWindows="true"
            android:contentDescription="@null" />
    </com.google.android.material.appbar.CollapsingToolbarLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginHorizontal="30dp"
            android:orientation="horizontal">
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/keep_account"
                android:textSize="20sp"
                android:textStyle="bold"
                android:textColor="@color/red"/>
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/statement"
                android:textSize="20sp"
                android:textStyle="bold"/>
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="51dp"
            android:background="@color/blue"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginHorizontal="10dp"
            android:layout_marginTop="55dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/account_book"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:contentDescription="@null"
                android:src="@drawable/book" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="4"
                android:gravity="center"
                android:text="@string/add_budget" />

            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:contentDescription="@null"
                android:src="@drawable/calendar" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="100dp"
            android:layout_marginHorizontal="30dp"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:gravity="center"
                    android:text="@string/income_demo"
                    android:textStyle="bold"
                    android:textSize="14sp"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:gravity="center"
                    android:text="@string/num_demo_1"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:textColor="@color/black"/>
            </LinearLayout>

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/blue"/>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:gravity="center"
                    android:text="@string/expend_demo"
                    android:textStyle="bold"
                    android:textSize="14sp"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:gravity="center"
                    android:text="@string/num_demo_2"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:textColor="@color/black"/>
            </LinearLayout>
        </LinearLayout>

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/add_account"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="150dp"
            android:src="@drawable/pencil" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginHorizontal="20dp"
            android:layout_marginTop="200dp" />
    </RelativeLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

---

总结

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