Xcode 4開發第一個iPhone程序 圖文實例(下)
Xcode 4開發第一個iPhone程序 圖文實例(下)是 本文介紹的內容,接著Xcode 4開發第一個iPhone程序 圖文實例(上)繼續介紹。
項目開發
熟悉Xcode 4
經過前期的準備工作后,現在可以開始基于Xcode4進行實際的項目開發。對于Xcode4,在iOS Dev Center中,找到“Xcode 4 User Guide”,這是一個專門針對Xcode 4的說明和使用指南,非常詳細。
在Xcode 4中,整合了原來專門用來編輯Mac或iOS項目界面的Interface Builder軟件,“Xcode 4 User Guide”中專門有一章“Designing User Interfaces in Xcode”來講述如何在Xcode 4中編輯界面。
創建新項目
啟動Xcode4后,首先會有一個歡迎窗口,通過它,點擊“Create a new Xcode project”,可以直接開始創建項目
當然也可以通過菜單或者快捷方式來開始創建新項目
選擇新項目模板
為方便生成項目,Xcode4默認提供了幾種項目模板:
Navigation-based Application: 該模板適用與需要界面導航的應用,基于該模板生成的應用程序,帶一個導航,顯示一個列表項
OpenGL ES Application: 該模板適用于基于OpenGL ES的應用程序,例如游戲類程序。基于該模板生成的應用程序,帶一個用來輸出OpenGL ES場景的視圖和一個支持動畫的視圖
Splite View-based Application: 該模板適用于需要用到左右分欄視圖的iPad程序,基于該模板生成的應用程序,提供了一個左右分欄的界面控件
Tab Bar Application: 該模板適用于適用采用標簽頁的應用程序,基于該模板生成的應用程序,默認帶有標簽頁
Utility Application: 該模板適用與有一個主界面和一個信息頁的應用,基于該模板生成的應用程序,主界面上有一個信息按鈕,點擊后,有一個翻轉動畫,切換到另一個信息界面
View-based Application: 該模板適用于單一界面的應用,基于該模板生成的應用程序,只有一個空白界面視圖
Window-based Application: 該模板適用于空白的應用程序,基于該模板生成的應用程序,只有一個窗體,沒有任何視圖,需要手動添加
對于我們的Hello World項目來說,最適合的項目模板是“View-based Application”,我們只要基于它創建一個單一帶有空白視圖的應用,然后再將UILabel拖到上面就可以實現基本功能。
項目基本選項
點擊下一步,進入“Choose options for your new project”界面,在這里,可以選擇設置項目的基本選項,其中:
Product Name: 指產品名稱,在這里項目中,我們直接命名為“Hello World”
Company Identifier: 公司標識符,一般命名規則為 “com.公司名”
Bundle Identifier: 指包標識符,用于唯一標識應用程序,默認會根據公司標識符和產品名來組合生成
Device Family: 指該應用支持的設備類型,共三個選項:iPhone、iPad、Universal(即iPhone、iPad通用)
Include Unite Tests: 是否包含單元測試代碼模板,如果勾選,Xcode會幫助生成單元測試代碼模板
選擇存儲路徑
點擊Next按鈕后,進入選擇文件存儲路徑界面,在這里,可以選擇要存儲項目的目錄。
項目創建
完成點擊“Create”按鈕,項目創建完成,彈出項目窗口。
試運行項目
經過上面的步驟,我們已經基于模板創建了一個項目,在開始開發前,我們可以嘗試先試運行一下項目,看看效果。點擊Xcode左上角的“Run”按鈕,Xcode即開始對項目進行編譯,編譯完成后,會彈出iPhone模擬器,在模擬器中運行項目,當然我們的項目現在運行起來還只能看到一個空白的界面。
點Xcode左上角的“Stop”按鈕,停止運行項目。
編輯界面文件
一般創建一個新項目,在項目中會包含一個或多個界面文件,這些界面文件一般稱之為“nib文件”,擴展名為nib或xib。或者通過向導創建一個新的View Controller的時候,Xcode會包含一個對應的nib文件,一個頭文件和一個實現文件。在我們剛剛以View-based Application為模板創建的Hello World項目中,“Hello_WorldViewController.xib”就是主界面的nib文件。
在Xcode左側選中“Hello_WorldViewController.xib”文件,并點擊工具欄的“Hide or show the Navigator”和“Hide or show the Utilities ”按鈕,隱藏左側Navigator區域,顯示Utility區域,這樣我們就可以開始在Xcode 4中來編輯界面。
添加Label到界面中
從對象庫中,找到我們所需要的Label控件對象,拖動到主界面中,即完成Label控件的添加
設置Label控件屬性
選中新添加的Label控件,點擊Inspector selector bar區域的“Show the Attributes inspector”按鈕,切換到屬性編輯界面,分別設置以下屬性:
Text: 輸入“Hello World”
Alignment: 選擇居中對齊
Font: 選擇“Helvetical Bold 26.0”
Text Color: 選擇紅色
Shadow: 選擇黑色(Black Color)
Shadow Offset: Horizontal和Vertical的值分別輸入1
設置Label控件的大小和位置
在上面的步驟中設置好Label的相關屬性后,發現文字特別小,而且顯示不完整,并非我們所選擇的字體大小,這是由于UILabel有一個屬性“adjustsFontSizeToFitWidth”,默認值是“YES”,如果這個屬性的值為YES,并且Label的numberOfLines屬性值是1,它會根據Label的寬度來自動調整字體大小,通過Xcode新添加的Label,默認寬度比較小,按照正常的26磅大小的字體,無法完整顯示,所以就字體大小就被自動調整了,導致顯示的和我們期望的不一樣。解決這個問題很簡單,就是我們重新設置一下Label的寬度,以讓其可以完整顯示文字。
選中新添加的Label控件,點擊Inspector selector bar區域的“Show the Size inspector”按鈕,切換到尺寸和位置設置界面,對寬度進行調整,這里我們給Label設置一個足夠的寬度和高度:200x40,以保證字體不會被縮小。
接下來,就是要調整Label的位置,讓它顯示在屏幕的正中間。在Xcode中,用鼠標拖動Label,拖動過程中Xcode有輔助線來幫助定位,很容易就可以找到正中心的位置。當然也可以通過簡單的計算得到Label如果要顯示在正中心,坐標應該為:x = (屏幕寬度 - Label寬度) / 2 = (320 - 200) / 2 = 60; y = (屏幕高度 - 狀態欄高度 - Label高度) / 2 = (480 - 20 - 40) / 2 = 210;
對修改過的xib文件保存,運行項目,看看效果
就這樣,我們已經完成了第一步:在屏幕上顯示文字,設置字體和字體大小,讓文字顯示在屏幕正中心。下一步,我們要讓它支持旋轉,并且旋轉后,文字還是顯示在屏幕正中。
支持設備旋轉
前面我們已經學習了解過,要支持設備宣傳,要做如下工作:
重寫對應的View Controller的“shouldAutorotateToInterfaceOrientation:”方法,在方法中申明支持的方向。也就是首先要重寫“Hello_WorldViewController.m”中的“shouldAutorotateToInterfaceOrientation:”方法
配置對應的View Controller中的View的autoresizingMask屬性,以適應因為界面旋轉導致的布局變化。也就是要設置好Label控件的autoresizingMask屬性。
還是在界面文件中,選中Label,在尺寸和位置設置界面,通過點擊Autosizing中的紅色線條,設置Label對上下左右四個方向以及寬度和高度都自動調整,這樣就可以保證在設備旋轉后,界面的寬度和高度發生改變后,控件對上下左右四個方向的位置以及長度和寬度也會隨著一起調整,由于已經設置了文字在Label內部是居中對齊的,就可以保證文字顯示在界面居中的位置。
點擊工具欄的“Hide or show the Navigator”和“Hide or show the Utilities ”按鈕,顯示左側Navigator區域,隱藏Utility區域,在左側Navigator區域,選中“Hello_WorldViewController.m”文件,找到“shouldAutorotateToInterfaceOrientation:”方法,對其進行重寫,重寫后代碼如下
- - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
- {
- // Return YES for supported orientations
- return YES;
- }
對所做的修改進行保存,然后運行項目,彈出模擬器,通過調用模擬器的設備旋轉菜單,讓iPhone模擬器變成橫屏,你將看到文字會自動調整位置,還是顯示在屏幕正中的位置。
至此,我們就實現了項目的全部需求。
小結:Xcode 4開發第一個iPhone程序 圖文實例(下)的內容介紹完了,通過Hello World這個簡單項目,我們學習了如何基于Xcode 4分析和開發iOS項目,學習了如何通過iOS Dev Center獲取需要的資料。最后希望本文對你有所幫助!
源碼下載:https://github.com/JimLiu/The-practice-of-iPhone-application-development/tree/master/Hello%20World