一、项目概述

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控件。查询收藏列表页面使用代码的方式来直接进行操作。

基于Android的新闻APP的设计 新闻类app设计_xcode

基于Android的新闻APP的设计 新闻类app设计_xcode_02

图2-1 启动页面 图2-2 登录页面

基于Android的新闻APP的设计 新闻类app设计_ios_03

图2-3 项目模块流程图

基于Android的新闻APP的设计 新闻类app设计_新闻app_04

图2-4 自定义cell展示

2.2 模块介绍

基于Android的新闻APP的设计 新闻类app设计_macos_05

图2-5 项目目录

关于登录界面部分,UserViewController定义了偏好设置,登陆界面控件的功能以及登录功能。

关于新闻浏览部分,NewsManager定义了新闻的基本属性,图片、网址、日期、标题,NewsDAL则定义了利用sql对新闻的一些操作,例如加载新闻,查找新闻,统计信息总数等等,BrowseNewsTableViewController是新闻浏览新页面的代码文件,NewsCell是定义了每一行新闻自己的信息,例如图片、标题、日期的位置。

关于新闻收藏部分,CollectionDetailViewController是定义收藏新闻详细展示页面的代码文件,CollectedNewsTableViews是定义收藏新闻列表的代码文件,SearchNewsTableViewController是在收藏列表查询已收藏新闻的代码文件,其中通过调用NewsDAL定义的一些有关数据库的操作来进行查找。

关于数据库部分,SQLiteManager负责管理sql语句,以及对执行哪种sql语句和操作结果做出了一些确定,同时还承担了初始化数据库,开启数据库,关闭数据库的任务。

总的来说,将各个页面画出来后,必须绑定对应页面的代码文件。分模块的方法使得程序之间的逻辑性和独立性得到了提高,后期寻找bug相对轻松。

三、测试报告(以截图为主)

3.1实现启动界面

操作:在XCode中点击开始使用按钮,iPhone 12 pro max生成,点击News,程序从启动页面跳转到主界面

基于Android的新闻APP的设计 新闻类app设计_基于Android的新闻APP的设计_06

基于Android的新闻APP的设计 新闻类app设计_macos_07

基于Android的新闻APP的设计 新闻类app设计_新闻app_08

3.2 成功登录后写入UserDefaults

操作:登入后我们重新运行,点击启动界面可以看到在用户名一栏出现了学号,密码是因为防止盗号使用所以就不添加。

基于Android的新闻APP的设计 新闻类app设计_xcode_09

3.3 新闻浏览

操作:登录界面进来就是新闻浏览界面,上画提示正在刷新,下滑到底提示继续加载。每一行新闻左边是新闻图片,右侧为标题和新闻发布日期

基于Android的新闻APP的设计 新闻类app设计_基于Android的新闻APP的设计_10

3.4 呈现新闻并收藏

点击新闻浏览页面的cell,页面则跳入了新闻网页的源地址

基于Android的新闻APP的设计 新闻类app设计_xcode_11

3.5 收藏列表

操作:点击收藏按钮,可以看到右下角收藏出出现红点,红点的数字即位收藏的条数。

基于Android的新闻APP的设计 新闻类app设计_新闻app_12

基于Android的新闻APP的设计 新闻类app设计_ios_13

基于Android的新闻APP的设计 新闻类app设计_xcode_14

右小角红点的数量分别为1 2 3

基于Android的新闻APP的设计 新闻类app设计_macos_15

基于Android的新闻APP的设计 新闻类app设计_macos_16

转到新闻列表,可点击其中一条新闻查看标题,图片,网页以及发布时间与日期

3.6 删除收藏新闻

操作:将列表信息左划,可以看见有删除按钮,点击删除,则数据库中将该条News的相关信息全部清除

基于Android的新闻APP的设计 新闻类app设计_ios_17

基于Android的新闻APP的设计 新闻类app设计_ios_18

基于Android的新闻APP的设计 新闻类app设计_xcode_19

3.7 查询收藏新闻

操作:在搜索框中输入关键字,需在标题中出现过,则经过筛选后,符合条件的收藏新闻就会展示出来。

基于Android的新闻APP的设计 新闻类app设计_新闻app_20

基于Android的新闻APP的设计 新闻类app设计_macos_21

四、设计过程中遇到的问题及解决方法

4.1 登录界面不一致从而写入Userdefaults出问题

一开始,由于老师教的登录界面是微信的例子,登录是弹窗出来用代码描述的,而我是直接在storyboar上绘制出登录框和按钮,所以在写入UserDefaults的时候出现了一些困难,不过后面再捋清逻辑关系和顺序之后,代码就调试成功。

基于Android的新闻APP的设计 新闻类app设计_ios_22

4.2 收藏数量的小红点的显示

刚开始是没有理解小红点统计的数量是用什么参数表达,以及该参数再代码里的作用。于是,我在理解之后,再NewsDAL中新加入一个GetAllNews函数来统计已收藏新闻数量,从而解决了这个问题。

基于Android的新闻APP的设计 新闻类app设计_基于Android的新闻APP的设计_23

基于Android的新闻APP的设计 新闻类app设计_macos_24

4.3 修改项目名,类名出现不匹配

一开始实在微信登录界面的作业基础上进行魔改的,所以想把项目名改为大作业名出现了一些问题,sql桥接,文件不存在种种问题出现,后面实在网上寻找了一篇文档,跟着步骤下来及解决了修改项目名的问题。类名是选择,然后右键rename即可。

4.4 sql语句代码的不熟练

这部分确实不够熟练,于是又重新观看了sql语句的那个视频,照着流程一步一步写了下来。

4.5 虚拟机截屏图片清晰度不高,容易卡顿

虚拟机截图显示效果极差,反而是模拟器上右上角自带的截图效果似乎更好,但是没有边界的展示,所以会觉得范围不明确,最后还是选择了模糊的图片,还请老师见谅。

基于Android的新闻APP的设计 新闻类app设计_新闻app_25

基于Android的新闻APP的设计 新闻类app设计_基于Android的新闻APP的设计_26

左侧为模拟器自带的截图的效果,右侧为QQ截图后的效果,可以很清楚的看到分辨率下降了好多。

五、尚未解决的问题及考虑应对的策略

5.1 cell处图片UIImage伸缩不一致

新闻浏览时,上拉刷新和下拉刷新时,图片位置不固定,有的时候是很清楚,有的时候会挡住标题文字以及日期。个人再NewsCell.xib中队图片框的范围进行了约束,又取消了图片对cell的自适应高度还是没能解决这个问题,存在难点。

基于Android的新闻APP的设计 新闻类app设计_xcode_27

基于Android的新闻APP的设计 新闻类app设计_ios_28

同样是一处地方,左侧为下拉刷新的效果,右侧为上拉刷新的效果,前者比后者杂乱了不少,不过不影响正常使用。