自學 iOS - 三十天三十個 Swift 項目

整個#30daysSwift 自學計劃完全是受到 Sam Lu 的靈感啟發,他在 100天內持續學 Swift 寫了 40個小項目, 我也是在看了他1月5日發出來的 Medium 文章后立即決定也開始自己的 30天自學計劃,每天寫一個小項目,如果有天沒寫也可以在周末的時候多寫幾個補上。因為其實對 Swift 基礎語法并還沒有太懂,我是一邊看基礎語法和一邊 Google 一堆網絡上的文章或視頻 Swift 初學者教程來做項目。

Sam Lu 并沒有把自己的項目代碼公開出來,但是我自己還是挺想嘗試一下開源,可以給那些也是 Swift 初學者的人一點點「啟發」,因為也正是因為「開源精神」,互聯網上才會有諸多的「教程」,以下是這30個小項目的 Github 鏈接

https://github.com/allenwong/30DaysofSwift


Project 1 - Simple Stop Watch

1)NSTimer 來做定時器:NSTimer.scheduledTimerWithTimeInterval;

2)開始、暫停以及重新計時三個功能;


Project 2 - Custom Font

1)看到 @dingyi 在 Twitter 上說,「造字工房」目前授權個人免費非商業使用,所以捐款了1元,下了3款字體用來做試驗,分別是造字工房勁黑,致黑和童心;

2)拖入字體文件.ttf 或 .otf 到工程中,配置 Info.plist - Fonts provided by application, 然后在 Build Phases - Copy Bundle Resources 里增加字體;

3)需要用到下面一個小技巧來快速查找 FamilyName,找到后就可以使用,Code就可刪:

for family in UIFont.familyNames() {

? ? ? for font in UIFont.fontNamesForFamilyName(family) {

? ? ? ? ? ?print(font)

? ? ? }

}


Project 3 - Play Local Video

1)import AVKit 和 AVFondation,就可以使用系統的視頻播放器了;

2)跟 Project 2里的字體一樣,如果要build 在 iPhone 看到視頻,那么也需要 Copy Bundle Resources添加下視頻資源,這樣就行了;

3)順便復習了下 UITableView 和 UITableViewCell 的使用方式;


Project 4 - Snapchat Menu & Camera

1) Snapchat 的三屏劃動很經典,用到 UIScrollView 來實現三屏劃動,定義了3個 ViewController;

2)左和右其實就是個Snapchat 界面截圖ImageView,哈哈,所以把 Status Bar 給隱藏了,UIApplication.sharedApplication().statusBarHidden=true;

3)CameraView 部分有點小復雜,用到了UIImagePickerControllerDelegate里的 API?(不懂該叫什么)

var captureSession :AVCaptureSession?

var stillImageOutput :AVCaptureStillImageOutput?

var previewLayer :AVCaptureVideoPreviewLayer?


Project 5 - Carousel Effect

1) 照片橫屏劃動的旋轉木馬效果,用 UICollectionViewDataSource 來實現的,每一個卡片是一個 CollectionViewCell;

2)需要在 Collection View 里的 Scroll Direction 設置為水平滾動;

3)復習了一遍 Visual Effect View的使用,已經嵌入到 ImageView 里做 clipsToBounds;


Project 6 - Get user's current location

1)先實現地理位置權限的獲取,需要在 info.plist 里增加 NSLocationAlwaysUsageDescription (輸入告知用戶為什么要用地理位置權限的原因)和 NSLocationWhenInUseUsageDescription;

2)導入 CoreLocation Framework,使用 CLLocationManagerDelegate 里的CLPlacemark來獲取城市、省份和國家,其實還需要 areasOfInterest,只是不知道為什么沒有生效;


Project 7 - Pull To Refresh and load data

1)UIRefreshController 來實現下拉刷新,可以改背景色,菊花顏色,文字顏色和大小,attributedTitle的字體顏色困擾了我好久,用到以下方式實現:

let attributes = [NSForegroundColorAttributeName:UIColor.whiteColor()]

self.refreshControl.attributedTitle = NSAttributedString(string:"Last updated on\(NSDate())", attributes: attributes)

2)這次 tableView 都是用代碼實現的,所以看過去 Y 軸的位置沒有居于 UINavigationBar 之下,但是no-storyboarding 的好處就是學會了 tableView 的很多屬性,其實跟 sb 也差不多,對于習慣的人來說確實也非常快,怪不得我之前認識的胖子一直是用代碼寫 UI,極少用sb;

3)refreshControl 里的 addTarget 可以做 forControlEvents: .ValueChanged,這樣我就可以在下拉刷新的時候把第二組的數據加載出來, This's it!

4)代碼寫 UINavigationBar 沒法設置 title 啊,topItem,還是 navigationbarItem 都試了;


Project 8 - Random Color Gradient

1)我本來想以后做一個 App 可以「聽」外界音樂的 beats來進行屏幕背景色的跳動,這樣幾十臺手機一起放在一起,覺得會很震驚,不過我還沒這么強可以開發這類應用,所以這次先實現背景漸變色的隨機變換,當然也插入了背景音樂,只是沒有「聽」的功能,效果比較魔性;

2)學會了用 CAGradientLayer 來做背景的漸變色,漸變色分為兩層,后一層決定了整個效果為什么顏色會變化的原因,前面一層是設定好了漸變色顏色、位置和startPoint endPoint;

3)后一層是實現原理就是隨機變化純色即可,對 RGB三色進行了賦值,比如 redValue = CGFloat(drand48()),這樣整個背景顏色可以在256個顏色里隨機變化;


Project 9 - Image Scroller

1)放大縮小和水平垂直滾動查看圖片大圖,類似在 iMessage 里查看圖片一樣的效果;

2)先是套 UIImageView 到 UIScrollView 里,在 setZoomScaleFor(srollViewSize:CGSize),最大縮放指為原圖的3倍;

3)最后回到最初界面的中心,recenterImage();


Project 10 - Video Background

1)一個酷炫的且不是很大的視頻作為Splash 界面的背景元素,是足以讓用戶第一時間感受到這個應用的場景和價值,Spotify 就是個很好的例子,里面用到的素材也是來自 Spotify for iOS;

2)這次是用了一個自定義 VC: VideoSplashViewController,可以方便的使用到AVPlayerViewController里東西;

3)fillMode = .ResizeAspectFill,然后就是始終是 loop 的:alwaysRepeat=true;

4)記得視頻文件始終要 copy 到 bundle resources 里去;


Project 11 - Clear Prioritize TableViewCell

1)Clear App 的界面和交互非常的驚艷,已經驚艷了好幾年了,所以這次想實現一下梯度漸變色的 TableView,當然不僅只是單色,還增加了cell 內的漸變色;

2)使用以下方法來實現梯度漸變:

func colorforIndex(index:Int) -> UIColor {

? ? ? let itemCount = tableData.count - 1

? ? ? let color = (CGFloat(index) / CGFloat(itemCount)) * 0.6

? ? ? return UIColor(red:1.0, ?green: color, ?blue:0.0, ?alpha:1.0)

}

3)在代碼里直接去掉了tableview 的分割線和隱藏了點擊 cell 的選中顏色:

self.tableView.separatorStyle = UITableViewCellSeparatorStyle.None

cell.selectionStyle = UITableViewCellSelectionStyle.None


Project 12 - Simple Login Animation

1)開始學 iOS 動畫了,看了基本視圖動畫,彈性 Spring 動畫,關鍵楨動畫以及視圖轉化,都實在是太有意思了,因為本身我在用 Principle 做原型設計的時候也是用到這些東西,只是此前不知道怎么用代碼實現,當然現在也只是剛開始接觸,所以學寫了一個登錄界面過渡動畫,已經點擊 Login 按鈕bounds.size.width+60變寬一下代表 self.loginButton.enabled=false;

2)viewWillAppear 先設定好2個 UITextField Center.X 約束的初始值,然后才在 viewDidAppear里寫 UIView.animateWithDuration(_:, delay:, options:, animations:, completion:),這應該是寫動畫的過程;

3)Tips: 一開始沒法改 UITextField 的高度,后來是用約束的方式來 Update Frames 實現的;


Project 13 - Animate TableViewCell

1)TableViewController 之間的TableViewCell 過場動畫,TableViewCell 的梯度漸變之間就采用了 Project-11 里的代碼;

2)tableView 是有visibleCells的,這樣可以先在載入前讓 Cells不可見,然后到放到界面最底部然后向上載入上來;

3)這次是用 Spring 動畫來實現如此「彈性」的效果:usingSpringWithDamping:0.8, initialSpringVelocity:0,其實也是非常基礎的動畫;


Project 14 - Emoji Slot Machine

1)今天主要是為了 Build for fun,用 UIPickerView 實現了 Emoji 老虎機小游戲;

2)arc4random( )做隨機亂排Emoji,三行三列Emoji;

3)如果第一列的 Emoji == 第二列 && 第二列 == 第三列,那么就會出現 Bingo!的結果,反之都是??,GIF演示中的 resultLabel layout 不太對,后來修復了,因為要重新錄到三個一樣其實概率還是很低的,當然這個概率是可以設定的;

4)點擊 UIButton 的動畫效果也在之后完成了,沒有出現在這個 GIF 演示中;

5)分享一個 MacOS 上快速輸入 Emoji 的小技巧:按下 Control + Command + 空格鍵就可以了;


Project 15 -? Animated Splash

1)Twitter 的啟動動畫一直是個經典,小鳥 Logo 居中停留然后放大帶出整個界面,是個令人愉悅的過程;

2)LaunchScreen.storyboard 設定好View 的藍色背景和放入Twitter 小鳥的圖,代碼是寫在AppDelegate 里的;

3)區別于原來的 Twitter App 動畫,這次是把小鳥當成 Mask 來用,用CAKeyframeAnimation,設定3個Bounds的值,進行過渡就可以實現放大動畫。

let ?initalBounds =NSValue(CGRect:mask!.bounds)

let ?secondBounds =NSValue(CGRect:CGRect(x:0, y:0, width:90, height:73))

let ?finalBounds =NSValue(CGRect:CGRect(x:0, y:0, width:1600, height:1300))


Project 16 - Slide Menu Transition

1)特別沒有使用三條杠的Hamburger icon,而是真用了一個漢堡 Emoji ??來做菜單圖標:)

2)2個 VC,用 Segue 做轉場,自建 MenuTransitionManagerDelegate 協議,在第一個 VC 里引入,moveDown 到 container!.frame.height -150 這個位置,選中Menu 后第二個 VC 就moveUp 到 -50 的位置;

3)增加 UITapGestureRecognizer,可以點擊非 MenuTableViewCell 部分也可以 dismiss;


Project 17 - Tumblr Menu

1)這個是 Tumblr 老版本iOS 內創建新 Post 的轉場動畫,新版本有了更炫的新動畫;

2)跟 Project 16 一樣也是2個 VC,1個 MenuTransitionManager 來實現的,看來這是實現 VC 之間轉場動畫(同時保留上一層 VC)的「標準方式」?

3)連了13個 IBOutlet 也是醉了,因為圖標和文字都可以按 Delay 時間不同時候出現依次出現,在 MenuTransitionManager 引入 UIViewControllerTransitioningDelegate 來實現動畫,包括背景模糊透明透出第一個 VC;

4)Menu 其實是分為三組,設定 topRowOffset middleRowOffset bottomRowOffset 分別為 CGFloat 300 150 50,所以在 transform 時 Text 和 Photo 為 self.offstage(-topRowOffset) 和 self.offstage(topRowOffset)依次對應,下面2組也是同理;

5)不過不知道是不是加了背景 Visual Effect View的關系,感覺會「閃」一下,還沒有找到辦法解決;


Project 18 - Limit Character

1)限定 UITextView 輸入字符,跟 Twitter 微博一樣做140字的限制,然后就無法再輸得動了,一開始是 UITextField 嘗試,發現不能換行,屁啊,趕緊換到 UITextView 來;

2)底部一行 UIView 在 viewDidLoad()里做了2個 NSNotificationCenter,通知隨著鍵盤上升和 dismiss;

3)利用 UITextViewDelegate 里的shouldChangeTextInRange方法來實現輸入字符的限制,如果 range.length >140就輸入不可用,最右小角的實時字符倒數即使用 "\(140- myTextViewString.characters.count)"來實現;

4)UI Copy 自第三方 Twitter 客戶端 Twitterrific


Project 19 - Custom Pull-To-Refresh

1)在 Project 7 時我做了下拉刷新和加載出數據,但是下拉刷新的樣式還是系統的菊花樣式,所以這次進行自定義下拉刷新的嘗試,用單個文字變色旋轉和放大的簡單動畫;

2)新建RefreshContents.xib 專門來放刷新用的12個 UILabels,不用連接到 ViewController,用 viewWithTag()來指定;

3)刷新動畫分為兩步,所以建了2步的方法,animateRefreshStep1() 和 animateRefreshStep2(),第一步是旋轉 CGAffineTransformMakeRotation(CGFloat(M_PI_4)) 和 textColor 變隨機色 self.getNextColor() (這個是新建的隨機色方法),第二步就更為簡單了就是做放大動畫,全部 Scale 到 CGAffineTransformMakeScale(1.5,1.5);

4)因為沒有真實數據的關系,這個小試驗是用 NSTimer.scheduledTimerWithTimeInterval 來穩定5秒做的效果,真實項目里肯定是不用這個的;


Project 20 - UICollectionView Animation

1)啊啊啊啊,這個效果其實挺爛的,但是 UICollectionView 的平滑轉場我們應該經常看到,特別是 List 和 Details 之間,比如商品列表和商品詳情,新聞列表和新聞全文;

2)這其實是一個 VC,詳情界面里只是多了個返回icon,在 func collectionView didSelectItemAtIndexPath 里點擊后執行轉場動畫,把 Cell 帶到最前層次 cell?.superview?.bringSubviewToFront(cell!) ,然后 cell?.frame= collectionView.bounds 就可以變大到全屏,通過這個示例也幫助了我理解了 frame 和 bounds 的區別;

3)在 func backButtonDidTouch() 里記得要讓 CollectionView reloadItemsAtIndexPaths 一下;


Project 21 - Swipeable Cell

1)滑動Cell 進行相關操作這個交互最經典的應用就是Mailbox 展現的,以至于之后的 iOS 7也引入了系統滑動 Cell 交互,所以可以直接在 tableView editActionsForRowAtIndexPath來自己執行 UITableViewRowAction;

2)iOS 在設計上的建議是用純文字來顯示,但是我們也可以用圖標加文字的方式變得更形象,可惜Google 了一圈還是沒找純粹用自定義的 icon 來代替,所以只能在 title 里加Emoji 和空格來實現,不知道看到的人有什么好的方法;

let delete = UITableViewRowAction(style: .Normal, title:"??\nDelete") { action, indexin}

3)點擊分享的操作調起系統分享控件,是用簡單的 UIActivityViewController就可以做到;


Project 22 - 3D Touch Quick Action

1)3D Touch 快捷方式是一開始需要在info.plist 里配置 UIApplicationShortcutItems,如下圖,我分別配置了我最想要的3個快捷方式,在設置 App 里切換 WiFI,在 NikePlus 里快速開始跑步,照相機里掃描二維碼;

2)UIApplicationShortcutItemIconFile 是配置自定義圖標,UIApplicationShortcutItemTitle 配置快捷名字,當然也可以配置二級標題;

3)選中快捷方式后進入對應的 VC;

window!.rootViewController?.presentViewController(vc, animated:true, completion:nil)


Project 23 - Slide Out Menu

1)手勢側滑菜單進行 VC 之間的切換,使用了 SWRevealViewController 這個開源項目,這讓這一切變得真的簡單過分了;

2)側滑出來的這個 TableViewController 繼承了RevealViewController,然后在每一個 VC 的 ViewDidLoad() 里加入如下代碼即可進行手勢側滑;

self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())


Project 24 - Mosaic Layouts

1)馬賽克照片布局可以調整每行的照片張數等等,用了開源的 FMMosaicLayout

2)學會了用Terminal 安裝 Pod,使用開源項目;

3)整個布局是明顯的 UICollectionView,FMMosaicLayout 支持可計算的 size 變化;

return ?indexPath.item % 7 == 0 ? FMMosaicCellSize.Big : FMMosaicCellSize.Small


Project 25 - UIView Basic Animations

1)今天返回學一下動畫最基礎東西,分別是 Position, Opacity, Scale, Color, Rotation,不管是多酷炫多復雜的動畫都是這些基礎的累加,本示例里的動畫都寫在 viewDidAppear() 里;

2)Position: 3個 UIView 進行位置的移動和高度的改變做了一個 -_- 表情;

3)Opacity: 改變ImageView 的 alpha 即可;

4)Scale:? 一開始在布 SB 的小一點,然后執行放大Spring動畫到 CGAffineTransformMakeScale(2,2), 很明顯 alpha 也從0 到1會比較和諧一點;

5)Color: 改變UIView 和 Label 的 textcolor 即可;

6)Rotation: 這個有點好玩了,可以做抽獎輪盤的旋轉啊,新寫了個 func spin() ,在transform的時候 CGAffineTransformRotate(self.rotationImageView.transform,CGFloat(M_PI)),然后在完成動畫后再加入 self.spin() 就可以一直不停旋轉了,不然選擇只會執行一次;


Project 26 - CoreData App

1)CoreData 還是挺酷的東西,雖然到現在也不太理解,貌似可以代替數據庫的東西;

2)這個基于 CoreData 的 To Do App 可以增加新的 To-do,刪除然后下次打開回來還是跟之前刪除之后的一樣;

3)需要在 Coredata 文件里的新建一個實體 ListEntity,和新的item: String 的屬性;

4)記得創建項目或者單個文件的時候一定要勾選 CoreDada;


Project 27 - Tab Bar Switch

1)用 TabbarController 加 NavigationController 在 Storyboard 布置下即可實現一個完整的 App 的最基礎信息架構的交互,很多App 和數據表明底部的 Tabbar 導航模式比側滑或者 Android 頂部的導航更讓用戶接受,幾乎不需要寫一行代碼就可以實現;

2)為了讓整個效果更接近是一個 App,第一個 Tab 的是加入了動態Spring 效果的 TableViewCell,而后面兩個 Tab是假的,僅僅只是 UIImageView??;


Project 28 - Spotlight Search

1)iOS 8 之后即可支持在 iOS Spotlight 里搜索第三方應用的數據了,為了做到你的 App 內的數據是 searchable 的,要先新建一個 MoviesData.plist 里配置下數據屬性;

2)在工程 - General - Linked Frameworks and Libraries 里添加 CoreSpotlight 和 MobileCoreServices 框架,這樣就可以用使用 CSSearchableItem 的屬性了;

3)在 Spotlight 里的界面也是類似自定義下拉刷新新建的 xib;


Project 29 - iMessage Image Picker

1)在App 注冊的時候添加頭像往往是一個必要的一步,大部分人是直接從相冊選個頭像的,所以為了方便快速從相冊選圖使用 iMessage 里照片發送的交互會是個比較好的選擇;

2)在默認頭像上加了 Tap Gesture Recognizer,調用相冊的方法就在這個 Tap 方法里寫,同時需要import Photos,當然做到 iMessage 的交互比較復雜,就直接用了 ImagePickerSheetController 這個開源項目;


Project 30 - WiKiFace

1)WiKiFace 是個屬于完整功能的Tiny App 了,因為功能就是幫你搜索名人的人名匹配到維基百科的縮略圖里的人臉部分,使用到的是維基百科的 API,和 ImageIO 里的 CIFaceFeature;

2)在 func textFieldShouldReturn() 里執行輸入人名后去調 API 里的照片try WikiFace.faceForPerson,WikiFace.swfit 里調到照片后,就需要識別照片里的人臉并且居中;

3)Is it cool?


結尾

應該沒有人看到這里吧?因為春節假期和老家網絡不太好的關系,文章到現才整理出來(整理的過程其實也 review 了一遍代碼)。過去的30天每天都擠出時間寫一點代碼,這是今年第一個堅持完成的30天挑戰計劃,接下來會繼續看更多的 Swift 基礎和接著做一枚 APP。我大部分時候是同步Project 進度信息在 Twitter?/?Instagram?/ Dribbble?和 Facebook,有興趣的人可以關注:)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容