记账APP：小哈记账4——记账首页页面的制作（1）-Toy模板网

这篇具有很好参考价值的文章主要介绍了记账APP：小哈记账4——记账首页页面的制作（1）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目介绍：

小哈记账是一款用于记账APP，基于Android Studio开发工具，采用Java语言进行开发，同时使用litepal和阿里云数据库进行数据的增删查改，以图标的形式在App的界面上显示。App可以清晰显示收支情况，并以图表的形式展示每月收支情况；同时可以记录消费用途，项目能够精确到每一个款项的收入支出时间、结余并且可以设置每月的预算。超出预算提醒，并且有每周，每月及每年的账单统计，较为清晰明确帮助用户分析自己当前的支出和收入。同时拥有用户登录、注册、修改头像等功能。

本项目中使用到的技术：LitePal数据库，阿里云RDS数据库，MPAndroidChart图表库，部分自定义控件等。

支持Android5.0以上版本。

本文将介绍小哈记账的首页页面制作。

效果图：

记账APP：小哈记账4——记账首页页面的制作（1）,移动应用开发（安卓）,android,java

源代码：

首先，让我们介绍一下首页页面的模块组成。页面最顶部是一个卡片，其中展示了当前月份以及本月的收入、支出和结余情况。接下来，我们可以看到一个本月支出预算的模块，其中展示了当前支出的金额以及占总预算的百分比。第三部分是本月收支趋势图，其中展示了当前月份每日的收入和支出情况。最后，我们还可以看到今日、本周和本年的收入和支出情况，这一部分的信息也非常有用。

顶部卡片的制作（本月收支、结余）

第一步：本月统计样式的编写main.xml

<!--本月统计-->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="140sp"
    android:layout_marginLeft="15sp"
    android:layout_marginTop="12sp"
    android:layout_marginRight="15sp"
    android:background="@drawable/acc_myacc"
    android:orientation="vertical">

    <TextView
        android:id="@+id/main_month"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="25sp"
        android:layout_marginTop="10sp"
        android:text="20xx年x月"
        android:textColor="@color/white"
        android:textSize="16sp"
        tools:ignore="HardcodedText" />
    <!--总支出-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="25sp"
        android:layout_marginTop="3sp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="总支出"
            android:textColor="@color/white"
            android:textSize="12sp"
            tools:ignore="HardcodedText" />

        <TextView
            android:id="@+id/main_zc_money"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0.00"
            android:textColor="@color/white"
            android:textSize="24sp"
            tools:ignore="HardcodedText" />
    </LinearLayout>

    <!--总收入，结余-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25sp"
        android:layout_marginTop="10sp"
        android:layout_marginRight="25sp"
        android:orientation="horizontal"
        tools:ignore="DisableBaselineAlignment">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="总收入"
                android:textColor="@color/white"
                android:textSize="12sp"
                tools:ignore="HardcodedText" />

            <TextView
                android:id="@+id/main_sr_money"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0.00"
                android:textColor="@color/white"
                android:textSize="20sp"
                tools:ignore="HardcodedText" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="40sp"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="结余"
                android:textColor="@color/white"
                android:textSize="12sp"
                tools:ignore="HardcodedText" />

            <TextView
                android:id="@+id/main_jy_money"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0.00"
                android:textColor="@color/white"
                android:textSize="20sp"
                tools:ignore="HardcodedText" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

背景图片为Adobe Illustrator制作。其余部分为LinearLayout和TextView组成，比较简单。

第二步：功能实现，编写MainActivity.java文件

该部分比较简单，从数据库获取数据，求和赋值给TextView即可。

public int year = MyUtils.initYear();
public int month = MyUtils.initMonth();
public int day = MyUtils.initDay();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    context = this;
    mActivity = new WeakReference<Activity>(this);

    initView();//初始化控件
    main_month.setText(year+"年"+month+"月");//为卡片的当前月份赋值
}

@Override
protected void onStart() {
    super.onStart();
    if(is_add || is_delete){
        progressBarLayout.setVisibility(View.VISIBLE);
        main_layout.setVisibility(View.GONE);
        Message msg = new Message();
        sum_ThisMonth(month);//更新数据
        setThisDate();//添加当前数据
        handlerProgress.sendEmptyMessageDelayed(1,2000);
    }
}
/**
    * 求出数据和
    * @param mmonth 本月月份
    */
private void sum_ThisMonth(int mmonth){
    zc_week_money = 0;
    zc_day_money = 0;
    zc_year_money = 0;
    sr_week_money = 0;
    sr_day_money = 0;
    sr_year_money = 0;
    used_money = 0;
    sr_money = 0;
    jy_money = 0;

    lineChartMoney_zc.clear();
    lineChartMoney_zc = new ArrayList<Double>(Collections.<Double>nCopies(31, 0.0));
    lineChartMoney_sr.clear();
    lineChartMoney_sr = new ArrayList<Double>(Collections.<Double>nCopies(31, 0.0));

    List<AccDetails> accDetails = LitePal.where("user_id = ?", String.valueOf(LoginActivity.mid))
            .find(AccDetails.class);
    for(AccDetails accDetails1 : accDetails){
        String[] date = accDetails1.getDet_date().split("-");
        /*获取本年收支*/
        if(Integer.valueOf(date[0]) == year && accDetails1.getDet_type_int() == 0){
            if(MyUtils.getTypeInt(accDetails1.getDet_type()) != -1){
                zc_year_money += accDetails1.getDet_money();
                /*获取本月支出*/
                if(Integer.valueOf(date[1]) == mmonth){
                    used_money += accDetails1.getDet_money();
                    lineChartMoney_zc.set(Integer.valueOf(date[2])-1, accDetails1.getDet_money()+lineChartMoney_zc.get(Integer.valueOf(date[2])-1));
                    if(Integer.valueOf(date[2]) == day){
                        zc_day_money += accDetails1.getDet_money();
                    }
                }
                /*获取本周支出*/
                for(int i = 0; i<7;i++){
                    if(String.valueOf(Integer.valueOf(date[1])+"-"+Integer.valueOf(date[2])).equals(MyUtils.weekDay.get(i))){
                        zc_week_money += accDetails1.getDet_money();
                    }
                }
            }
        } else if(Integer.valueOf(date[0]) == year && accDetails1.getDet_type_int() == 1){
            if(MyUtils.getTypeIncomeInt(accDetails1.getDet_type()) != -1){
                sr_year_money += accDetails1.getDet_money();
                /*获取本月收入*/
                if(Integer.valueOf(date[1]) == mmonth){
                    sr_money += accDetails1.getDet_money();
                    lineChartMoney_sr.set(Integer.valueOf(date[2])-1, accDetails1.getDet_money()+lineChartMoney_sr.get(Integer.valueOf(date[2])-1));
                    if(Integer.valueOf(date[2]) == day){
                        sr_day_money += accDetails1.getDet_money();
                    }
                }
                /*获取本周收入*/
                for(int i = 0; i<7;i++){
                    if(String.valueOf(Integer.valueOf(date[1])+"-"+Integer.valueOf(date[2])).equals(MyUtils.weekDay.get(i))){
                        sr_week_money += accDetails1.getDet_money();
                    }
                }
            }
        }
    }
    jy_money = sr_money - used_money;//本月结余
    if(ys_money != -1){

        used_per = (int) Math.round(used_money / ys_money*100);//四舍五入取整
        if(ys_money > used_money){
            ky_money = ys_money - used_money;
        } else {
            ky_money = used_money - ys_money;
        }
    }
    if(used_money == 0){
        ys_used_text.setText("已用 0.00");
        main_zc_money.setText("0.00");
    } else {
        ys_used_text.setText("已用 "+df.format(used_money));
        main_zc_money.setText(df.format(used_money));
    }
    if(sr_money == 0){
        main_sr_money.setText("0.00");
    } else {
        main_sr_money.setText(df.format(sr_money));
    }
    if(jy_money == 0){
        main_jy_money.setText("0.00");
    } else {
        main_jy_money.setText(df.format(jy_money));
    }
    if(ys_money != -1){
        ys_text.setText("总支出预算 "+df.format(ys_money));
        ys_used_per.setText(used_per+"%");
        if(ky_money == 0){
            ys_ky_text.setText("可用 0.00");
        } else {
            if(used_per >= 80 && used_per <= 100){
                ys_ky_text.setText("可用 "+df.format(ky_money));
                ys_ky_text.setTextColor(Color.parseColor("#e8b004"));
                ys_used_per.setTextColor(Color.parseColor("#e8b004"));
            } else if(used_per > 100){
                ys_ky_text.setText("已超出预算 "+df.format(ky_money));
                ys_ky_text.setTextColor(Color.parseColor("#ee3f4d"));
                ys_used_per.setTextColor(Color.parseColor("#ee3f4d"));
            } else {
                ys_ky_text.setText("可用 "+df.format(ky_money));
                ys_ky_text.setTextColor(Color.parseColor("#666666"));
                ys_used_per.setTextColor(Color.parseColor("#666666"));
            }
        }
    }

}

预算功能的实现

首先需要自定义一个进度条控件。

自定义进度条java文件：

package com.example.xiaohaaccounting.myView;

import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.DecelerateInterpolator;

import com.example.xiaohaaccounting.R;


public class CircleProgressBar extends View {
   private Context mContext;
   private Paint mPaint;
   private int mProgress = 0;
   private static int MAX_PROGRESS = 100;
   /**
    * 弧度
    */
   private int mAngle;
   /**
    * 中间的文字
    */
   private String mText;
   /**
    * 外圆颜色
    */
   private int outRoundColor;
   /**
    * 内圆的颜色
    */
   private int inRoundColor;
   /**
    * 线的宽度
    */
   private int roundWidth;
   private int style;
   /**
    * 字体颜色
    */
   private int textColor;
   /**
    * 字体大小
    */
   private float textSize;
   /**
    * 字体是否加粗
    */
   private boolean isBold;

   /**
    * 进度条颜色
    */
   private int progressBarColor;

   public CircleProgressBar(Context context) {
      this(context, null);
   }

   public CircleProgressBar(Context context, AttributeSet attrs) {
      this(context, attrs, 0);
   }

   public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      mContext = context;
      init(attrs);
   }

   @TargetApi(21)
   public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
      super(context, attrs, defStyleAttr, defStyleRes);
      mContext = context;
      init(attrs);
   }

   /**
    * 解析自定义属性
    *
    * @param attrs
    */
   public void init(AttributeSet attrs) {
      mPaint = new Paint();
      TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);
      outRoundColor = typedArray.getColor(R.styleable.CircleProgressBar_outCircleColor, getResources().getColor(R.color.grey_e));
      inRoundColor = typedArray.getColor(R.styleable.CircleProgressBar_inCircleColor, getResources().getColor(R.color.white));
      progressBarColor = typedArray.getColor(R.styleable.CircleProgressBar_progressColor, getResources().getColor(R.color.xiaoha));
      isBold = typedArray.getBoolean(R.styleable.CircleProgressBar_textBold, false);
      textColor = typedArray.getColor(R.styleable.CircleProgressBar_textColor, Color.BLACK);
      roundWidth = typedArray.getDimensionPixelOffset(R.styleable.CircleProgressBar_lineWidth, 20);
      typedArray.recycle();
   }

   @Override
   protected void onDraw(Canvas canvas) {
      /**
       * 画外圆
       */
      super.onDraw(canvas);
      int center = getWidth() / 2;        //圆心
      int radius = (center - roundWidth / 2);  //半径
      mPaint.setColor(outRoundColor);      //外圆颜色
      mPaint.setStrokeWidth(roundWidth);     //线的宽度
      mPaint.setStyle(Paint.Style.STROKE);    //空心圆
      mPaint.setAntiAlias(true);        //消除锯齿
      canvas.drawCircle(center, center, radius, mPaint);
      //内圆
      mPaint.setColor(inRoundColor);
      radius = radius - roundWidth;
      canvas.drawCircle(center, center, radius, mPaint);

      //画进度是一个弧线
      mPaint.setColor(progressBarColor);
      RectF rectF = new RectF(center - radius, center - radius, center + radius, center + radius);//圆弧范围的外接矩形
      canvas.drawArc(rectF, -90, mAngle, false, mPaint);
      canvas.save(); //平移画布之前保存之前画的

      //画进度终点的小球,旋转画布的方式实现
      mPaint.setStyle(Paint.Style.FILL);
      //将画布坐标原点移动至圆心
      canvas.translate(center, center);
      //旋转和进度相同的角度，因为进度是从-90度开始的所以-90度
      canvas.rotate(mAngle - 90);
      //同理从圆心出发直接将原点平移至要画小球的位置
      canvas.translate(radius, 0);
      canvas.drawCircle(0, 0, roundWidth, mPaint);
      //画完之后恢复画布坐标
      canvas.restore();

      //画文字将坐标平移至圆心
      canvas.translate(center, center);
      mPaint.setStrokeWidth(0);
      mPaint.setColor(textColor);
      if (isBold) {
         //字体加粗
         mPaint.setTypeface(Typeface.DEFAULT_BOLD);
      }
      if (TextUtils.isEmpty(mText)) {
         mText = mProgress + "%";
      }
      //动态设置文字长为圆半径，计算字体大小
      float textLength = mText.length();
      textSize = radius / textLength*2;
      mPaint.setTextSize(textSize);
      //将文字画到中间
      float textWidth = mPaint.measureText(mText);
      canvas.drawText(mText, -textWidth / 2, textSize / 2, mPaint);
   }


   public int getmProgress() {
      return mProgress;
   }

   /**
    * 设置进度
    *
    * @return
    */
   public void setmProgress(int p) {
      if (p > MAX_PROGRESS) {
         mProgress = MAX_PROGRESS;
         mAngle = 360;
      } else {
         mProgress = p;
         mAngle = 360 * p / MAX_PROGRESS;
      }
   }


   public String getmText() {
      return mText;
   }

   /**
    * 设置文本
    *
    * @param mText
    */
   public void setmText(String mText) {
      this.mText = mText;
   }

   /**
    * 设置带动画的进度
    * @param p
    */
   public void setAnimProgress(int p) {
      if (p > MAX_PROGRESS) {
         mProgress = MAX_PROGRESS;
      } else {
         mProgress = p;
      }
      //设置属性动画
      ValueAnimator valueAnimator = new ValueAnimator().ofInt(0, p);
      //动画从快到慢
      valueAnimator.setInterpolator(new DecelerateInterpolator());
      valueAnimator.setDuration(1200);
      //监听值的变化
      valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
         @Override
         public void onAnimationUpdate(ValueAnimator animation) {
            int currentV = (Integer) animation.getAnimatedValue();
            Log.e("fwc", "current" + currentV);
            mAngle = 360 * currentV / MAX_PROGRESS;
            mText = currentV + "%";
            invalidate();
         }
      });
      valueAnimator.start();
   }
}

arrts.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleProgressBar">
        <attr name="outCircleColor" format="color"></attr>
        <attr name="inCircleColor" format="color"></attr>
        <attr name="progressColor" format="color"></attr>
        <attr name="textColor" format="color"></attr>
        <attr name="textBold" format="boolean"></attr>
        <attr name="lineWidth" format="dimension"></attr>
    </declare-styleable>
</resources>

整体样式xml如下

<!--本月预算-->
<LinearLayout
    android:id="@+id/ys_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15sp"
    android:layout_marginTop="165sp"
    android:layout_marginRight="15sp"
    android:background="@drawable/bg_white_radius_10"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="10sp"
        android:text="本月支出预算"
        android:textColor="@color/grey_3"
        android:textSize="18sp"
        tools:ignore="HardcodedText,RtlSymmetry" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp"
        android:orientation="horizontal">
        <!--支出进度条-->
        <com.example.xiaohaaccounting.myView.CircleProgressBar
            android:id="@+id/progress_bar_ys"
            android:layout_width="50sp"
            android:layout_height="50sp"
            android:layout_centerVertical="true"
            android:layout_marginStart="10sp"
            app:inCircleColor="@color/white"
            app:lineWidth="4sp"
            app:outCircleColor="@color/grey_e"
            app:progressColor="@color/xiaoha"
            app:textBold="true"
            app:textColor="@color/xiaoha" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="50sp"
            android:layout_marginStart="50sp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/ys_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingStart="20sp"
                android:text="未设置预算"
                android:textColor="@color/grey_3"
                android:textSize="16sp"
                tools:ignore="HardcodedText,RtlSymmetry" />

            <TextView
                android:id="@+id/ys_ky_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="2sp"
                android:paddingStart="20sp"
                android:text="点击设置预算"
                android:textColor="@color/grey_6"
                android:textSize="12sp"
                tools:ignore="HardcodedText,RtlSymmetry" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="50sp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="10sp"
            android:orientation="vertical"
            tools:ignore="RelativeOverlap">

            <TextView
                android:id="@+id/ys_used_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:text="已用 "
                android:textColor="@color/grey_3"
                android:textSize="14sp"
                tools:ignore="HardcodedText" />

            <TextView
                android:id="@+id/ys_used_per"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="2sp"
                android:text=""
                android:textColor="@color/grey_6"
                android:textSize="12sp" />
        </RelativeLayout>
    </RelativeLayout>

</LinearLayout>

设置预算功能

/*设置预算*/
ys_layout.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //点击弹出对话框
        final EditDialog editDialog = new EditDialog(MainActivity.this);
        editDialog.setTitle("请输入每月预算");
        editDialog.setYesOnclickListener("确定", new EditDialog.onYesOnclickListener() {
            @Override
            public void onYesClick(String ys) {
                if (TextUtils.isEmpty(ys)) {
                    Toast.makeText(MainActivity.this, "请输入每月预算", Toast.LENGTH_SHORT).show();
                } else if(Double.parseDouble(ys) <= 0){
                    Toast.makeText(MainActivity.this, "预算必须大于0", Toast.LENGTH_SHORT).show();
                } else {
                    Message msg = new Message();
                    ys_text.setText(ys);
                    ys_money = Double.parseDouble(ys);
                    save_User(ys_money);
                    sum_ThisMonth(month);
                    handlerProgress.sendEmptyMessageDelayed(1,0);
                    editDialog.dismiss();
            /*//让软键盘隐藏
            InputMethodManager imm = (InputMethodManager) getActivity().getSystemService(Context.INPUT_METHOD_SERVICE);
            imm.hideSoftInputFromWindow(getView().getApplicationWindowToken(), 0);*/
                }
            }
        });
        editDialog.setNoOnclickListener("取消", new EditDialog.onNoOnclickListener() {
            @Override
            public void onNoClick() {
                editDialog.dismiss();
            }
        });
        editDialog.show();
    }
});

今日、本周、本年模块

本部分也比较简单，和第一部分思路相同，直接上代码

xml代码

<!--收支情况-->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="230sp"
    android:layout_marginLeft="15sp"
    android:layout_marginTop="546sp"
    android:layout_marginRight="15sp"
    android:background="@drawable/bg_white_radius_10"
    android:orientation="vertical">
    <!--今日-->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="68sp"
        android:layout_gravity="center"
        android:layout_marginStart="10sp"
        android:layout_marginTop="5sp">

        <ImageView
            android:layout_width="36sp"
            android:layout_height="36sp"
            android:layout_centerVertical="true"
            android:src="@drawable/main_day"
            tools:ignore="ContentDescription" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="70sp"
            android:layout_marginStart="46sp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:text="今日"
                android:textColor="@color/grey_3"
                android:textSize="16sp"
                tools:ignore="HardcodedText" />

            <TextView
                android:id="@+id/this_day"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:text="20xx年xx月xx日"
                android:textColor="@color/grey_6"
                android:textSize="12sp"
                tools:ignore="HardcodedText" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="70sp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="15sp"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="总收入"
                    android:textColor="@color/grey_6"
                    android:textSize="12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/day_sr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginStart="6sp"
                    android:text="0.00"
                    android:textColor="@color/chahua_red"
                    android:textSize="16sp"
                    tools:ignore="HardcodedText" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6sp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="总支出"
                    android:textColor="@color/grey_6"
                    android:textSize="12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/day_zc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginStart="6sp"
                    android:text="0.00"
                    android:textColor="@color/cui_green"
                    android:textSize="16sp"
                    tools:ignore="HardcodedText" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1sp"
        android:layout_marginLeft="10sp"
        android:layout_marginRight="10sp"
        android:background="@color/grey_9"
        tools:ignore="SmallSp" />
    <!--本周-->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="68sp"
        android:layout_gravity="center"
        android:layout_marginStart="10sp"
        android:layout_marginTop="5sp">

        <ImageView
            android:layout_width="36sp"
            android:layout_height="36sp"
            android:layout_centerVertical="true"
            android:src="@drawable/main_week"
            tools:ignore="ContentDescription" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="70sp"
            android:layout_marginStart="46sp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:text="本周"
                android:textColor="@color/grey_3"
                android:textSize="16sp"
                tools:ignore="HardcodedText" />

            <TextView
                android:id="@+id/this_week"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:text="xx月xx日-xx月xx日"
                android:textColor="@color/grey_6"
                android:textSize="12sp"
                tools:ignore="HardcodedText" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="70sp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="15sp"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="总收入"
                    android:textColor="@color/grey_6"
                    android:textSize="12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/week_sr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginStart="6sp"
                    android:text="0.00"
                    android:textColor="@color/chahua_red"
                    android:textSize="16sp"
                    tools:ignore="HardcodedText" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6sp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="总支出"
                    android:textColor="@color/grey_6"
                    android:textSize="12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/week_zc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginStart="6sp"
                    android:text="0.00"
                    android:textColor="@color/cui_green"
                    android:textSize="16sp"
                    tools:ignore="HardcodedText" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1sp"
        android:layout_marginLeft="10sp"
        android:layout_marginRight="10sp"
        android:background="@color/grey_9"
        tools:ignore="SmallSp" />
    <!--本年-->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="68sp"
        android:layout_gravity="center"
        android:layout_marginStart="10sp"
        android:layout_marginTop="5sp">

        <ImageView
            android:layout_width="36sp"
            android:layout_height="36sp"
            android:layout_centerVertical="true"
            android:src="@drawable/main_year"
            tools:ignore="ContentDescription" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="70sp"
            android:layout_marginStart="46sp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:text="本年"
                android:textColor="@color/grey_3"
                android:textSize="16sp"
                tools:ignore="HardcodedText" />

            <TextView
                android:id="@+id/this_year"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:text="20xx年"
                android:textColor="@color/grey_6"
                android:textSize="12sp"
                tools:ignore="HardcodedText" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="70sp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="15sp"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10sp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="总收入"
                    android:textColor="@color/grey_6"
                    android:textSize="12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/year_sr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="6sp"
                    android:text="0.00"
                    android:textColor="@color/chahua_red"
                    android:textSize="16sp"
                    tools:ignore="HardcodedText,RtlHardcoded,TooManyViews" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6sp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="总支出"
                    android:textColor="@color/grey_6"
                    android:textSize="12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/year_zc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginStart="6sp"
                    android:text="0.00"
                    android:textColor="@color/cui_green"
                    android:textSize="16sp"
                    tools:ignore="HardcodedText" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

java代码同第一部分。

本文介绍了首页的三个模块的代码，下一篇（记账APP：小哈记账5——记账首页页面的制作（2））将介绍首页中的收支趋势图的制作，使用MPAndroidChat技术实现。首页完整代码也将在下一篇文章中给出。文章来源地址https://www.toymoban.com/news/detail-518726.html

到了这里，关于记账APP：小哈记账4——记账首页页面的制作（1）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！