6.-基于Android的家庭理财通项目开发(详细设计：用户界面设计2)

基于Android的家庭理财通项目设计与实现用户界面详细设计何卫东课程目标•熟悉软件的开发流程•掌握Android布局文件的设计•熟练掌握SQLite数据库的使用•熟练掌握公共类的设计及使用•熟练掌握SQLite数据库程序设计本节目标1.主页面设计2.浏览界面设计3.编辑界面设计4.绘制收支状态图5.登录界面设计1.主页面设计•主页面采用GridView布局，每一个表格包含一个图标和文本说明，分别导航到相应的功能模块。•GridView(网格视图)是按照行列的方式来显示内容的，一般用于显示图片等内容，比如实现九宫格图。•首先根据文件命名规则，在layout目录中新建一个xml布局文件activity_main.xml1.主页面设计•activity_main.xml布局文件只有一个GridView组件：1.主页面设计•android:numColumns=auto_fit：设置列数，值auto_fit表名列数根据列宽和屏幕宽度自动适应•android:stretchMode=“spacingWidthUniform”：缩放模式stretchMode可选值：NO_STRETCH：禁止缩放STRETCH_SPACING：列之间的间距缩放STRETCH_SPACING_UNIFORM：每一列的间距均匀缩放STRETCH_COLUMN_WIDTH：缩放与列宽大小同步•android:horizontalSpacing：两列之间的间距•android:verticalSpacing：两行之间的间距。1.主页面设计•主页面设计完成后，需要设置GridView列表项布局，GridView每一个网格由一个图标和一个文本组成，因此在layout目录下再新建一个GridVIew的列表项xml文件：item_gridview_user_main.xml1.主页面设计1.主页面设计•每一个网格项由一个ImageView和TextView组成，且成垂直排列。•布局文件设计完成后，我们需要在Activity的onCreate()方法中加载主页面布局，并采用适配器将GridView的每一个网格与item_gridview_user_main.xml的ImageView和TextView关联起来。•首先设计8个功能模块的ICON图标，并将图标文件拷贝到res/mipmap目标下1.主页面设计1.主页面设计1.主页面设计1.主页面设计1.主页面设计1.主页面设计1.主页面设计1.主页面设计1.主页面设计1.主页面设计•主页面设计要点•GridView优化：通过convertView+ViewHolder来实现，ViewHolder就是一个静态类，使用ViewHolder的关键好处是缓存了显示数据的视图（View），加快了UI的响应速度。ViewHolder模式通过getView()方法返回的视图的标签(Tag)中存储一个数据结构，这个数据结构包含了指向我们要绑定数据的视图的引用，从而避免每次调用getView()的时候调用findViewById()方法。•GridView采用了适配器将视图与图形、文字数据关联起来•在pictureAdapter中加载GridView网格项布局，并在getView方法中将文字图片关联起来。2.浏览界面设计•浏览界面设计要点1.采用ListView显示收入信息2.采用标题栏导航回主页面3.采用ActionBar菜单进行新增收入信息4.采用ListView多选模式进行删除操作2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计2.浏览界面设计3.编辑界面设计3.编辑界面设计3.编辑界面设计3.编辑界面设计3.编辑界面设计3.编辑界面设计3.编辑界面设计4.绘制收支状态图•绘制收支状态图采用了MPAndroidChart工具包。•MPAndroidChart是一个免费开源的Android绘图工具库，它可以在AndroidAPI8及以上的版本中运行。•在AndroidStudio中使用MPAndroid–编辑build.gradle，添加以下语句4.绘制收支状态图•MPAndroidChart的帮助文档：绘制收支状态图4.绘制收支状态图4.绘制收支状态图4.绘制收支状态图4.绘制收支状态图4.绘制收支状态图4.绘制收支状态图4.绘制收支状态图5.登录界面设计•首先分析页面所用的字符串资源–页面标题采用应用的标题“家庭理财通”–未输入密码时提示用户“请输入密码”–ActionButton“登录”采用图标和文本“登录”提示用户登录–所以在res/strings.xml添加字符串资源如下图：5.登录界面设计•界面布局采用ActionBar进入登录密码校验，因此在布局中仅仅需要设置一个文本编辑框EditText即可，不需要另外添加Button组件。•界面布局分为菜单menu和layout•ActionBar登录按钮使用了图标，所以先将图标文件login.png拷贝到res/mipmap目录中5.登录界面设计登录界面布局文件activity_login.xml5.登录界面设计•完成菜单和布局文件设计后，开始设计Activity5.登录界面设计5.登录界面设计