最近呢项目任务不是很紧张，打算呢写一下东西来充实一下自己,所以打算找一些APP来仿写它们的界面，或者根据它们的产品自己来写一些自己想实现的界面，为了能更好的学习与进步，希望有心看到这篇文章的读者，如果有更好的思路或实现方法的能提出来，这样大家可以一同进步与提高，架构呢主要还是MVC，后期会慢慢的像MVVM + RAC来迁移。
这次模仿的是百度传课主要有以下打算
1.实现一个首页
2.写一个语音识别的界面，基于讯飞（http://www.xfyun.cn/?ch=bdtg）
3.根据时间来写一个详情界面
这篇文章实现的首页如下
效果图
首先拿到一个UI界面呢我们不应该闷头去写他，我们首先得看它包含几个部分，怎么实现比较容易，多用模型的思想，降低代码的耦合，让代码的可扩展性提高，在写的过程中注意代码的质量，能一句解决的代码绝不写两句代码，对自己严格要求的过程中自己会慢慢提高。
拿到这个界面看到有三种形式的内容，头部一个轮播图，中间一个滚动图，下部一个很普通的cell
我首先想到了两种思路：
- 思路一
将上面的两种形式当成tableView的header来实现，本文就是如此实现 - 思路二
将上面两种形式直接当做tableView的cell,给tableView的数据源中添加模型，在其代理方法中实现取数据的时候判断是哪一种模型显示那种cell。
以上两种思路都能实现，个人感觉实现复杂度相当，可扩扩展性好，如果有更好实现思路的伙伴可以提出您宝贵的意见。
实现过程如下
1.看到轮播图，很高兴，因为上一篇文章中我已经封装过一个轮播图，直接拿过来用即可。
2.下面滚动更简单，可以用ScrollView上添加ImageView或者直接使用collectionView
3.非常常见的cell,利用xib来做，传模型，重写setter方法。
分清楚以上步骤以后接下来我们该实现了，我们需要一个网络下载工具类，基于AFNetworking,为了更显符合实际项目，我们稍微封装一下,基于block回传，当然大型的项目为了耦合性低也可以使用代理的方法
#import <Foundation/Foundation.h>
#import <AFNetworking.h>
@interface HTTPToolRequest : NSObject
+ (void)GETURLString:(NSString *)urlString parameters:(NSDictionary *)paramaters progressBlock:(void(^)(NSProgress * downloadProgress))downloadProgressBlock sucessBlock:(void(^)(id responseObject))sucessBlock failureBlock:(void(^)(NSString *error))failureBlock;
+ (void)GETURLString:(NSString *)urlString parameters:(NSDictionary *)paramaters sucessBlock:(void(^)(id responseObject))sucessBlock failureBlock:(void(^)(NSString *error))failureBlock;
@end
#import "HTTPToolRequest.h"
#define TIMEOUTInterval 10
@implementation HTTPToolRequest
+ (AFHTTPSessionManager *)generalManager
{
AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];
manager.requestSerializer.timeoutInterval = TIMEOUTInterval;
//header设置
//通用设置 根据具体接口的要求，MD5加密什么的
/**
[manager.requestSerializer setValue:@"" forHTTPHeaderField:@""];
*/
/** 设置接收数据的类型*/
manager.responseSerializer.acceptableContentTypes = [NSSet setWithObjects:@"text/plain",@"text/html",@"application/json", nil];
return manager;
}
+ (void)GETURLString:(NSString *)urlString parameters:(NSDictionary *)paramaters progressBlock:(void(^)(NSProgress * downloadProgress))downloadProgressBlock sucessBlock:(void(^)(id responseObject))sucessBlock failureBlock:(void(^)(NSString *error))failureBlock
{
AFHTTPSessionManager *manager = [self generalManager];
[manager GET:urlString parameters:paramaters progress:^(NSProgress * _Nonnull downloadProgress){
downloadProgressBlock(downloadProgress);
} success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) {
sucessBlock(responseObject);
} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
NSString *errorStr = [error.userInfo objectForKey:@"NSLocalizedDescription"];
failureBlock(errorStr);
}];
}
+ (void)GETURLString:(NSString *)urlString parameters:(NSDictionary *)paramaters sucessBlock:(void(^)(id responseObject))sucessBlock failureBlock:(void(^)(NSString *error))failureBlock
{
AFHTTPSessionManager *manager = [self generalManager];
[manager GET:urlString parameters:paramaters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) {
sucessBlock(responseObject);
} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
NSString *errorStr = [error.userInfo objectForKey:@"NSLocalizedDescription"];
failureBlock(errorStr);
}];
}
@end
下面我们该到主页实现tableView了，创建都采用懒加载形式
//轮播图数据源
- (NSMutableArray *)recommendArray
{
if (!_recommendArray){
_recommendArray = [NSMutableArray array];
}
return _recommendArray;
}
//普通cell的数据源
- (NSMutableArray *)focusArray
{
if (!_focusArray){
_focusArray = [NSMutableArray array];
}
return _focusArray;
}
//滚动数据源
- (NSMutableArray *)AlbumArray
{
if (!_AlbumArray) {
_AlbumArray = [NSMutableArray array];
}
return _AlbumArray;
}
- (UITableView *)mainTableView
{
if (!_mainTableView) {
_mainTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, SCREENWIDTH, SCREENHEIGHT - 49 - 64) style:UITableViewStylePlain];
_mainTableView.rowHeight = 80;
_mainTableView.delegate = self;
_mainTableView.dataSource = self;
_mainTableView.tableHeaderView = self.bgView;
}
return _mainTableView;
}
//头部的背景view
- (UIView *)bgView
{
if (!_bgView) {
_bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, 200 + 90)];
[_bgView addSubview:self.loopView];
}
return _bgView;
}
//轮播view
- (scrollLoopView *)loopView
{
if (!_loopView) {
_loopView = [[scrollLoopView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, 200)];
_loopView.delegate = self;
}
return _loopView;
}
在viewDidLoad实现网络数据源的下载，切记由于下载是耗时操作，需在下载完后赋值给数据源刷新
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.automaticallyAdjustsScrollViewInsets = NO;
[self.view addSubview:self.mainTableView];
__weak typeof(self) weakself = self;
[HTTPToolRequest GETURLString:@"http://pop.client.chuanke.com/?mod=recommend&act=mobile&client=2&limit=20" parameters:nil sucessBlock:^(id responseObject) {
for (NSInteger i = 0; i< [responseObject[@"CourseList"] count]; i++) {
courseListModel *courseList = [courseListModel mj_objectWithKeyValues:responseObject[@"CourseList"][i]];
[weakself.recommendArray addObject:courseList];
}
for (NSInteger i = 0; i< [responseObject[@"FocusList"] count]; i++) {
focusListModel *focusList = [focusListModel mj_objectWithKeyValues:responseObject[@"FocusList"][i]];
[weakself.focusArray addObject:focusList.PhotoURL];
}
for (NSInteger i = 0; i < [responseObject[@"AlbumList"] count]; i++) {
AlbuimModel *album = [AlbuimModel mj_objectWithKeyValues:responseObject[@"AlbumList"][i]];
[weakself.AlbumArray addObject:album.PhotoURL];
}
weakself.loopView.images = weakself.focusArray;
[self setupAlubm];//设置滚动
[self.mainTableView reloadData];
} failureBlock:^(NSString *error) {
}];
}
针对以上说一个小技巧，我们在创建模型的时候，常常要写一大堆恶心的@property(nonatomic, copy) NSString *name;垃圾代码，遇到这个就恶心的想吐，我就想能不能自动给我生成了，你还别说网上github上就有这种软件，有兴趣的可以去搜一下，但是作为一个程序员不能老想着用别人的东西，所以我就给NSObject添加一个分类，当传入一个字典会自动生成打印处理，接下来需要做的就是command + c然后command + v到自己的模型中，然后采用了李明杰大神的MJExtension.h这个框架给模型数据数据赋值的方式（也就是运行时的方式），或者大家也可以通过KVC来赋值，都可以，下面提供生成属性代码的分类
#import <Foundation/Foundation.h>
@interface NSObject (propertyCode)
/**
* 自动生成属性申明Code
*
* @param dict 传入的字典
*/
+ (void)propertyCodeWithDictionary:(NSDictionary *)dict;
@end
#import "NSObject+propertyCode.h"
@implementation NSObject (propertyCode)
// 自动生成属性声明的代码
+ (void)propertyCodeWithDictionary:(NSDictionary *)dict
{
NSMutableString *strM = [NSMutableString string];
[dict enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
NSString *str;
NSLog(@"%@",[obj class]);
if ([obj isKindOfClass:NSClassFromString(@"__NSCFString")] || [obj isKindOfClass:NSClassFromString(@"NSTaggedPointerString")] || [obj isKindOfClass:NSClassFromString(@"__NSCFConstantString")]) {
str = [NSString stringWithFormat:@"@property (nonatomic, copy) NSString *%@;",key];
}
if ([obj isKindOfClass:NSClassFromString(@"__NSCFNumber")]) {
str = [NSString stringWithFormat:@"@property (nonatomic, assign) int %@;",key];
}
if ([obj isKindOfClass:NSClassFromString(@"__NSCFArray")]) {
str = [NSString stringWithFormat:@"@property (nonatomic, copy) NSArray *%@;",key];
}
if ([obj isKindOfClass:NSClassFromString(@"__NSCFDictionary")]) {
str = [NSString stringWithFormat:@"@property (nonatomic, copy) NSDictionary *%@;",key];
}
if ([obj isKindOfClass:NSClassFromString(@"__NSCFBoolean")]) {
str = [NSString stringWithFormat:@"@property (nonatomic, assign) BOOL %@;",key];
}
[strM appendFormat:@"\n%@\n",str];
}];
NSLog(@"%@",strM);
}
接下来是数据源代理相关方法
#pragma mark - UITableViewDataSource,UITableViewDelegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.recommendArray.count ;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
HomeTableViewCell *cell = [HomeTableViewCell getTableView:tableView];
cell.courseList = [self.recommendArray objectAtIndex:indexPath.row];
return cell;
}
- (void)tapView:(UITapGestureRecognizer *)tap
{
NSLog(@"点击了第%zd",tap.view.tag);
}
//滚动图的实现，为了方便起见利用ScrollView实现，首推UICollectionView
- (void)setupAlubm
{
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 200, SCREENWIDTH, 90)];
scroll.contentSize = CGSizeMake([self.AlbumArray count] *(SCREENWIDTH - 10*2 - 10)/2 , 0);
for (NSInteger i = 0; i < [self.AlbumArray count] ; i++) {
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapView:)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10+i*(SCREENWIDTH - 10*2 - 10)/2, 5, (SCREENWIDTH - 10*2 - 10)/2 - 10, 80)];
imageView.tag = i ;
imageView.userInteractionEnabled = YES;
[imageView addGestureRecognizer:tap];
imageView.layer.cornerRadius = 5;
imageView.layer.masksToBounds = YES;
[imageView sd_setImageWithURL:[NSURL URLWithString:_AlbumArray[i]]];
[scroll addSubview:imageView];
}
[self.bgView addSubview:scroll];
}
- (void)scrollLoopView:(scrollLoopView *)scrollLoopView didSelectItemAtIndex:(int)index
{
NSLog(@"点击了 第%d 个",index);
}
以上呢实现这个主要的界面，欢迎有好的意见的伙伴提出宝贵的意见，如果有不明白或者不理解的地方大家可以留言，下一篇主要分享讯飞语音识别的实现。
本文会传一个简易的gitHub的链接，供有兴趣的好学者参考，欢迎土豪打赏，你的一丁丁打赏是我不断写下去的动力！！！
https://github.com/markdashi/baiduCourse
最后严重声明一点，文章所提供的接口是根据code4app相关项目中的获得，只供学习使用，请勿滥用或者破坏使用，否则相关责任由相关责任人来承担！
网友评论