讓不懂編程的人愛上iPhone開發系列2 iOS12+Swift4.2版-Checklists-2
說明:
本系列教程改編自raywenderlich.com中的iOS Apprentice系列,有需要的童鞋請移步到這裡購買英文版原教程:
https://store.raywenderlich.com/products/ios-apprentice歡迎繼續我們的學習。
現在大家已經有了清晰的目標,那就是做一個簡單的GTD工具,並且具備三項基本功能。
忘了有哪些功能了嗎?先讓我們再回顧一下:
1.幫你整理要完成的事務清單
2.一旦完成某一件事務就將其勾選
3.對於還沒有完成的事務設置一個reminder提醒,讓iPhone在指定的日期時間提醒你,即便你沒有打開這款應用。
在本課的內容中,我們首先要完成兩個基礎任務:
1.認識Table view和Navigation Controller
2.對Checklists應用進行整體上的界面設計
就這麼愉快的決定了~
Table views(表視圖) 和navigation controller(導航控制器)
在上一個系列的課程中,我們接觸到了幾種比較常用的UI元素:UIView,WebView,以及一系列的UI控制項,包括Button,Slider,Label等等。
接下來我們講學習iOS開發中非常重要的兩個UI界面元素-表視圖和導航控制器。
Table view(表視圖):
雖然名字叫表視圖,但是跟我們日常生活中所見到的表(比如excel表格)還是略有些不同。
在iOS應用中,通常使用表視圖來顯示列表。在Checklists這款應用中,每一個界面都用到了一個表視圖(table view)。實際上,我們這款應用中所有的界面都是由table view構成的。這個界?面元素功能強?無比,也是iOS開發學習中需要掌握的最重要元素之?一。
導航控制器(navigation controller):
通過使用導航控制器,我們可以輕鬆的創建應用界面的層級體系,方便從一個界面跳轉到另一個界面。navigation controller會在界面的頂部添加一個導航欄,其中包含了一個標題,以及一個返回按鈕。
舉例而言,在我們這個應用中,當我們觸碰清單上某個列表的名稱,比如「工作」,就會通過一個平滑的動畫跳轉到一個新的界面,其中列出了所有該列表所對應的待辦事務。而觸碰返回按鈕又可以跳轉回之前的界面。這就是navigation controller的作用,毫無疑問的是,大家肯定在自己手機里的某個app上體驗過。
需要注意的是,table view和navigation controller是一對好基友,因此我們通常會一起使用它們:

小練習:
現在打開自己的iPhone,看看裡面的幾款官方應用,比如日曆??,Messages,備忘錄,提醒事件,郵件,設置等等。你會發現雖然它們的外觀有些不同之處,但是工作方式其實是差不多的。
這是因為它們都使用了table view和navigation controller。

上面的Music音樂??應用還多了一個底部的tab bar,Don』t panice!我們在後續的內容會學到~
當我們學完這個系列的教程後,將會對view controller(視圖控制器),table view(表視圖)和 delegate(代理)的概念輕車熟路,即便在夢中你也能開發出?款應?(當然,更多的時候你的夢中出現的或許是錦鯉)~
本系列的教程會很長,裡面包含了大量的源代碼,所以最好可以專門抽一點時間來全心學習。在這個過程中,建議大家多改動代碼,即便讓應用崩潰了也沒關係~學習編程的最好方式就是自己寫,自己改。
但是,要提醒大家的是,請大家也務必不要走極端。鼓勵大家改代碼的目的是為了更好的理解當前的項目代碼,為自己打好基礎。但也有些童鞋可能會比較著急,在還沒有很好的理解當前項目和代碼的基礎上,就嘗試著增加更多的功能,或者把其它應用的功能直接嫁接過來。
這樣做也未嘗不可,但是一個前提就是,你是否真正理解了當前的項目,代碼和所涉及到的基礎知識。如果還沒有,建議先把課程學完,確保自己可以拋開教程也可以獨立完成這個應用。然後,再考慮添加自己所需要的其它功能。
聽起來似乎有點矛盾,但除非你生來就是一個編程天才,否則打好基礎還是很重要的~
此外,如果在學習的過程中遇到了一些小小的障礙,Don』t panic~請相信困難都是暫時的,只要堅持繼續學習和練習,你所遇到的問題都會在後續的學習中豁然開朗。
好了,別忘了我們這一課還有另外一個重要的任務要做,那就是:從整體上設計Checklists應用。
在介紹Checklists應用的設計之前,我們先來扯一扯產品需求文檔的事情。如果本身就是PM出身的童鞋,可以完全跳過這一段不用看了~
什麼是PRD(產品需求文檔)?
通常來說,在我們動手開發一款應用之前,首先要有產品的策劃案,如果進一步細分可能還會有BRD(商業需求文檔),MRD(市場需求文檔),和PRD(產品需求文檔)。其中PRD就是Product requirement document(產品需求文檔)的縮寫。
在實際的開發工作中,PRD是團隊溝通的基礎,無論是開發工程師,測試工程師,產品經理,項目經理,UI/UX,運營還有商務,都需要對PRD有足夠深入的認識,並且盡量可以達成共識。比如:


如果大家不能就PRD達成共識,或者在產品開發的過程中隨意更改PRD和產品需求,必然會導致一系列的流淚甚至流血事件~

所以,一個不懂產品設計的程序員會過的很悲慘,不管是在團隊裡面跟大家合作,還是自己一個人單幹。
即便你是一個獨立開發者,最好也要對自己想開發的產品撰寫一個基本的PRD。甚至可以說獨立開發者不但從技術上要做到」全棧「,也要對財務,市場,設計,程序,運營無所不能~
PRD的基本內容通常包括產品的簡單概述及目標,產品的開發路線圖,產品的目標用戶,產品的需求描述(可能包括業務流程圖,運行環境,開發里程碑等等),產品的功能描述(包括業務邏輯、界面交互原型、產品功能流程等等),產品的投入產出分析(產品開發成本,其它成本,收益預測等等)。
考慮到我們的課程不是教大家如何成為一個合格的產品經理,所以就不在這裡展開細講了。
關於PM的那些事,大家感興趣的話可以去看一個網站「人人都是產品經理」,http://www.woshipm.com/
不過需要再次強調的是,不管是打工還是單幹,一個完全不懂或者不關心產品的程序往往會活得很痛苦,甚至會被排擠,被打壓,這跟你的技術有多麼的NB關係不大。
說到這裡,強烈推薦前兩天張小龍在微信公開課上長達4個小時的演講,

2019微信公開課張小龍4小時演講完整版
好了,這裡就不再多廢話了~
講了這麼多,關於Checklists的產品界面和交互設計,就直接上圖了。至於其它的PRD文檔細節,建議大家可以自己來嘗試寫一下,哪怕你就只想當好一個程序猿,最好也認真嚴肅的做一下這個事情,絕對沒有壞處。

讓我們按照數字編號順序來詳細解釋一下吧:
1.在首界面中,主要顯示了所有的分類事務清單。我們可以創建多個分類清單來管理自己的代辦事務。
每個checklist都包含了名稱,圖標,以及0或多個待辦事項。
觸碰頂部右側的+號,或者list右側的i信息圖標就可以進入界面2.
觸碰list所在的行就可以進入界面4.
2.我們可以通過界面2來添加和編輯分類事務清單
3.我們可以通過界面3來編輯清單所對應的圖標。
4.界面4中顯示了某個分類清單下所有的待辦事務。
觸碰屏幕右上端的+號,或是任一行右側的i信息符號,可以進入界面5.
5.我們可以通過界面5來添加和編輯某個分類事務清單中的待辦事務。
觸碰界面5中的date可以進入界面6.
6.我們可以通過界面6來設置某個待辦事務的截止時間。
需要注意的是,對於設置了」提醒我「選項的待辦事項,即便沒有打開Checklists應用,用戶依然會收到推送的通知。這一點還是很酷的~
在繼續學習之前,大家可以打開最終的項目,然後感受到這款應用的功能~
當然還是要強調一下本系列教程所使用的開發環境:
1.Xcode 10.1及以後的版本
注意一定要使用正式版,不要耍酷玩beta版,對於新手真心不建議用各類軟體的beta版,包括Unity啥的也一樣,不然會死的很慘,而且經常碰到莫名其妙的bug~
2.Swift4.2
Swift有點坑的是語法特性也是變來變去,雖然大的方面沒有改變,但有的小細節調整經常讓人猝不及防,所以,還是穩著點
3.iOS12.x
這個其實還好了,主要是跟Xcode一樣,盡量使用正式版,不要用beta版。
好了,本課的內容就先到這裡了,從下一課開始我們就要正式構建這個項目了,做好準備吧~
最後送上福利。


答疑說明:
1.為了方便大家對課程中的問題提問,創建了一個問答社區。大家後續有開發相關的問題請到課程答疑專區提問http://icode.fun/ask/forum.php
2.請大家在提問之前建議先看一下這個帖子:http://icode.fun/ask/forum.php?mod=viewthread&tid=5&extra=page%3D1
聯繫方式:
QQ討論群:375143733
個人微信: iseedo
公眾號:icodefun
推薦閱讀:
TAG:iOS開發 | iPhone | 蘋果公司(AppleInc.) |