iOS高仿下廚房（Objective-C）

2017.5.19編輯：因?yàn)楣俜浇涌谧儎?dòng)名党，所以一些需要根據(jù)返回?cái)?shù)據(jù)進(jìn)行動(dòng)態(tài)調(diào)整布局的地方會(huì)崩潰蚪战，如果有興趣可以自行抓取最新接口担映，然后根據(jù)返回?cái)?shù)據(jù)進(jìn)行調(diào)整双饥。

前言

本開源項(xiàng)目講解了一些App常見功能界面的搭建以及實(shí)現(xiàn)思路，適合新手五续。

為什么是下廚房洒敏？

下廚房：一個(gè)集合了工具、社區(qū)與平臺(tái)電商屬性的家庭美食入口疙驾。很棒的一個(gè)平臺(tái)凶伙，App界面也很好看！

關(guān)于項(xiàng)目（Github地址在文章結(jié)尾）

開發(fā)環(huán)境：Xcode 7.2它碎，語言：Objective-C
用到的工具：Charles抓包工具
仿寫程度：只是作為一個(gè)練習(xí)項(xiàng)目函荣，除了沒有接口的界面显押，以及一些小細(xì)節(jié)沒有調(diào)整，其他大部分主要功能都實(shí)現(xiàn)了傻挂。其他部分童鞋們可以自己嘗試實(shí)現(xiàn)~
剛開始寫的時(shí)候控件是用純代碼寫的乘碑，后來發(fā)現(xiàn)太耗時(shí)間就改用Xib了
代碼如果有不合理的地方（如：命名），請(qǐng)見諒金拒，學(xué)習(xí)實(shí)現(xiàn)思路就好兽肤，代碼請(qǐng)不要借鑒。
這個(gè)開源項(xiàng)目適合新手绪抛，基本的界面布局以及業(yè)務(wù)邏輯都有轿衔，看完這個(gè)基本也會(huì)寫簡單的App啦
備注：因?yàn)楫?dāng)時(shí)對(duì)block有特殊偏好所以通篇沒有一個(gè)protocol...代碼也是比較新手，嘛主要以實(shí)現(xiàn)思路為主睦疫！希望能對(duì)各位有幫助害驹！

效果預(yù)覽

首頁.gif

關(guān)注動(dòng)態(tài).gif

菜譜.gif

帖子與作品.gif

商品界面.gif

商品分類選擇.gif

商品界面-圖片展示動(dòng)畫.gif

購物車.gif

上傳作品.gif

收貨地址.gif

搜索界面.gif

菜譜-創(chuàng)建與刪除.gif

一、首頁

首頁.png

布局

如圖蛤育，首頁tableView就可以搞定
日期標(biāo)題為sectionHeader
下面的就是cell了宛官，下廚房返回的數(shù)據(jù)中cell有6種模板，通過自定義cell瓦糕，根據(jù)不同模板顯示不同效果底洗，很簡單就不描述了

思路：

頂部導(dǎo)航部分點(diǎn)擊事件，通過給每個(gè)控件綁定tag咕娄，然后定義對(duì)應(yīng)的枚舉變量亥揖，通過閉包（Block）將事件傳遞到控制器后，控制器判斷枚舉值即可圣勒。

1. 跳轉(zhuǎn)的界面控制器

① 菜譜

布局

整個(gè)界面是一個(gè)UIViewController费变，放上一個(gè)tableView，然后添加底部的收藏圣贸、丟進(jìn)菜籃子自定義view
用料挚歧、做法、小貼士吁峻、被加入的菜單這四個(gè)標(biāo)題是sectionHeader滑负，其內(nèi)容對(duì)應(yīng)為一組，每組cell自定義即可

菜譜 - Header.png

菜譜 - 作品展示.png

作品展示：
這里實(shí)現(xiàn)的方法跟上面的用料用含、做法...一樣矮慕，獨(dú)立為一組，組內(nèi)只有一個(gè)cell啄骇，cell的contentView里從上至下添加：作品個(gè)數(shù)Label痴鳄、作品展示CollectionView、所有作品Button即可
collectionView手勢(shì)左滑肠缔，松開會(huì)加載更多作品數(shù)據(jù)
這里通過實(shí)現(xiàn)scrollView的代理方法夏跷，判斷contentOffset的值是否達(dá)到預(yù)定的數(shù)值哼转，達(dá)到即調(diào)用block明未，然后控制器發(fā)送網(wǎng)絡(luò)請(qǐng)求加載更多數(shù)據(jù)槽华，刷新界面即可。（這里我只是實(shí)現(xiàn)了一個(gè)需求趟妥，并沒有進(jìn)一步優(yōu)化調(diào)整）

菜譜 - 底部.png

布局：
如圖即可猫态，底部加入菜單button也可以是sectionFooter，
雖然下廚房幾乎沒有邊框（有分割線）披摄，但仔細(xì)分析還是很好劃分的

② 作品

作品.png

布局

因?yàn)?code>關(guān)注動(dòng)態(tài)亲雪、買買買界面跟這個(gè)差不多，需要復(fù)用到這個(gè)界面的內(nèi)容疚膊，所以這整個(gè)界面是只有一個(gè)cell的tableView
上面是個(gè)圖片輪播器义辕，下面添加控件即可，描述Label以及用戶評(píng)論Label的高度是有內(nèi)容決定的寓盗，這個(gè)只需要在模型中添加一個(gè)labelHeight屬性灌砖，然后在內(nèi)部計(jì)算好高度，直接返回給控件就可以了傀蚌』裕控件部分可以根據(jù)不同界面顯示的不同效果，分割成若干部分善炫，然后給cell添加一個(gè)type屬性（枚舉類型）撩幽，創(chuàng)建的時(shí)候告訴cell屬于哪一種type，然后根據(jù)不同type進(jìn)行調(diào)整即可箩艺。

2. 導(dǎo)航

① 關(guān)注動(dòng)態(tài)

關(guān)注動(dòng)態(tài).gif

布局

整個(gè)界面就一個(gè)tableView窜醉，一個(gè)動(dòng)態(tài)為作品界面的cell

遇到的問題

圖片輪播器會(huì)受tableViewCell的復(fù)用機(jī)制影響，導(dǎo)致錯(cuò)亂（點(diǎn)贊按鈕的狀態(tài)是由服務(wù)器返回的數(shù)據(jù)決定的艺谆，這里我就不模擬了）
解決辦法：
在控制器中添加一個(gè)記錄圖片輪播器滾動(dòng)位置的數(shù)組屬性imageViewCurrentLocationArray
在圖片輪播器里實(shí)現(xiàn)scrollView代理方法酱虎，監(jiān)聽記錄最終的位移contentOffset.x，停止?jié)L動(dòng)后通過閉包/代理將位置數(shù)據(jù)傳遞到控制器擂涛，控制器將位置數(shù)據(jù)添加到記錄數(shù)組中即可读串，此方法應(yīng)該同樣適用其他因cell復(fù)用機(jī)制導(dǎo)致的數(shù)據(jù)顯示混亂問題，（關(guān)于數(shù)組的操作撒妈，應(yīng)考慮到：下拉刷新恢暖，上拉加載更多數(shù)據(jù)以及其他情況，詳細(xì)代碼見工程）
至于實(shí)現(xiàn)哪個(gè)代理方法最為合理狰右，應(yīng)該視實(shí)際的業(yè)務(wù)需求以及界面效果而定杰捂，下面的textField代理也是如此

// scrollView停止?jié)L動(dòng)后記錄contentOffset.x
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    !self.imageViewDidScrolledBlock ? : self.imageViewDidScrolledBlock(scrollView.contentOffset.x);
}

最后圖片輪播器添加一個(gè)屬性接口，接收位置數(shù)據(jù)棋蚌，然后在構(gòu)造方法里設(shè)置圖片輪播器的contentOffset即可

- (void)setImageViewCurrentLocation:(CGFloat)imageViewCurrentLocation {
    _imageViewCurrentLocation = imageViewCurrentLocation;
    
    // 恢復(fù)顯示collectionView滾動(dòng)的位置
    [self.collectionView setContentOffset:CGPointMake(imageViewCurrentLocation, 0)];

    // 恢復(fù)顯示pageLabel的下標(biāo)
    if (!self.pageLabel.hidden && self.imageArray.count) {
        NSInteger currentIndex = imageViewCurrentLocation / self.collectionView.frame.size.width + 1;
        self.pageLabel.text = [NSString stringWithFormat:@"%zd/%zd", currentIndex, self.imageArray.count];
    }
}

② 三餐

作品.png

布局

如圖嫁佳，整個(gè)控制器是ViewController挨队，將CollectionView以及上傳button添加到viewController.view即可，比較簡單
導(dǎo)航欄的標(biāo)題是自定義的view蒿往，然后self.navigationItem.titleView = view;即可

這個(gè)界面的接口號(hào)稱“時(shí)時(shí)死”盛垦，如果想看效果的童鞋可以自己重新抓包

3. 功能界面

① 菜譜草稿（整個(gè)項(xiàng)目最難的界面）

菜譜創(chuàng)建 - 上半部分.png

菜譜創(chuàng)建 - 下半部分.png

布局

如圖所示即可，需要注意的是：因?yàn)檫@個(gè)界面是操作本地?cái)?shù)據(jù)瓤漏，所以要時(shí)刻根據(jù)數(shù)據(jù)得變化判斷控件是否顯示腾夯、如何顯示

思路

因?yàn)槭莿?chuàng)建以及草稿功能的界面，所以操作的是本地?cái)?shù)據(jù)蔬充，我寫了一個(gè)菜譜草稿數(shù)據(jù)工具類蝶俱，用來增刪改查，非常方便
照片上傳：
點(diǎn)擊彈出ActionSheet讓用戶選擇是相機(jī)饥漫、還是相冊(cè)榨呆，然后通過UIImagePickerController的代理方法- imagePickerController:didFinishPickingMediaWithInfo:選取照片即可
因?yàn)?code>頂部跟做法都有上傳圖片的需求，如果不做判斷是誰需要設(shè)置圖片庸队，會(huì)導(dǎo)致數(shù)據(jù)顯示錯(cuò)亂积蜻，這個(gè)在代理方法中通過判斷代理的調(diào)用者即可解決圖片錯(cuò)亂

- (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info {
    // 如果是頂部大圖
    if (picker == self.headerPicker) {
        self.createRecipe.image = info[UIImagePickerControllerEditedImage];
    }
    // 如果是步驟圖
    else if (picker == self.instructPicker) {
        self.instructionArray[self.setImageIndex].image = info[UIImagePickerControllerEditedImage];
    }
    [self.tableView reloadData];
    [picker dismissViewControllerAnimated:YES completion:^{
        // 選取完成后更新本地?cái)?shù)據(jù)
        [self updateDarft];
    }];
}

草稿界面-做法.gif

做法步驟：
點(diǎn)擊添加步驟，往tableView對(duì)應(yīng)位置插入一行步驟cell皿哨，并且在模型數(shù)據(jù)數(shù)組對(duì)應(yīng)位置插入一個(gè)數(shù)據(jù)為空的做法數(shù)據(jù)浅侨，如果不添加的話，點(diǎn)擊編輯就會(huì)因?yàn)閿?shù)據(jù)越界導(dǎo)致崩潰

// 增加一行點(diǎn)擊回調(diào)
instructionFooter.addInstructionBlock = ^{
    // 添加一個(gè)空的本地?cái)?shù)據(jù)
    [weakSelf.instructionArray addObject:[[XCFCreateInstruction alloc] init]];
    NSInteger row = weakSelf.instructionArray.count - 1;
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:row inSection:1];
    // 插入cell
    [weakSelf.tableView insertRowsAtIndexPaths:@[indexPath]
                              withRowAnimation:UITableViewRowAnimationBottom];
};

點(diǎn)擊調(diào)整步驟证膨，執(zhí)行回調(diào)后tableView進(jìn)入對(duì)應(yīng)狀態(tài)如输，[self.tableView setEditing:YES animated:YES];，這里需要注意的問題有：
tableView中只有做法這一組cell才進(jìn)入編輯模式央勒，在代理方法-tableView:canMoveRowAtIndexPath:中判斷即可
需要設(shè)置cell目標(biāo)移動(dòng)的位置不见，即使其他組不能進(jìn)入編輯模式，但做法步驟cell還是能移動(dòng)插入其中崔步，所以需要設(shè)置：如果超過了做法步驟所在的section稳吮，不管怎么移動(dòng)，最終都回到做法步驟section
調(diào)整移動(dòng)了cell之后井濒，也需要同步數(shù)據(jù)中對(duì)應(yīng)做法步驟的位置

// 如果不是步驟數(shù)組灶似，就回到對(duì)應(yīng)位置
- (NSIndexPath *)tableView:(UITableView *)tableView
targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath *)sourceIndexPath
       toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath {
    NSIndexPath *finalIndexPath;
    // 如果拖動(dòng)到第0組，那么松手就插入第1組第0個(gè)
    if (proposedDestinationIndexPath.section == 0) {
        finalIndexPath = [NSIndexPath indexPathForRow:0 inSection:1];
    }
    // 如果拖動(dòng)到第1組瑞你，松手即插入目標(biāo)位置
    else if (proposedDestinationIndexPath.section == 1) {
        finalIndexPath = proposedDestinationIndexPath;
    }
    // 如果拖動(dòng)到第2組酪惭，那么松手就插入第1組最后一個(gè)
    else if (proposedDestinationIndexPath.section == 2) {
        finalIndexPath = [NSIndexPath indexPathForRow:self.instructionArray.count-1 inSection:1];
    }
    return finalIndexPath;
}

草稿界面-用料.gif

用料：
原理大致與做法步驟相同，只是用料的編輯是在一個(gè)新的控制器XCFIngredientEditController者甲，不管有無用料春感，點(diǎn)擊都進(jìn)入這個(gè)控制器，那么：
在XCFIngredientEditController中添加一個(gè)接口，接收已存在的用料數(shù)據(jù)鲫懒，如果數(shù)據(jù)為空嫩实，就默認(rèn)添加兩個(gè)示例cell，如果不為空窥岩，就顯示已存在的數(shù)據(jù)甲献，從而達(dá)到新增、編輯的效果
編輯完成或保存后谦秧，pop回創(chuàng)建菜譜控制器竟纳，并執(zhí)行回調(diào)將編輯好的用料數(shù)據(jù)回傳撵溃，刷新界面即可
因?yàn)楣俜降男Ч牵褐灰僮髁藬?shù)據(jù)疚鲤，即使不點(diǎn)擊保存，也會(huì)將數(shù)據(jù)保存起來缘挑，所以我在每個(gè)數(shù)據(jù)操作后面都更新了本地?cái)?shù)據(jù)[self updateDarft];

② 搜索

搜索界面.gif

搜索界面.png

布局

進(jìn)入搜索控制器時(shí)集歇，判斷本地?cái)?shù)據(jù)中是否有已經(jīng)搜索過的關(guān)鍵詞，有則加載语淘，沒有就不顯示第0組cell
輸入文字時(shí)诲宇，利用通知監(jiān)聽UITextFieldTextDidChangedNotification，然后通過閉包回傳textField的文字內(nèi)容給控制器惶翻，同時(shí)時(shí)刻刷新tableView即可
底部流行搜索關(guān)鍵詞是網(wǎng)絡(luò)數(shù)據(jù)加載的姑蓝，一個(gè)九宮格搞定

思路

因?yàn)闆]有接口，所以我封裝了一個(gè)本地單例類吕粗，保存搜索過的關(guān)鍵詞纺荧，并提供數(shù)據(jù)操作的方法
搜索：在本地?cái)?shù)據(jù)中遍歷是否已存在該關(guān)鍵詞，存在就將舊關(guān)鍵詞刪除颅筋，然后穿插新關(guān)鍵詞到第0位宙暇；如果不存在就直接插入到第0位即可（詳細(xì)代碼見工程）

③ 上傳作品

上傳作品.gif

布局

一個(gè)只有tableHeaderView的tableViewController搞定，官方App中圖片议泵、標(biāo)簽的添加會(huì)有動(dòng)畫占贫，我這里沒有實(shí)現(xiàn)，大概就是在改變控件frame值時(shí)添加動(dòng)畫即可

思路

本地工具類先口，并不需要進(jìn)行數(shù)據(jù)持久化型奥，通過回調(diào)就可以完成數(shù)據(jù)操作
需要注意的是：處理好圖片、標(biāo)簽長度的顯示以及換行

二碉京、市集

1. 商品

商品界面.png

布局

上面這部分我的實(shí)現(xiàn)方法是：全部作為一個(gè)tableHeaderView厢汹，然后內(nèi)部細(xì)分為3個(gè)部分，控制好布局就可以了
需要注意的是：商品優(yōu)惠（紅色邊框button）收夸、店鋪優(yōu)惠（橙色）坑匠，服務(wù)器返回的是字符串類型數(shù)據(jù)，這里我將優(yōu)惠信息以button展示（也可以Label）卧惜，因?yàn)閿?shù)據(jù)是動(dòng)態(tài)的厘灼，所以可以通過計(jì)算字符串最大寬度夹纫，然后加上既定的長度，即可設(shè)置每個(gè)button的不同大小

商品界面.gif

商品界面-評(píng)價(jià).gif

思路

整個(gè)控制器是UIViewController设凹，上面商品信息展示部分是tableView舰讹，下面圖文詳情界面是一個(gè)UIView（UIView上面放一個(gè)類似導(dǎo)航的標(biāo)簽view，下面為CollectionView闪朱，CollectionView的cell內(nèi)部添加tableView）月匣，設(shè)置好對(duì)應(yīng)frame即可
繼續(xù)拖動(dòng)，查看圖文詳情：
這個(gè)通過實(shí)現(xiàn)scrollView代理方法奋姿，判斷contentOffset.y的值是否達(dá)到預(yù)定值锄开，官方效果是：不必等到松手，達(dá)到即商品展示tableView和圖文詳情view同時(shí)進(jìn)行位移動(dòng)畫称诗，同時(shí)商品展示tableView.hidden = YES;萍悴，從而達(dá)到動(dòng)畫切換界面的效果。由圖文詳情切換回商品展示也是通過代理實(shí)現(xiàn)

// 向上拖動(dòng)到一定程度寓免，切換至圖文詳情界面
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 預(yù)定值為100
    if (scrollView.contentOffset.y > self.tableView.contentSize.height - self.tableView.frame.size.height + 100) {
        // 隱藏商品信息
        self.tableView.hidden = YES;
        // 動(dòng)畫
        [UIView animateWithDuration:0.5 animations:^{
            self.tableView.transform = CGAffineTransformMakeTranslation(0, -(self.view.bounds.size.height-44-64));
            self.imageTextView.transform = CGAffineTransformMakeTranslation(0, -(self.view.bounds.size.height-44));
        } completion:^(BOOL finished) {
            [UILabel showStats:@"未解決webView導(dǎo)致的內(nèi)存泄漏問題" atView:self.view];
        }];
    }
}

評(píng)價(jià)CollectionView手勢(shì)左滑切換控制器：
也是實(shí)現(xiàn)scrollView代理方法癣诱，通過回調(diào)切換控制器
曬圖/全部評(píng)價(jià)界面：
官方效果是：兩個(gè)tableView重疊在一起，點(diǎn)擊導(dǎo)航欄對(duì)應(yīng)按鈕設(shè)置tableView.hidden

2. 購物車

購物車.gif

布局

整個(gè)控制器是UIViewController袜香，self.view添加tableView跟底部的結(jié)算view
同一個(gè)店鋪的商品作為一組cell撕予，店鋪名為sectionHeader

思路（我設(shè)置了清空購物車就重新加載本地?cái)?shù)據(jù)）

官方是通過服務(wù)器接收數(shù)據(jù)顯示購物車內(nèi)容的，因?yàn)闆]接口所以我就新建了一個(gè)本地單例類蜈首，保存購物車的數(shù)據(jù)实抡，并提供數(shù)據(jù)操作方法
業(yè)務(wù)邏輯：
給每個(gè)商品添加一個(gè)XCFCartItemState枚舉類型屬性，記錄是否被選中疾就，點(diǎn)選商品勾選button后通過回調(diào)澜术，在控制器更改本地?cái)?shù)據(jù)。
店鋪勾選狀態(tài)以及全選狀態(tài)猬腰，通過遍歷本地?cái)?shù)據(jù)中對(duì)應(yīng)店鋪內(nèi)商品或所有商品是否全部選中鸟废，再通過點(diǎn)選商品回調(diào)刷新界面就可以達(dá)到實(shí)時(shí)更改狀態(tài)的效果了
商品購買數(shù)量：
在cell內(nèi)部實(shí)現(xiàn)textField代理方法-textFieldShouldEndEditing:監(jiān)聽購買數(shù)量，編輯完成就通過閉包傳遞購買數(shù)量給控制器姑荷，控制器更改本地?cái)?shù)據(jù)并刷新界面

    cell.itemNumberChangeBlock = ^(NSUInteger number) { // 修改商品個(gè)數(shù)回調(diào)
        // 拿到最新的數(shù)據(jù)盒延，再修改數(shù)量
        // 如果不拿到最新數(shù)據(jù)，在編輯商品數(shù)量時(shí)點(diǎn)擊店鋪全選 會(huì)導(dǎo)致正在編輯的商品無法同步選中狀態(tài)的bug
        NSArray *newShopArray = [XCFCartItemTool totalItems][indexPath.section];
        XCFCartItem *newItem = newShopArray[indexPath.row];
        // 修改數(shù)據(jù)中商品個(gè)數(shù)的值
        newItem.number = number;
        // 更新本地?cái)?shù)據(jù)
        [XCFCartItemTool updateItemAtIndexPath:indexPath withItem:newItem];
        // 刷新界面
        [weakSelf.tableView reloadData];
    };

切換編輯/刪除模式：
簡單的閉包回調(diào)刷新界面即可鼠冕，刪除的話添寺，根據(jù)商品狀態(tài)是否點(diǎn)選，點(diǎn)選就刪除懈费，因?yàn)辄c(diǎn)選狀態(tài)跟編輯模式是通用的计露，所以不需要另外計(jì)算

3. 確認(rèn)訂單

訂單 - 上半部分.png

訂單 - 下半部分.png

布局

如圖，需要注意的是：如果計(jì)算結(jié)果店鋪優(yōu)惠價(jià)格為0，就會(huì)隱藏店鋪優(yōu)惠

思路

直接拿到購物車界面勾選好的的商品票罐，通過計(jì)算顯示對(duì)應(yīng)價(jià)格數(shù)字就可以了（運(yùn)費(fèi)只添加一次）
選擇收貨地址叉趣，訪問本地存儲(chǔ)的收貨地址數(shù)據(jù)，有則顯示该押，沒有則提示添加
因?yàn)?del>沒錢沒見過訂單疗杉、優(yōu)惠長啥樣，所以就沒做了蚕礼，不過應(yīng)該就是tableView就可以搞定的

三烟具、社區(qū)

社區(qū).gif

思路

點(diǎn)選一個(gè)評(píng)論cell，就獲取該評(píng)論作者的昵稱奠蹬，賦值到底部的編輯框朝聋，然后在編輯控件內(nèi)判斷有無該字符串，有就刪除罩润，無則添加
當(dāng)編輯框內(nèi)玖翅，只要最后一個(gè)字符串為“@”翼馆，就顯示用戶tableView：利用通知監(jiān)聽UITextViewTextDidChangeNotification然后回調(diào)傳遞最后一個(gè)字符串到控制器割以，控制器判斷顯示

四、我

（因?yàn)槲沂裁磾?shù)據(jù)也沒有应媚，就沒做那些詳細(xì)界面了）

1. 個(gè)人資料

個(gè)人界面.gif

2. 收貨地址