A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

由於內容龐大,製作過程特殊。請各位看官老爺們敬請期待。
由於阿達來自台灣,所以只有繁體字,還請各位多多體諒。
一行代碼一場夢。

今天為大家帶來的是如何使用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啦!

感覺是不是好棒棒啊!我不知道小夥伴們是怎麼樣,可是我自己每次當程序願意照著自己腦海中的畫面來運行的時候都好開心啊!   

评分

参与人数 3技术分 +7 收起 理由
黑妞 + 3 很给力!
狮子王 + 1 很给力!
柳柳桑 + 3 很给力!

查看全部评分

64 个回复

正序浏览
欣赏!!!
回复 使用道具 举报
现在我还看不懂.
回复 使用道具 举报
学习一下 学习一下
回复 使用道具 举报
太高大上了,等我学完OC再慢慢看吧
回复 使用道具 举报
感谢分享!好东西啊啊
回复 使用道具 举报
cuin 中级黑马 2015-6-28 16:51:27
63#
感谢分享!!!受教了
回复 使用道具 举报
感谢阿达分享
回复 使用道具 举报
lipeng524824 来自手机 中级黑马 2015-6-28 15:45:44
61#
好东西 受用了 谢啦
回复 使用道具 举报
lipeng524824 来自手机 中级黑马 2015-6-28 15:44:14
60#
好东西 受用了 谢啦
回复 使用道具 举报
每天敲6小时的代码,一定会进步的。
回复 使用道具 举报
lipeng524824 来自手机 中级黑马 2015-6-28 15:35:30
58#
好厉害的说  
回复 使用道具 举报
小白先 mark 了
回复 使用道具 举报
好厉害啊,不过好长,很久才看完
回复 使用道具 举报
繁体字看着 好伤神!不过还是要点赞!
回复 使用道具 举报
感觉深奥啊
回复 使用道具 举报

別光看著~ 跟著做吧!
回复 使用道具 举报

應該的,希望小夥伴們不嫌棄
回复 使用道具 举报
Theshy 发表于 2015-6-28 00:21
哇~~   后边就有swift 课程~~   
写的很详细  看好你哦~

感謝看好,阿達會好好學習 不負眾望
回复 使用道具 举报

感謝到來,喜歡的話可以跟著做喔 ,這樣子老師講的時候會更有印象
回复 使用道具 举报
1234下一页
您需要登录后才可以回帖 登录 | 加入黑马