理财通app的设计与实现（三）

一、收入明细界面

  1、界面效果

   2、前期准备

2.1 首先添加 RecyclerView 的依赖 展开 Android 的工程目录结构，在 app 下方，打开 build.gradle 文件，输入依 赖，如下：

implementation 'com.android.support:recyclerview-v7:29.0.3'

   3、收入明细布局界面 activity_in_come_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:background="@drawable/in_detail_bg"
     tools:context=".activity.InComeDetailActivity">
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/recy_view_indetail"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="120dp"
         android:layout_marginLeft="30dp"
         android:layout_marginRight="30dp"
         android:layout_marginBottom="40dp"/>
</LinearLayout>

   4、收入明细类文件 InComeDetailActivity.java

public class InComeDetailActivity extends AppCompatActivity {
//1 定义对象
     RecyclerView recy_view;
     MyDBHelper mhelper;
     SQLiteDatabase db;
     List<IncomeBean> arr1=new ArrayList();
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_in_come_detail);
         //2 绑定控件
         initView();
         //3 准备数据
         initData();
         //4 设计每一行的子布局
         //5 定义适配器： 数据和子布局关联起来（桥梁的作用）
         IncomeAdapter adapter=new IncomeAdapter(InComeDetailActivity.this,arr1);
         //6 将适配器和布局管理器加载到控件当中
         StaggeredGridLayoutManager st=new StaggeredGridLayoutManager(StaggeredGridLayoutManager.VERTICAL,1);
         recy_view.setLayoutManager(st);
         recy_view.setAdapter(adapter);
     }
     //2 绑定控件----------------代码
     private void initView() {
         recy_view=findViewById(R.id.recy_view_indetail);
         mhelper=new MyDBHelper(InComeDetailActivity.this);
         db=mhelper.getWritableDatabase();
     }
     //3 准备数据----------------代码
     private void initData() {
         //从数据库查询所有的新增收入信息,取出数据
         Cursor cursor=db.rawQuery("select * from in_come",null);
         while(cursor.moveToNext()){
             int myid=cursor.getInt(cursor.getColumnIndex("id"));
             double mymoney=cursor.getDouble(cursor.getColumnIndex("inmoney"));
             String mytime=cursor.getString(cursor.getColumnIndex("intime"));
             String mytype=cursor.getString(cursor.getColumnIndex("intype"));
             String mypayer=cursor.getString(cursor.getColumnIndex("inpayer"));
             String myremark=cursor.getString(cursor.getColumnIndex("inremark"));
             IncomeBean incomeBean=new IncomeBean( myid,mymoney,mytime,mytype,mypayer,myremark);
             arr1.add(incomeBean);
         }
     }
}

  5、javabean 类文件：IncomeBean.java

        选择工程的包名——右击——new——package——在目前出现的内容后面追加输入 bean——单击 ok 按钮，便可生成 bean 文件夹。如下图：

         选择 bean 文件夹，右击——new——java class——输入类名： IncomeBean——单击 ok 按钮。打卡 javabean 文件夹，输入代码如下：

package com.example.zsfinancialmanage.bean;
public class IncomeBean {
     private int id;
     private double money;
     private String time;
     private String type;
     private String payer;
     private String remark;
     public IncomeBean(int id, double money, String time, String type, String payer, String remark) {
         this.id = id;
         this.money = money;
         this.time = time;
         this.type = type;
         this.payer = payer;
         this.remark = remark;
     }
     public int getId() {
         return id;
     }
     public void setId(int id) {
         this.id = id;
     }
     public double getMoney() {
         return money;
     }
     public void setMoney(double money) {
         this.money = money;
     }
     public String getTime() {
         return time;
     }
     public void setTime(String time) {
         this.time = time;
     }
     public String getType() {
         return type;
     }
     public void setType(String type) {
         this.type = type;
     }
     public String getPayer() {
         return payer;
     }
     public void setPayer(String payer) {
         this.payer = payer;
     }
     public String getRemark() {
         return remark;
     }
     public void setRemark(String remark) {
         this.remark = remark;
     }
}

  6、收入明细界面每一行的 item 子布局 recy_item_in.xml

        选择 layout——new——Layout Resource File——输入名称 recy_item_in——单击 ok 按钮。

 子布局界面布局如下：

 

 子界面代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:orientation="horizontal"
     android:layout_height="wrap_content">
<ImageView
     android:layout_width="50dp"
     android:layout_height="50dp"
     android:src="@drawable/incomeicon"/>
     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:layout_weight="1"
         android:padding="5dp">
         <TextView
             android:id="@+id/item_payer_in"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="付款方"/>
         <TextView
             android:id="@+id/item_type_in"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="类型"/>
         <TextView
             android:id="@+id/item_time_in"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="时间"/>
         <TextView
             android:id="@+id/item_remark_in"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="备注"/>
     </LinearLayout>
     <TextView
         android:id="@+id/item_money_in"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="金额"
         android:textSize="25sp"
         android:textColor="#ff0000"
         android:textStyle="bold"
         android:layout_gravity="center_vertical"/>
</LinearLayout>

  6、适配器 IncomeAdapter.java

public class IncomeAdapter extends 
RecyclerView.Adapter<IncomeAdapter.ViewHolder> {
Context mcontext;
List<IncomeBean> arr2;
     public IncomeAdapter(Context mcontext, List<IncomeBean> arr2) {
         this.mcontext = mcontext;
         this.arr2 = arr2;
     }
     //用于创建 ViewHolder 实例
     @Override
     public IncomeAdapter.ViewHolder onCreateViewHolder( ViewGroup parent, int viewType) {
         View view= LayoutInflater.from(mcontext).inflate(R.layout.recy_item_in,parent,false);
         ViewHolder mholder=new ViewHolder(view);
         return mholder;
     }
     //对 RecyclerView 子项进行赋值的
     @Override
     public void onBindViewHolder(IncomeAdapter.ViewHolder mholder, int position) {
         IncomeBean incomeBean=arr2.get(position);
         mholder.item_payer.setText("收款-来自"+incomeBean.getPayer());
         mholder.item_type.setText(incomeBean.getType());
         mholder.item_time.setText(incomeBean.getTime());
         mholder.item_remark.setText(incomeBean.getRemark());
         mholder.item_money.setText("+"+incomeBean.getMoney());
     }
     //recyclerView 一共有多少子项
     @Override
     public int getItemCount() {
         return arr2.size();
     }
     public class ViewHolder extends RecyclerView.ViewHolder{
         TextView item_payer,item_type,item_time,item_remark,item_money;
         public ViewHolder( View itemView) {
             super(itemView);
             item_payer=itemView.findViewById(R.id.item_payer_in);
             item_type=itemView.findViewById(R.id.item_type_in);
             item_time=itemView.findViewById(R.id.item_time_in);
             item_remark=itemView.findViewById(R.id.item_remark_in);
             item_money=itemView.findViewById(R.id.item_money_in);
         }
     }
}