一、项目概述
1.1 项目介绍
本次课程设计所实现的新闻阅读APP是基于XCode IOS开发系统上开发的一款可以查看,收藏以及删除新闻的一款IOS应用软件。它有着启动界面、登录界面,在输入正确的账号密码后方可进入新闻界面。
在主菜单栏具有新闻浏览和新闻收藏两个按钮。在新闻浏览界面,用户可以点击对应的新闻跳转到网页进行浏览,右上角有收藏按钮,方便用户进行添加;在新闻收藏界面,用户可以点击对应的新闻查看该新闻的标题,原网址和发布日期。同时还具备搜索功能,用户输入关键字,相应的新闻即可跳出。当用户想删除收藏的新闻时,向左轻轻一划即可删除。
1.2 实现功能
(1)LaunchScreen启动页图片中有学号和姓名
(2)Login登录界面,用户验证无需网络,可在程序代码中写入,用学号作为用户名,密码123可登录,用户登录成功后将用户名写入UserDefaults,下次登录无需再输入用户名。
(3)主界面有两个tab,一个是用于新闻浏览,一个显示收藏的新闻。
(4)新闻浏览页功能包括:
①加载时访问http://zy.whu.edu.cn/news/api/news/getList?page=1&count=10获取返回的新闻信息,参数page是页码,count是新闻数;
②新闻浏览显示用TableViewController,某条新闻的cell需呈现标题、日期和图片;
③选择某条新闻后,打开有WKWebView控件的页面呈现该url的新闻,并可收藏此新闻,收藏后在收藏tab上显示已收藏的数量;
(5)收藏页功能包括:
①所有收藏的新闻列表(收藏的新闻存放在本地Sqlite数据库中);
②可以对该列表中的收藏进行删除;
③可通过标题查询收藏的新闻;
④点击收藏的新闻可呈现新闻内容。
二、项目设计
2.1 设计思路
从老师提供的要求不难可以看出该app需要6个界面,分别为启动界面、登录界面、新闻浏览界面、新闻阅读界面、收藏列表页面、收藏新闻信息页面。在storyboard中分别设计UI,设定页面关系,即可实现相应界面的跳转功能。
登录界面跳转后使用TabBarController控件,将新闻浏览和收藏列表进行固定,同时这两个页面都使用TableViewController控件。考虑到新闻浏览页面还需要呈现标题、日期、图片等信息,于是使用自定义cell的控件来进行操作。呈现url新闻使用了WKWebView控件。查询收藏列表页面使用代码的方式来直接进行操作。
图2-1 启动页面 图2-2 登录页面
图2-3 项目模块流程图
图2-4 自定义cell展示
2.2 模块介绍
图2-5 项目目录
关于登录界面部分,UserViewController定义了偏好设置,登陆界面控件的功能以及登录功能。
关于新闻浏览部分,NewsManager定义了新闻的基本属性,图片、网址、日期、标题,NewsDAL则定义了利用sql对新闻的一些操作,例如加载新闻,查找新闻,统计信息总数等等,BrowseNewsTableViewController是新闻浏览新页面的代码文件,NewsCell是定义了每一行新闻自己的信息,例如图片、标题、日期的位置。
关于新闻收藏部分,CollectionDetailViewController是定义收藏新闻详细展示页面的代码文件,CollectedNewsTableViews是定义收藏新闻列表的代码文件,SearchNewsTableViewController是在收藏列表查询已收藏新闻的代码文件,其中通过调用NewsDAL定义的一些有关数据库的操作来进行查找。
关于数据库部分,SQLiteManager负责管理sql语句,以及对执行哪种sql语句和操作结果做出了一些确定,同时还承担了初始化数据库,开启数据库,关闭数据库的任务。
总的来说,将各个页面画出来后,必须绑定对应页面的代码文件。分模块的方法使得程序之间的逻辑性和独立性得到了提高,后期寻找bug相对轻松。
三、测试报告(以截图为主)
3.1实现启动界面
操作:在XCode中点击开始使用按钮,iPhone 12 pro max生成,点击News,程序从启动页面跳转到主界面
3.2 成功登录后写入UserDefaults
操作:登入后我们重新运行,点击启动界面可以看到在用户名一栏出现了学号,密码是因为防止盗号使用所以就不添加。
3.3 新闻浏览
操作:登录界面进来就是新闻浏览界面,上画提示正在刷新,下滑到底提示继续加载。每一行新闻左边是新闻图片,右侧为标题和新闻发布日期
3.4 呈现新闻并收藏
点击新闻浏览页面的cell,页面则跳入了新闻网页的源地址
3.5 收藏列表
操作:点击收藏按钮,可以看到右下角收藏出出现红点,红点的数字即位收藏的条数。
右小角红点的数量分别为1 2 3
转到新闻列表,可点击其中一条新闻查看标题,图片,网页以及发布时间与日期
3.6 删除收藏新闻
操作:将列表信息左划,可以看见有删除按钮,点击删除,则数据库中将该条News的相关信息全部清除
3.7 查询收藏新闻
操作:在搜索框中输入关键字,需在标题中出现过,则经过筛选后,符合条件的收藏新闻就会展示出来。
四、设计过程中遇到的问题及解决方法
4.1 登录界面不一致从而写入Userdefaults出问题
一开始,由于老师教的登录界面是微信的例子,登录是弹窗出来用代码描述的,而我是直接在storyboar上绘制出登录框和按钮,所以在写入UserDefaults的时候出现了一些困难,不过后面再捋清逻辑关系和顺序之后,代码就调试成功。
4.2 收藏数量的小红点的显示
刚开始是没有理解小红点统计的数量是用什么参数表达,以及该参数再代码里的作用。于是,我在理解之后,再NewsDAL中新加入一个GetAllNews函数来统计已收藏新闻数量,从而解决了这个问题。
4.3 修改项目名,类名出现不匹配
一开始实在微信登录界面的作业基础上进行魔改的,所以想把项目名改为大作业名出现了一些问题,sql桥接,文件不存在种种问题出现,后面实在网上寻找了一篇文档,跟着步骤下来及解决了修改项目名的问题。类名是选择,然后右键rename即可。
4.4 sql语句代码的不熟练
这部分确实不够熟练,于是又重新观看了sql语句的那个视频,照着流程一步一步写了下来。
4.5 虚拟机截屏图片清晰度不高,容易卡顿
虚拟机截图显示效果极差,反而是模拟器上右上角自带的截图效果似乎更好,但是没有边界的展示,所以会觉得范围不明确,最后还是选择了模糊的图片,还请老师见谅。
左侧为模拟器自带的截图的效果,右侧为QQ截图后的效果,可以很清楚的看到分辨率下降了好多。
五、尚未解决的问题及考虑应对的策略
5.1 cell处图片UIImage伸缩不一致
新闻浏览时,上拉刷新和下拉刷新时,图片位置不固定,有的时候是很清楚,有的时候会挡住标题文字以及日期。个人再NewsCell.xib中队图片框的范围进行了约束,又取消了图片对cell的自适应高度还是没能解决这个问题,存在难点。
同样是一处地方,左侧为下拉刷新的效果,右侧为上拉刷新的效果,前者比后者杂乱了不少,不过不影响正常使用。