中山大学数据科学与计算机学院本科生ios实验报告

一、实验题目

期末项目 --新闻App

---

二、实现技术介绍

MJRefresh (Footer ) API

MJRefreshFooter

MJRefreshFooter结构如下图所示：

//没有效果,也不会刷新
-(void)refreshNone{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshBackFooter

没有任何刷新的UI，但是有刷新效果。

//没有任何刷新的UI，但是有刷新效果
-(void)refreshBack{
      __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshBackGifFooter

有文字刷新状态，有刷新效果

//有文字刷新状态，有刷新效果
-(void)refreshBackGif{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshBackStateFooter

和MJRefreshBackGifFooter 一样 只有文字刷新状态，有刷新效果。

//和MJRefreshBackGifFooter 一样 只有文字刷新状态，有刷新效果
-(void)refreshBackState{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackStateFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshBackNormalFooter

有文字状态也有图片，有刷新效果

//有文字状态也有图片，有刷新效果
-(void)refreshBackNormal{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshAutoFooter

没有任何UI，但是有刷新效果，和MJRefreshBackFooter一样。

//没有任何UI，但是有刷新效果
-(void)refreshAuto{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshAutoGifFooter

有文字，有刷新效果。和MJRefreshBackGifFooter类似，但是和MJRefreshBackGifFooter的位置不一样。

//有文字，有效果，注意：这个文字是紧跟最后一个有数据的cell的位置，并不是隐藏起来的
-(void)refreshAutoGif{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshAutoStateFooter

有文字，有效果，和MJRefreshAutoGifFooter一个效果。

//有文字，有效果，和MJRefreshAutoGifFooter一个效果
-(void)refreshAutoState{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoStateFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

MJRefreshAutoNormalFooter

有文字，刷新时候有小菊花图片，有刷新效果。

//有文字，刷新有图片，有刷新效果。
-(void)refreshAutoNormal{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

带动图的刷新

-(void)refreshAnimationGif{
    __weak UpRefreshController * weakSelf = self;
    MJRefreshAutoGifFooter * footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
    
    //设置正在刷新状态的动画图片
    NSMutableArray * refreshingImages = [NSMutableArray array];
    for (NSUInteger i = 1; i<=3; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd",i]];
        [refreshingImages addObject:image];
    }
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    self.tableView.mj_footer = footer;
}

SCRScrollMenuController

说明

CRScrollMenu是一个横向可滑动，菜单项底部有指示标志的菜单，CRScrollMenuController包含CRScrollMenu，并且是菜单项对应Content View Controller的容器，这些View Controller之间也是可以横向滑动的。

其特点有：

1. 可以设置CRScrollMenu的背景图片
2. 可以设置CRScrollMenu指示标志的高度跟颜色
3. 支持插入与删除菜单项
4. 菜单项支持subtitle，并且可以分别设置title跟subtitle在正常与选中状态的颜色与字体
5. CRScrollMenuController作为容器包含了内容ViewController与CRScrollMenu，统一管理，方便使用
6. CRScrollMenu可以在没有CRScrollMenuController的情况下使用

结构

CRScrollMenu由以下模块组成：

• CRScrollMenuItem：数据源，指定菜单项的title与subtitle
• CRScrollMenuButton：菜单项，根据title与subtitle进行显示，基于UIControl，用selected属性判断菜单项是否被选中（是否选中使用不同的TextAttributes）
• CRScrollMenu：滑动菜单，根据传入的CRScrollMenuItem数组生成对应的Button，并处理菜单项的点击与划动
• CRScrollMenuController：ViewController的容器，管理Content View Controller（这些Controller的view全部包含在一个ScrollView中），并根据传入的CRScrollMenuItem初始化CRScrollMenu

如何使用

• 对于CRScrollMenu，setButtonsByItems:在配置完CRScrollMenu之后使用，在setButtonsByItems:之后设置的属性不会生效。基于这个原因，CRScrollMenuController中的setViewControllers:withItems:也是一样
• CRScrollMenu设置了背景图片之后，背景颜色将不会被显示出来
• CRScrollMenu插入与删除菜单项的时候会自动更新内部ScrollView的contentOffset，当删除的菜单项为选中时，删除后第一项将变成选中项

---

三、实验结果

实现效果如下图所示：

---

四、实验总结

这次期末大作业需要完成的工作是新闻app的制作，我们需要学习使用各种不同的插件和api，因此对我们小组来说，是一个十分大的挑战。
在这次作业中，关键是将后台api读取新闻数据并且加载到我们写好的UI模型中。在本次作业中，我负责了UI的编写和优化。通过不断学习插件怎么使用的过程中，让我了解到插件的使用方式和实现的原理。
这次实验也让我明白了团队合作是十分重要的。虽然我们三个人分别完成不同的部分，但是我们必须要多沟通和交流，不然代码拼接在一起的时候就会出现问题。经过这次实验之后，我对这门课的理解也大大加深了，希望我在后面的ios开发过程中，也能继续克服困难，不断提高自己的ios开发实力。