安卓——家庭记账本9
作者：互联网
今天实现记账本的最后一个功能，账单详情页面的展示，点击账单详情之后，会出现如下界面
这个布局由三部分组成，整体布局+下面的条目+表格。
首先来做整体布局，在Layout制作布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/grey_f3f3f3"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<ImageView
android:id="@+id/chart_iv_back"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@mipmap/it_back"
android:layout_marginLeft="10dp"
android:onClick="onClick"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/chart_info"
android:textSize="18sp"
android:textStyle="bold"/>
<ImageView
android:id="@+id/chart_iv_rili"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@mipmap/it_rili"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:onClick="onClick"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/white"
android:padding="10dp"
android:layout_marginTop="20dp">
<TextView
android:id="@+id/chart_tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2022年2月账单"
android:textColor="@color/black"
android:textStyle="bold"
android:textSize="18sp"/>
<TextView
android:id="@+id/chart_tv_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="共1笔支出 ￥25.0"
android:textColor="@color/black"
android:textSize="15sp"/>
<TextView
android:id="@+id/chart_tv_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="共1笔收入 ￥3000.0"
android:textColor="@color/black"
android:textSize="15sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="10dp"
android:gravity="center">
<Button
android:id="@+id/chart_btn_out"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="@string/out"
android:background="@drawable/main_record_bg"
android:textColor="@color/white"
android:textStyle="bold"
android:onClick="onClick"
android:layout_marginRight="10dp"/>
<Button
android:id="@+id/chart_btn_in"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="@string/in"
android:background="@drawable/dialog_btn_bg"
android:textColor="@color/black"
android:textStyle="bold"
android:onClick="onClick"
android:layout_marginLeft="10dp"/>
</LinearLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/chart_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
它主要显示某年某月的账单这一布局。同时这里面有返回和日历两个点击事件。
接下来实现记账条目的布局。
<?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="wrap_content"
android:padding="10dp"
android:background="@color/white">
<ImageView
android:id="@+id/item_chartfrag_iv"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@mipmap/ic_yanjiu_fs"/>
<TextView
android:id="@+id/item_chartfrag_tv_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="烟酒茶"
android:textSize="16sp"
android:layout_toRightOf="@id/item_chartfrag_iv"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textStyle="bold"/>
<TextView
android:id="@+id/item_chartfrag_tv_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25.0%"
android:textSize="16sp"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/item_chartfrag_tv_sum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="￥150.0"
android:textSize="16sp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
这一布局展示账目的种类，钱数多少，以及其所占比。
最后一个布局是表格，布局如下，
<?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="wrap_content">
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/item_chartfrag_chart"
android:layout_width="match_parent"
android:layout_height="300dp" />
<TextView
android:id="@+id/item_chartfrag_top_tv"
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="@string/notdata"
android:textSize="20sp"
android:textStyle="bold"
android:gravity="center"
android:visibility="gone"/>
</RelativeLayout>
表格布局制定完之后，还需要在后台代码中进行完善，定义x和y轴...
首先来完成返回和日历的点击事件，返回点击事件，直接finish()，日历的点击事件在上一篇博客中有详细记录。
加下来完成记账条目的后台代码。对于记账条目在DBManger中定义方法对其完成操作
/*
查询指定年份和月份的收入或支出每一种类型的总钱数
**/
public static List<ChartItemBean> getChartListFromAccounttb(int year,int month,int kind){
List<ChartItemBean> list = new ArrayList<>();
float sumMoneyOneMonth = getSumMoneyOneMonth(year, month, kind);//求出支出或收入总钱数
String sql = "select typename,simageId,sum(money)as total from accounttb where year=? and month=? and kind=?" +
"group by typename order by total desc";
Cursor cursor = db.rawQuery(sql,new String[]{year+"",month+"",kind+""});
while(cursor.moveToNext()){
int simageId = cursor.getInt(cursor.getColumnIndex("simageId"));
String typename = cursor.getString(cursor.getColumnIndex("typename"));
float total = cursor.getFloat(cursor.getColumnIndex("total"));
//计算所占百分比 total/sumMonth
float ratio = FloatUtils.div(total,sumMoneyOneMonth);
ChartItemBean bean = new ChartItemBean(simageId,typename,ratio,total);
list.add(bean);
}
return list;
}
由于需要计算百分比，所以将除法计算包装成一个类
import java.math.BigDecimal;
public class FloatUtils {
/**
* 进行除法运算
* **/
public static float div(float v1,float v2){
float v3 = v1/v2;
BigDecimal b1 = new BigDecimal(v3);
float val = b1.setScale(4,4).floatValue();
return val;
}
//将浮点数转换成百分比显示
public static String ratioToPercent(float val){
float v = val*100;
BigDecimal b1 = new BigDecimal(v);
float v1 = b1.setScale(2,4).floatValue();
String per = v1+"%";
return per;
}
}
设置完这些之后，设置内容显示，同时柱状图的设置也在这里完成。
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
import com.example.bookeep.R;
import com.example.bookeep.adaptor.ChartItemAdapter;
import com.example.bookeep.db.ChartItemBean;
import com.example.bookeep.db.DBManger;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import java.util.ArrayList;
import java.util.List;
/**
* A simple {@link Fragment} subclass.
*/
abstract public class BaseFragment extends Fragment {
ListView chartLv;
public int year;
public int month;
List<ChartItemBean> mDatas;//数据源
private ChartItemAdapter itemAdapter;
BarChart barChart;//柱状图控件
TextView chartTv;//如果没有收支情况，显示的文本
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_income, container, false);
chartLv = view.findViewById(R.id.frag_chart_lv);
//获取Activity传递的数据
Bundle bundle = getArguments();
year = bundle.getInt("year");
month = bundle.getInt("month");
//设置数据源
mDatas = new ArrayList<>();
//设置适配器
itemAdapter = new ChartItemAdapter(getContext(), mDatas);
chartLv.setAdapter(itemAdapter);
//添加头布局
addLVHeaderView();
return view;
}
protected void addLVHeaderView(){
//将布局转换成View对象
View headerView = getLayoutInflater().inflate(R.layout.item_chartfrag_top,null);
//将ew添加到ListView的头布局
chartLv.addHeaderView(headerView);
//查找头布局当中包含的控件
barChart = headerView.findViewById(R.id.item_chartfrag_chart);
chartTv = headerView.findViewById(R.id.item_chartfrag_top_tv);
//设定柱状图不显示描述
barChart.getDescription().setEnabled(false);
//设置柱状图的内边距
barChart.setExtraOffsets(20,20,20,20);
setAxis(year,month);
//设置坐标轴显示的数据
setAxisData(year,month);
}
//设置坐标轴显示的数据
protected abstract void setAxisData(int year, int month);
//设置柱状图坐标轴的显示，方法必须重新
protected void setAxis(int year, final int month){
//设置x轴
XAxis xAxis = barChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//设置X轴显示在下方
xAxis.setDrawGridLines(true);//设置绘制该轴的网格线
//设置x轴标签的个数
xAxis.setLabelCount(31);
xAxis.setTextSize(12f);//x轴标签大小
//设置X轴显示值的格式
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
int val = (int) value;
if (val == 0) {
return month + "-1";
}
if (val == 14) {
return month + "-15";
}
//根据不同月份，显示最后一天
if (month == 2) {
if (val == 27) {
return month + "-28";
}
}else if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (val == 30) {
return month + "-31";
}
} else if (month == 4 || month == 6 || month == 9 || month == 11) {
if (val == 29) {
return month + "-30";
}
}
return "";
}
});
xAxis.setYOffset(10);//设置标签对x轴的偏移量，垂直方向
//y轴在子类的设置
setYAxis(year,month);
}
//设置y轴，高度不统一，在子类实现
protected abstract void setYAxis(int year,int month);
public void setDate(int year,int month){
this.year = year;
this.month = month;
//清空柱状图当中的数据
barChart.clear();
barChart.invalidate();//重新绘制柱状图
setAxis(year,month);
setAxisData(year, month);
}
public void loadData(int year, int month, int kind) {
List<ChartItemBean> list = DBManger.getChartListFromAccounttb(year, month, kind);
mDatas.clear();
mDatas.addAll(list);
itemAdapter.notifyDataSetChanged();
}
}
对于收入和支出，直接继承该类即可
import android.graphics.Color;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import com.example.bookeep.R;
import com.example.bookeep.adaptor.ChartItemAdapter;
import com.example.bookeep.db.BarChartItemBean;
import com.example.bookeep.db.ChartItemBean;
import com.example.bookeep.db.DBManger;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.formatter.IValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;
import com.github.mikephil.charting.utils.ViewPortHandler;
import java.util.ArrayList;
import java.util.List;
/**
* A simple {@link Fragment} subclass.
*/
public class IncomeFragment extends BaseFragment {
int kind = 1;
@Override
public void onResume() {
super.onResume();
loadData(year,month,kind);
}
@Override
protected void setAxisData(int year, int month) {
List<IBarDataSet> sets = new ArrayList<>();
//获取这个月每天的支出总金额
List<BarChartItemBean> list = DBManger.getSumMoneyOneDayInMonth(year,month,kind);
if (list.size()==0) {
barChart.setVisibility(View.GONE);
chartTv.setVisibility(View.VISIBLE);
}else{
barChart.setVisibility(View.VISIBLE);
chartTv.setVisibility(View.GONE);
//设置有多少根柱子
List<BarEntry> barEntries1 = new ArrayList<>();
for (int i = 0; i <31 ; i++) {
//初始化没一根柱子，添加到柱状图中
BarEntry entry = new BarEntry(i,0.0f);
barEntries1.add(entry);
}
for (int i = 0; i <list.size() ; i++) {
BarChartItemBean itemBean = list.get(i);
int day = itemBean.getDay();//获取日期
//根据天数获取x轴的位置
int xIndex = day-1;
BarEntry barEntry = barEntries1.get(xIndex);
barEntry.setY(itemBean.getSummoney());
}
BarDataSet barDataSet1 = new BarDataSet(barEntries1, "");
barDataSet1.setValueTextColor(Color.BLACK); // 值的颜色
barDataSet1.setValueTextSize(8f); // 值的大小
barDataSet1.setColor(Color.parseColor("#006400")); // 柱子的颜色
// 设置柱子上数据显示的格式
barDataSet1.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
// 此处的value默认保存一位小数
if (value==0) {
return "";
}
return value + "";
}
});
sets.add(barDataSet1);
BarData barData = new BarData(sets);
barData.setBarWidth(0.2f); // 设置柱子的宽度
barChart.setData(barData);
}
}
@Override
protected void setYAxis(int year, int month) {
//获取本月收入最高的一天为多少，设为最大值
float maxMoney = DBManger.getMaxMoneyOneDayInMonth(year,month,kind);
float max = (float) Math.ceil(maxMoney);
//设置y轴
YAxis yAxis_right = barChart.getAxisRight();
yAxis_right.setAxisMaximum(max); // 设置y轴的最大值
yAxis_right.setAxisMinimum(0f); // 设置y轴的最小值
yAxis_right.setEnabled(false); // 不显示右边的y轴
YAxis yAxis_left = barChart.getAxisLeft();
yAxis_left.setAxisMaximum(max);
yAxis_left.setAxisMinimum(0f);
yAxis_left.setEnabled(false);
//设置不显示图例
Legend legend = barChart.getLegend();
legend.setEnabled(false);
}
@Override
public void setDate(int year, int month) {
super.setDate(year, month);
loadData(year,month,kind);
}
}
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
import com.example.bookeep.R;
import com.example.bookeep.db.BarChartItemBean;
import com.example.bookeep.db.DBManger;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.formatter.IValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;
import com.github.mikephil.charting.utils.ViewPortHandler;
import java.util.ArrayList;
import java.util.List;
/**
* A simple {@link Fragment} subclass.
*/
public class OutcomeFragment extends BaseFragment {
int kind = 0;
@Override
public void onResume() {
super.onResume();
loadData(year,month,kind);
}
@Override
protected void setAxisData(int year, int month) {
List<IBarDataSet> sets = new ArrayList<>();
//获取这个月每天的支出总金额
List<BarChartItemBean> list = DBManger.getSumMoneyOneDayInMonth(year,month,kind);
if (list.size()==0) {
barChart.setVisibility(View.GONE);
chartTv.setVisibility(View.VISIBLE);
}else{
barChart.setVisibility(View.VISIBLE);
chartTv.setVisibility(View.GONE);
//设置有多少根柱子
List<BarEntry> barEntries1 = new ArrayList<>();
for (int i = 0; i <31 ; i++) {
//初始化没一根柱子，添加到柱状图中
BarEntry entry = new BarEntry(i,0.0f);
barEntries1.add(entry);
}
for (int i = 0; i <list.size() ; i++) {
BarChartItemBean itemBean = list.get(i);
int day = itemBean.getDay();//获取日期
//根据天数获取x轴的位置
int xIndex = day-1;
BarEntry barEntry = barEntries1.get(xIndex);
barEntry.setY(itemBean.getSummoney());
}
BarDataSet barDataSet1 = new BarDataSet(barEntries1, "");
barDataSet1.setValueTextColor(Color.BLACK); // 值的颜色
barDataSet1.setValueTextSize(8f); // 值的大小
barDataSet1.setColor(Color.RED); // 柱子的颜色
// 设置柱子上数据显示的格式
barDataSet1.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
// 此处的value默认保存一位小数
if (value==0) {
return "";
}
return value + "";
}
});
sets.add(barDataSet1);
BarData barData = new BarData(sets);
barData.setBarWidth(0.2f); // 设置柱子的宽度
barChart.setData(barData);
}
}
@Override
protected void setYAxis(int year, int month) {
//获取本月收入最高的一天为多少，设为最大值
float maxMoney = DBManger.getMaxMoneyOneDayInMonth(year,month,kind);
float max = (float) Math.ceil(maxMoney);
//设置y轴
YAxis yAxis_right = barChart.getAxisRight();
yAxis_right.setAxisMaximum(max); // 设置y轴的最大值
yAxis_right.setAxisMinimum(0f); // 设置y轴的最小值
yAxis_right.setEnabled(false); // 不显示右边的y轴
YAxis yAxis_left = barChart.getAxisLeft();
yAxis_left.setAxisMaximum(max);
yAxis_left.setAxisMinimum(0f);
yAxis_left.setEnabled(false);
//设置不显示图例
Legend legend = barChart.getLegend();
legend.setEnabled(false);
}
@Override
public void setDate(int year, int month) {
super.setDate(year, month);
loadData(year,month,kind);
}
}
最终将这些代码进行组装，这个小程序就做好了。
明天将对这个程序做一个总结。
标签：github,int,安卓,家庭,month,记账,year,import,com 来源： https://www.cnblogs.com/jzz-111jy/p/15867991.html