ios 高效的写好一个UI界面（一）

2016-06-12 本文已影响2914人 mark666

最近呢项目任务不是很紧张，打算呢写一下东西来充实一下自己,所以打算找一些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相关项目中的获得，只供学习使用，请勿滥用或者破坏使用，否则相关责任由相关责任人来承担！

ios 高效的写好一个UI界面（一）

猜你喜欢

热点阅读