【鸿蒙】鸿蒙App应用-《记账软件》记账模块
1.主界面选项卡搭建
从【鸿蒙】鸿蒙App应用-《记账软件》登录，注册，找回密码功能 登录成功之后，进入主界面。
这里我们先搭建主界面的布局结构，首先完成五个模块的选项卡的界面显示。
在layout文件夹下新建xml布局文件，使用垂直的现形布局摆放，分为三部分，头部标题，内容部分，选项卡部分。
2.给选项卡添加事件监听
在src文件的包中创建AbilitySlice类继承至BaseAbilitySlice基类。并定义好选项卡的切换图片资源。
public class MainAbilitySlice extends BaseAbilitySlice {
//选项卡默认图标
private int[] imgs_normal = {
ResourceTable.Media_bottom_detail_normal,
ResourceTable.Media_bottom_chart_normal,
ResourceTable.Media_bottom_add_normal,
ResourceTable.Media_bottom_find_normal,
ResourceTable.Media_bottom_me_normal
};
//选项卡选中图标
private int[] imgs_pressed = {
ResourceTable.Media_bottom_detail_pressed,
ResourceTable.Media_bottom_chart_pressed,
ResourceTable.Media_bottom_add_normal,
ResourceTable.Media_bottom_find_pressed,
ResourceTable.Media_bottom_me_pressed
};
//获得选项卡对应的布局id
private int[] dl_ids = {
ResourceTable.Id_dl1,
ResourceTable.Id_dl2,
ResourceTable.Id_dl3,
ResourceTable.Id_dl4,
ResourceTable.Id_dl5
};
//获得选项卡的图片组件id
private int[] image_ids = {
ResourceTable.Id_image1,
ResourceTable.Id_image2,
ResourceTable.Id_image3,
ResourceTable.Id_image4,
ResourceTable.Id_image5
};
//初始化选项卡布局数组
private DirectionalLayout[] dls = new DirectionalLayout[imgs_normal.length];
//初始化选项卡图片组件数组
private Image[] images = new Image[imgs_normal.length];
//初始化选项卡的选中状态，默认第一个模块被选中
private boolean[] booleans = {true, false, false, false, false};
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
//加载布局
this.setUIContent(ResourceTable.Layout_ability_main);
//初始化选项卡
initTabHost();
}
/**
* 初始化主页面
*/
private void initTabHost() {
tt= (Text) this.findComponentById(ResourceTable.Id_tt);
for (int i = 0; i < imgs_normal.length; i++) {
dls[i] = (DirectionalLayout) this.findComponentById(dl_ids[i]);
images[i] = (Image) this.findComponentById(image_ids[i]);
//给所有选项卡添加点击事件
dls[i].setClickedListener(listener);
}
for (int i = 0; i < dlids.length; i++) {
layouts[i] = (DirectionalLayout) this.findComponentById(dlids[i]);
}
//根据当前选项卡的选中状态，切换选项卡的图片状态
showState();
}
/**
* 改变当前页面选中状态
*/
public void showState() {
for (int i = 0; i < imgs_normal.length; i++) {
if (booleans[i])
images[i].setPixelMap(imgs_pressed[i]);
else
images[i].setPixelMap(imgs_normal[i]);
}
}
//给选项卡添加事件监听
private Component.ClickedListener listener = new Component.ClickedListener() {
@Override
public void onClick(Component component) {
for (int i = 0; i < imgs_normal.length; i++) {
//当第三个选项卡被点击时，跳转至记账页面
if (component.getId() == dl_ids[2]) {
//跳转至记账的页面
present(new AddAccountAbilitySlice(), new Intent());
break;
}
if (component.getId() == dl_ids[i]) {
booleans[i] = true;
} else
booleans[i] = false;
}
showState();
//showAbility();
}
};
}3.记账页面布局搭建
当用户点击"记账"选项卡的时候，进入用户记账。我们先要搭建记账界面的布局。在layout文件夹下新建xml文件。
4.创建记账功能界面
在slice文件下新建AbilitySlice类继承至BaseAbilitySlice类，加载所有可选中项的图片资源，以及分类名称，虚拟键盘对应的组件对象。
public class AddAccountAbilitySlice extends BaseAbilitySlice {
//定义文本组件，控制切换收入和支出的类型，以及关闭记账页面的功能
private Text tv_add_type, tv_add_colse;
//用于控制当前类型是收入还是支出
private boolean bool = false;
//获得收入和支出的表格布局
private TableLayout tl1, tl2;
private DirectionalLayout dl_add;
//初始化支出和收入的所有分类的默认图标
private int[] image_n = {
ResourceTable.Media_category_e_catering_normal,
ResourceTable.Media_category_e_shopping_normal,
ResourceTable.Media_category_e_commodity_normal,
ResourceTable.Media_category_e_traffic_normal,
ResourceTable.Media_category_e_vegetable_normal,
ResourceTable.Media_category_e_fruite_normal,
ResourceTable.Media_category_e_snack_normal,
ResourceTable.Media_category_e_sport_normal,
ResourceTable.Media_category_e_entertainmente_normal,
ResourceTable.Media_category_e_communicate_normal,
ResourceTable.Media_category_e_dress_normal,
ResourceTable.Media_category_e_beauty_normal,
ResourceTable.Media_category_i_wage_normal,
ResourceTable.Media_category_i_parttimework_normal,
ResourceTable.Media_category_i_finance_normal,
ResourceTable.Media_category_i_money_normal,
ResourceTable.Media_category_i_other_normal
};
//初始化支出和收入的所有分类的选中图标
private int[] image_p = {
ResourceTable.Media_category_e_catering_selected,
ResourceTable.Media_category_e_shopping_selected,
ResourceTable.Media_category_e_commodity_selected,
ResourceTable.Media_category_e_traffic_selected,
ResourceTable.Media_category_e_vegetable_selected,
ResourceTable.Media_category_e_fruite_selected,
ResourceTable.Media_category_e_snack_selected,
ResourceTable.Media_category_e_sport_selected,
ResourceTable.Media_category_e_entertainmente_selected,
ResourceTable.Media_category_e_communicate_selected,
ResourceTable.Media_category_e_dress_selected,
ResourceTable.Media_category_e_beauty_selected,
ResourceTable.Media_category_i_wage_selected,
ResourceTable.Media_category_i_parttimework_selected,
ResourceTable.Media_category_i_finance_selected,
ResourceTable.Media_category_i_money_selected,
ResourceTable.Media_category_i_other_selected
};
//初始化支出和收入的所有分类的确认图标
private int[] image_s = {
ResourceTable.Media_category_e_catering_s,
ResourceTable.Media_category_e_shopping_s,
ResourceTable.Media_category_e_commodity_s,
ResourceTable.Media_category_e_traffic_s,
ResourceTable.Media_category_e_vegetable_s,
ResourceTable.Media_category_e_fruite_s,
ResourceTable.Media_category_e_snack_s,
ResourceTable.Media_category_e_sport_s,
ResourceTable.Media_category_e_entertainmente_s,
ResourceTable.Media_category_e_communicate_s,
ResourceTable.Media_category_e_dress_s,
ResourceTable.Media_category_e_beauty_s,
ResourceTable.Media_category_i_wage_s,
ResourceTable.Media_category_i_parttimework_s,
ResourceTable.Media_category_i_finance_s,
ResourceTable.Media_category_i_money_s,
ResourceTable.Media_category_i_other_s
};
//初始化支出和收入的所有分类名称
private String[] names = {
"餐饮", "购物", "日用", "交通", "蔬菜",
"水果", "零食", "运动", "娱乐", "通讯",
"服饰", "美容", "工资", "兼职", "理财",
"礼金", "其他"
};
//初始化图标的组件对象数组
private Image[] images = new Image[image_n.length];
//初始化图标的组件对象的id
private int[] imageIds = {
ResourceTable.Id_img1, ResourceTable.Id_img2, ResourceTable.Id_img3,
ResourceTable.Id_img4, ResourceTable.Id_img5, ResourceTable.Id_img6,
ResourceTable.Id_img7, ResourceTable.Id_img8, ResourceTable.Id_img9,
ResourceTable.Id_img10, ResourceTable.Id_img11, ResourceTable.Id_img12,
ResourceTable.Id_img13, ResourceTable.Id_img14, ResourceTable.Id_img15,
ResourceTable.Id_img16, ResourceTable.Id_img17
};
//初始化所有分类的选中状态数组
private boolean[] booleans={false,false,false,false,false,false,
false,false,false,false,false,false,
false,false,false,false,false
};
//用于保存被选中的分类名称
private String text;
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
//加载布局文件
this.setUIContent(ResourceTable.Layout_ability_addaccount);
//初始化组件方法
initView();
}
private void initView() {
tv_add_colse = (Text) this.findComponentById(ResourceTable.Id_tv_add_colse);
tv_add_type = (Text) this.findComponentById(ResourceTable.Id_tv_add_type);
tl1 = (TableLayout) this.findComponentById(ResourceTable.Id_tl1);
tl2 = (TableLayout) this.findComponentById(ResourceTable.Id_tl2);
dl_add = (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl_add);
tv_add_type.setClickedListener(listener);
tv_add_colse.setClickedListener(listener);
for (int i = 0; i < imageIds.length; i++) {
images[i]= (Image) this.findComponentById(imageIds[i]);
images[i].setClickedListener(listener1);
}
}
//定义收入支出的切换监听事件，以及取消功能的监听事件
private Component.ClickedListener listener = new Component.ClickedListener() {
@Override
public void onClick(Component component) {
switch (component.getId()) {
case ResourceTable.Id_tv_add_colse:
//取消被点击时，关闭记账界面，回到上一界面
terminate();
break;
case ResourceTable.Id_tv_add_type:
//根据当前状态，切换收入和支出，并同时更改收入和支出的分类选项
bool = !bool;
if (bool) {
tl1.setVisibility(Component.HIDE);
tv_add_type.setText("收入▼");
tl2.setVisibility(Component.VISIBLE);
} else {
tl1.setVisibility(Component.VISIBLE);
tv_add_type.setText("支出▼");
tl2.setVisibility(Component.HIDE);
}
break;
}
}
};
//添加分类选中监听事件，用于改变被选中的分类出于高亮状态
private Component.ClickedListener listener1=new Component.ClickedListener() {
@Override
public void onClick(Component component) {
for (int i = 0; i < imageIds.length; i++) {
if (component.getId()==imageIds[i]){
booleans[i]=!booleans[i];
if (booleans[i]) {
images[i].setPixelMap(image_p[i]);
dl_add.setVisibility(Component.VISIBLE);
text=names[i];
im=image_s[i];
}else {
images[i].setPixelMap(image_n[i]);
dl_add.setVisibility(Component.HIDE);
}
}else
images[i].setPixelMap(image_n[i]);
}
}
};
}5.界面效果展示
完成到这里的时候，可以看到以下功能效果:
那么这时候虚拟键盘的功能还未添加，我们继续看。
6.虚拟键盘的功能实现
在布局中已添加了虚拟键盘的xml代码，这里就不再重复了，我们接下来在AbilitySlice类中初始化虚拟键盘的组件对象。
//虚拟按键的文本组件id
private int[] tvIds={
ResourceTable.Id_tv0,ResourceTable.Id_tv1,ResourceTable.Id_tv2,
ResourceTable.Id_tv3,ResourceTable.Id_tv4,ResourceTable.Id_tv5,
ResourceTable.Id_tv6,ResourceTable.Id_tv7,ResourceTable.Id_tv8,
ResourceTable.Id_tv9,ResourceTable.Id_tvJia,ResourceTable.Id_tvj,
ResourceTable.Id_tvDian,ResourceTable.Id_tvd,ResourceTable.Id_tvf
};
//初始化按键的文本组件对象数组
private Text[] texts=new Text[tvIds.length];
//初始化金额的文本对象
private Text tv_money;
//定义变量用于存储金额
private int im;
//初始化备注信息的组件对象
private TextField tf_info;在initView方法中添加初始化键盘按键对象代码
for (int i = 0; i < tvIds.length; i++) {
texts[i]= (Text) this.findComponentById(tvIds[i]);
texts[i].setClickedListener(listener2);
}
tv_money= (Text) this.findComponentById(ResourceTable.Id_tv_money);
tf_info= (TextField) this.findComponentById(ResourceTable.Id_tf_info);添加虚拟键盘的按键事件监听
private Component.ClickedListener listener2=new Component.ClickedListener() {
@Override
public void onClick(Component component) {
String s=((Text)component).getText();
if ("0123456789".indexOf(s)>=0){
tv_money.append(s);
}else if ("删除".equals(s)&&tv_money.getText().length()>0){
tv_money.setText(tv_money.getText().substring(0,tv_money.getText().length()-1));
}else if ("完成".equals(s)){
//将数据添加至Sqlite数据库中
String ss=tv_add_type.getText().substring(0,tv_add_type.getText().length()-1);
ValuesBucket vb=new ValuesBucket();
vb.putString("userid", String.valueOf(CommonUtil.user.getId()));
vb.putString("type",ss);
vb.putString("subtype",text);
vb.putInteger("image",im);
vb.putString("year",String.valueOf(year));
vb.putString("month",String.valueOf(month));
vb.putString("day",String.valueOf(day));
vb.putDouble("money",Double.parseDouble(tv_money.getText()));
vb.putString("info",tf_info.getText());
long i=DBUtil.getInstance(rs).insert("tb_jz",vb);
if (i>0){
showToastDialogShort("记账成功");
tv_money.setText("");
tf_info.setText("");
terminate();
}
}
}
};7.总结
收入和支出的记账功能到这里就完成了，并将收入和支出的明细添加至sqlite数据库中。后面将完善明细模块功能。具体效果图如下展示:
