ios 高效的寫好一個UI界面（一）

最近呢項目任務(wù)不是很緊張，打算呢寫一下東西來充實一下自己,所以打算找一些APP來仿寫它們的界面，或者根據(jù)它們的產(chǎn)品自己來寫一些自己想實現(xiàn)的界面，為了能更好的學(xué)習與進步，希望有心看到這篇文章的讀者，如果有更好的思路或?qū)崿F(xiàn)方法的能提出來，這樣大家可以一同進步與提高，架構(gòu)呢主要還是MVC，后期會慢慢的像MVVM + RAC來遷移。
這次模仿的是百度傳課主要有以下打算
1.實現(xiàn)一個首頁
2.寫一個語音識別的界面，基于訊飛（http://www.xfyun.cn/?ch=bdtg）
3.根據(jù)時間來寫一個詳情界面

這篇文章實現(xiàn)的首頁如下


效果圖

首先拿到一個UI界面呢我們不應(yīng)該悶頭去寫他，我們首先得看它包含幾個部分，怎么實現(xiàn)比較容易，多用模型的思想，降低代碼的耦合，讓代碼的可擴展性提高，在寫的過程中注意代碼的質(zhì)量，能一句解決的代碼絕不寫兩句代碼，對自己嚴格要求的過程中自己會慢慢提高。
拿到這個界面看到有三種形式的內(nèi)容，頭部一個輪播圖，中間一個滾動圖，下部一個很普通的cell
我首先想到了兩種思路：

  • 思路一
    將上面的兩種形式當成tableView的header來實現(xiàn)，本文就是如此實現(xiàn)
  • 思路二
    將上面兩種形式直接當做tableView的cell,給tableView的數(shù)據(jù)源中添加模型，在其代理方法中實現(xiàn)取數(shù)據(jù)的時候判斷是哪一種模型顯示那種cell。

以上兩種思路都能實現(xiàn)，個人感覺實現(xiàn)復(fù)雜度相當，可擴擴展性好，如果有更好實現(xiàn)思路的伙伴可以提出您寶貴的意見。

實現(xiàn)過程如下
1.看到輪播圖，很高興，因為上一篇文章中我已經(jīng)封裝過一個輪播圖，直接拿過來用即可。
2.下面滾動更簡單，可以用ScrollView上添加ImageView或者直接使用collectionView
3.非常常見的cell,利用xib來做，傳模型，重寫setter方法。
分清楚以上步驟以后接下來我們該實現(xiàn)了，我們需要一個網(wǎng)絡(luò)下載工具類，基于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設(shè)置
     //通用設(shè)置 根據(jù)具體接口的要求，MD5加密什么的
    /**
     
     [manager.requestSerializer setValue:@"" forHTTPHeaderField:@""];
     
     */
    /** 設(shè)置接收數(shù)據(jù)的類型*/
    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

下面我們該到主頁實現(xiàn)tableView了，創(chuàng)建都采用懶加載形式

//輪播圖數(shù)據(jù)源
- (NSMutableArray *)recommendArray
{
    if (!_recommendArray){
        _recommendArray = [NSMutableArray array];
    }
    return _recommendArray;
}

//普通cell的數(shù)據(jù)源
- (NSMutableArray *)focusArray
{
    if (!_focusArray){
        _focusArray = [NSMutableArray array];
    }
    return _focusArray;
}
//滾動數(shù)據(jù)源
- (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實現(xiàn)網(wǎng)絡(luò)數(shù)據(jù)源的下載，切記由于下載是耗時操作，需在下載完后賦值給數(shù)據(jù)源刷新

- (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];//設(shè)置滾動
        
        [self.mainTableView reloadData];

        
    } failureBlock:^(NSString *error) {
        
    }];
    
}

針對以上說一個小技巧，我們在創(chuàng)建模型的時候，常常要寫一大堆惡心的@property(nonatomic, copy) NSString *name;垃圾代碼，遇到這個就惡心的想吐，我就想能不能自動給我生成了，你還別說網(wǎng)上github上就有這種軟件，有興趣的可以去搜一下，但是作為一個程序員不能老想著用別人的東西，所以我就給NSObject添加一個分類，當傳入一個字典會自動生成打印處理，接下來需要做的就是command + c然后command + v到自己的模型中，然后采用了李明杰大神的MJExtension.h這個框架給模型數(shù)據(jù)數(shù)據(jù)賦值的方式（也就是運行時的方式），或者大家也可以通過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);
}

接下來是數(shù)據(jù)源代理相關(guān)方法

#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);
}
//滾動圖的實現(xiàn)，為了方便起見利用ScrollView實現(xiàn)，首推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);
}

以上呢實現(xiàn)這個主要的界面，歡迎有好的意見的伙伴提出寶貴的意見，如果有不明白或者不理解的地方大家可以留言，下一篇主要分享訊飛語音識別的實現(xiàn)。
本文會傳一個簡易的gitHub的鏈接，供有興趣的好學(xué)者參考，歡迎土豪打賞，你的一丁丁打賞是我不斷寫下去的動力！！！
https://github.com/markdashi/baiduCourse
最后嚴重聲明一點，文章所提供的接口是根據(jù)code4app相關(guān)項目中的獲得，只供學(xué)習使用，請勿濫用或者破壞使用，否則相關(guān)責任由相關(guān)責任人來承擔！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容