ios Storyboard教程1——Start Developing iOS Apps Today——從今天開始開發IOS(IOS7版)系列源文檔翻譯(十) – iPhone手機開發技術文章 iPhone軟體開發教學課程

本教程建立在您的第一個教程(基礎教程)創建的項目。你會使用你學到的一些視圖,視圖控制器,操作和導航。下面的界面,第一個設計的過程中,您還可以創建一些關鍵的用戶界面流程,作為你的todolist的應用程序,並添加運行你已經創建的場景。

本教程教您如何:

1.采用自動佈局靈活添加到您的用戶界面

2.用Storyboard來定義應用程序的內容和流量

3.管理多個視圖控制器

4.加入行動元素在用戶界面

在您完成本教程中的所有步驟,你就會有一個應用程序,看起來像這樣:

采用自動佈局

加載項的項目的場景設定在肖像模式(portrait mode)下工作。因此,如果用戶旋轉設備會發生什麼?嘗試一下在模擬器上運行你的應用程序。
旋轉模擬器vc3Ryb25nPgoxLtTaaVBob25lxKPE4sb3xvS2r8TjtcTTptPDs8zQ8qGjCjIu0aHU8UhhcmR3YXJlID4gUm90YXRlIExlZnSjqLvysLRDb21tYW5kLdfzvP3Nt6OpoaMKPGltZyBzcmM9″https://www.aiwalls.com/uploadfile/Collfiles/20140116/2014011609192659.jpg” width=”500″ height=”250″ alt=”\”>

正如你看到的,文本框看起來並不完全正確。停止大約一半在屏幕上。文本字段應該動動一路之隔的屏幕,因為它在縱向模式。幸運的是,Xcode中有一個稱為自動佈局功能強大的內置佈局引擎。使用自動佈局形容你的意圖的場景元素的定位,然後讓佈局引擎確定如何最好地實現這一意圖。您可以使用約束,規則解釋,其中一個元素應位於相對於另一個,或者什麼大小應該是,或者這兩種元素應該先縮小東西時減少瞭可用於每個人的空間描述你的意圖。對於附加的項目的場景(scene),需要一兩套約束來定位文本字段並設置其大小等。
設置這些限制可以很容易地實現在Interface Builder。

使用自動佈局定位文本框
1.在項目導航器中,選擇Main.storyboard。
2.在你的腳本中,選擇文本字段。
3.在畫佈上,按下Control鍵拖拽文本字段向現場的頂部,在周圍的文本字段中的空結束。這個空間是文本字段的父視圖。
出現快捷菜單,在你釋放拖動的位置。

4.從快捷菜單中選擇“Top Space to Top Layout Guide”。
一個隔約束文本字段的頂部和導航欄之間產生。
如果出現一個不同的快捷菜單中,或許還有一個菜單項,如“領導空間集裝箱,”這是不是垂直拖動到屏幕的頂部,因為,你在一個不同的方向拖動。 Xcode使用你在拖,以此來瞭解什麼樣的你試圖讓約束的方向,它使用瞭拖動的起點和終點來瞭解哪些對象正由約束有關。來吧,嘗試不同的拖動方向,看看有什麼制約條件。
5.當你做實驗,按下Control鍵拖拽文本字段右邊,在超景結束,創造瞭“尾隨空格鍵集裝箱”的約束。
6.按下Control鍵拖拽文本字段的左側,在它的父結尾,創造“空間領先的集裝箱”的約束。

這些約束指定文本字段的邊緣和它的父之間的距離不應改變。這意味著,如果該設備的方向改變時,文本字段將自動增長以滿足這些約束。
註意:運行您的應用程序。如果旋轉裝置,該文本字段增大或縮小到合適的大小根據設備的方向。
如果你沒有得到你期望的行為,使用Xcode的自動佈局調試功能來幫助您。在文本字段中選擇,選擇Editor > Resolve Auto Layout Issues > “Reset to Suggested Constraints” 有Xcode中成立瞭由上述步驟中所述的限制。或選擇Editor > Resolve Auto Layout Issues > Clear Constraints,以消除文本視圖中的所有約束條件,然後嘗試按照上面再次步驟。

雖然你的附加項目現場並沒有做太多的是,基本的用戶界面是存在的功能。從一開始就考慮佈局,確保你有一個堅實的基礎。

創建你第二個場景(Scene)

到目前為止,你一直都是做一個場景界面的,現在你可以將項目添加到您的事項列表視圖控制器管理的單個場景。現在是時候創建一個顯示整個的列表中的一幕。幸運的是, iOS的配備瞭一個強大的內置類,稱為一個表視圖,專門用來顯示項目的滾動列表。

使用表格視圖的場景添加到您的Storyboard

1.在項目導航器中,選擇Main.storyboard 。
2.在工具框中,打開對象庫。 (要打開一個菜單命令庫,選擇View > Utilities > Show Object Library。 )
3.從列表中拖動一個表視圖控制器對象拖放到畫佈上的附加的to-do項目現場的左側。如果需要,您可以使用縮小按鈕圖像在畫佈右下方獲得足夠的空間來將其拖動到。
如果你看到當您嘗試將其拖動到畫佈的內容並沒有什麼表視圖發生時,你很可能拖動表視圖而不是表視圖控制器。表視圖是由表視圖控制器管理的一件事,但你要全包,所以找到表??視圖控制器,並將其拖動到畫佈上。

現在你有兩個場景,一個用於顯示的事項列表,一個用於添加事項。

當他們啟動您的應用程序的第一個看到的是這個場景,所以告訴Xcode中那是你的意圖通過設置表視圖控制器作為第一個場景。

設置表格視圖控制器作為初始場景

1.使用按鈕在畫佈的左下方如有必要,打開大綱視圖圖像。
2.在大綱視圖中,選擇新添加的表視圖控制器。
3.在屬性控制欄中與表視圖控制器選中,打開屬性檢查器中的圖像。
4.在屬性檢查器中,選擇旁邊的是初始視圖控制器選項的復選框。


或者,你可以拖動從XYZAddToDoItemViewController的初始場景指標表視圖控制器直接在畫佈上。
表視圖控制器設置為你的故事板的初始視圖控制器,使得它加載的應用程序啟動的第一個場景。

註意:運行您的應用程序。取而代之的是附加的項目現場,其??文本字段,你現在應該看到一個空表視圖一個與多個橫向分隔將其分成行的畫面,但每行中沒有任何內容。

在表視圖中顯示靜態內容

因為你還沒有瞭解存儲的數據是它的較早創建的和存儲待辦的項目,並在表格視圖中顯示它們。但你並不需要用真正的數據展現chu”l。 Xcode中,您可以創建在Interface Builder的一個表視圖靜態內容中。這使得它更容易看到你的用戶界面將如何顯示,這是一個有用的方式來嘗試不同的想法。


在你的表視圖中建立靜態單元格(

static cell


1.在為你的界面視圖中,選擇下表視圖控制器表視圖。
2.視圖中選擇在屬性欄中的 ,打開屬性檢查器中的圖像。
3.在屬性檢查器中,選擇從旁邊的內容選項,在彈出的菜單中靜態單元格。
三個空表視圖單元格出現在你的表視圖。
4.在大綱視圖或畫佈上,選擇最上面的單元格。
5.在屬性檢查器中,選擇基本從旁邊的樣式選項的彈出式菜單。
基本樣式包括一個標簽,並在表格單元格文本“標題”,所以Xcode創建一個標簽。
6.在大綱視圖或畫佈上,選擇標簽。
7.在屬性檢查器中,更改標簽的“標題”文本“修剪草坪。 ”對於以使更改生效,按Enter鍵或單擊工具區域之外。
或者,您也可以通過雙擊它,並直接編輯文本編輯標簽。
8.重復步驟4-7為其他細胞,給他們的文字為其他可能待辦事項。
9.創造足夠的細胞,使該項目超過填滿整個屏幕。您可以通過復制並粘貼或拖動單元格時按住Option鍵創建新的細胞。
檢查點:運行您的應用程序。您現在應該看到與你在Interface Builder中添加預配置的單元格的表視圖。看到當你滾動它新的表視圖的感受。嘗試旋轉模擬設備如何通知表視圖已經配置正確鋪陳其內容。您可以使用表格視圖得到很多行為是免費的。

當您完成後,它的時間來提供一種方法從這個表視圖導航,與待辦事項的名單,為您創建的第一個場景,用戶可以在其中創建一個新的待辦事項。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *