foreword

提示：代码为Kotlin语言

When writing the bookkeeping project, you need to complete the effect of a timeline, and make a record here.

1. Main ideas

The main idea is an application of RecyclerView, which divides the items of RecyclerView into left and right parts, the left part is used to display the content of income, and the right part is used to display the content of expenditure.
The effect is as follows:
insert image description here

2. Code display

1. RecyclerView adapter

code show as below:

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

code show as below:

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. Layout file

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>

Note: CoordinatorLayout and CollapsingToolbarLayout are for the image to extend to the status bar.

Summarize

In general, RecyclerView sets different View Holders: income and expenditure, and then places them on the left or right according to the type of ViewHolder.

【Android】Timeline