由於內容龐大,製作過程特殊。請各位看官老爺們敬請期待。
由於阿達來自台灣,所以只有繁體字,還請各位多多體諒。
一行代碼一場夢。
今天為大家帶來的是如何使用apple新寵swift來搭建一個簡單的app 其中的功能包括了前導畫面,記錄資料,地圖導覽,推播分享。。。
完成之後的成果大致上如下圖
此篇文章是由swift所寫成的感興趣的小夥伴們可以來看看 沒有基礎的小夥伴們也可以試著來把代碼複製貼上,一樣可以運行喔XD 好了 進入主題 在這裡我們假設大家對於Xcode都已經有了基本的認識還有一些程序基礎所以就不多提了。今天我們會先建立一張顯示資料用的表格,並且將它美觀。那麼首先呢當然是建立一個新的專案 選擇Single ViewApplication,點擊 NEXT 填入專案名稱,身為超神級吃貨的阿達來說就叫他做FoodPin啦 記得語言的選擇是swift喔 接下來我們進入到Storyboard的畫面 在這裏,我們將不使用預設的視圖控制器,所以我們將它刪掉。點選StoryBoard上面的ViewController 按下delete,將它刪除。另外這個預設的viewcontroller 跟左邊欄位上面的 viewController.swift 是關聯的。所以我們也不需要他。點選這個檔案之後按下刪除(move to Trash) 接下來我們回到StoryBoard 中選擇 Table ViewController 將它拖曳到Storyboard 中。並且將他設定成『初始控制器』,也就是載入畫面的時後第一個視圖控制器。因此我們還需要在右手邊的屬性檢閱器中啟動『Is Inutual View Contrpller』。之後你就會看到旁邊多了一個箭頭。恭喜你 你成功了! 不知道大家會不會跟我一樣每次做到一個階段就會很興奮的按下 command+ R 來測試運行一下現在的成果。但是很明顯的就是現在還沒有方東西進去,所以我們將會得到一個空白的畫面。 好的,畫面完成了之後我們現在需要實做這個元件,首先我們需要產生跟這個tableview controller 關聯的檔案。 在資料夾的上面按右鍵,選取『New File 』 產生一個新的檔案,接下來選取『Cocoa Touch Class 』 完成了之後將會在旁邊看到多了這麼一個檔案,也就是你所生產的名稱。
接下來的步驟很重要,所以請大家務必要記得這麼做喔! 現在我們要將剛剛產生的ResturantTableViewController.swift檔案跟storyboard 上面的TableViewcontroller做連接。 在storyboard 上面的TableViewcontroller點擊一下之後選擇識別檢閱區,將裡面的『Custon Class』設定成ResturantTableViewController 完成了之後小夥伴們會看到左手邊的tableview controller 的名字已經變成了ResturantTableViewController 如此就說明了已經將兩者成功地連接了! 對了tableviecontroller上面還有一個要設定的地方。選取tbaleviewController裡面的cell,將他修改成Basic,並且將 indentifier設定成Cell. 好了,現在我們正式的完成使用者介面的部分。接下來我們可以進入程式的部分了。選取ResturantTableView.swift,並宣告一個實體變數來存放資料。 var restaurantNames =["Cafe Deadend", "Homei", "Teakha", "CafeLoisl", "Petite Oyster", "For Kee Restaurant","Po's Atelier", "Bourke Street Bakery", "Haigh'sChocolate", "Palomino Espresso", "Upstate","Traif", "Graham Avenue Meats", "Waffle &Wolf", "Five Leaves", "Cafe Lore","Confessional", "Barrafina", "Donostia","Royal Oak", "Thai Cafe"] UITableViewController 通常都預設了兩個方法的實作,但是通常都不符合我們的需求。所以我們要自己複寫他。將以下的部分加入RestaurantTableViewController中: override functableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{ return self.restaurantNames.count } 原本預設回傳 0 現在我們叫它回傳資料筆數的欄位,也就是說有幾筆資料,他就會出現幾個欄位。 override func tableView(tableView:UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) ->UITableViewCell { let cellIdentifier = "Cell" let cell =tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath:indexPath) as! UITableViewCell cell.textLabel!.text =restaurantNames[indexPath.row] return cell } 在這裡我們叫tablecell去抓一個叫做Cell的cell然後讓裡面的文字顯示出剛剛我們宣告的那個變數裡面的資料。 接下來,修改一下預設的回傳表格區塊(tablesection)的數字原本是零,但是很明顯我們需要一個區塊,所以將他修改成 一 。 好了,我們按下了運行來試試看?出來畫面應該是如下圖一般,接下來我們要加些圖片進去,小夥伴們可以點擊一下這個連接,裡面有阿達幫大家準備好的精美小圖 ,下載完成之後,將所有的圖片拖曳到『images.xcassets』 接著就是將這些圖片顯示在表格上啦,方法跟顯示文字是一樣的,小夥伴們可能很好奇,為什麼同樣的相片要準備這麼多尺寸,在這裡先簡單的說明一下。因為蘋果公司的上架審核非常的嚴格,所以以後在專案開發的時候最好是照規定準備符合各種螢幕尺寸的蒲片,這樣子上架會比較容易通過也比較美觀喔。 跟剛才一樣我們在準備一個變數陣列,來存放圖片的檔名。 var restaurantImages = ["cafedeadend.jpg", "homei.jpg","teakha.jpg", "cafeloisl.jpg","petiteoyster.jpg", "forkeerestaurant.jpg", "posatelier.jpg","bourkestreetbakery.jpg", "haighschocolate.jpg","palominoespresso.jpg", "upstate.jpg","traif.jpg", "grahamavenuemeats.jpg","wafflewolf.jpg", "fiveleaves.jpg","cafelore.jpg", "confessional.jpg","barrafina.jpg", "donostia.jpg", "royaloak.jpg", “thaicafe.jpg"] 然後在cellForAtindexPath的方法中加入一條程式: cell.imageView!.image = UIImage(named:restaurantImages[indexPath.row]) 修改好了之後的cellForAtindexPath方法應該是這樣的 接下來就是開心地按下 command+R啦! 感覺是不是好棒棒啊!我不知道小夥伴們是怎麼樣,可是我自己每次當程序願意照著自己腦海中的畫面來運行的時候都好開心啊!
|