天天看點

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

一、介紹Storyboard

1、簡介:

iOS5之後Apple提供了一種全新的方式來制作UI,那就是StoryBoard。簡單了解來說,可以把StoryBoard看做是一組viewController對應的xib,以及它們之間的轉換方式的集合。在StoryBoard中不僅可以看到每個ViewController的布局樣式,也可以明确地知道各個ViewController之間的轉換關系。相對于單個的xib,其代碼需求更少,也由于集合了各個xib,使得對于界面的了解和修改的速度也得到了更大提升。減少代碼量就是減少bug量,這也是程式開發中的真理之一。

在Xcode5之後,StoryBoard已經成為建立項目的預設配置,這也代表了Apple對開發者的建議和未來的方向。

2、優劣勢:

優勢:

  • 故事版便于快速開發,如果項目很緊,那麼就可以考慮使用故事版了,因為拖拽界面特别方面
  • 使用故事版那麼适配相當輕松的,隻需要圖檔資源齊全,适配都不是大問題

劣勢:

  • 故事版不友善多人開發,如果多人開發,一個人打開了故事版,會被預設為修改了,如果你其他的同僚也修改了,那麼,問題來了,必須有一方放棄修改才可以,合并起來也很麻煩
  • 如果使用多個故事版,維護起來比較困難,開始還好說,項目越來越複雜,到時候問題就出現了
總之,不同的人有不同的看法,熟練的應用以便程式的開發才是我們共同的目标。

二、簡單使用

1、按住command+n,建立一個故事版

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

2、連結自己建立的故事版。如果删除系統的故事版,需要把target->general->main interface:->修改成自己建立的故事版名字

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用
iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

描述:

(1)工具欄->報紙圖示->class:這個類是哪個類

(2)storyboardID:查找這個類的标記(一般寫本類的類名)

(3)use storyboardID:勾選上故事版的标記才有效果

(4)工具欄->鋼筆頭->is initial view controller:設定初始頁面箭頭(隻能有一個)如果有使用故事版就不能使用代碼去建立視窗(因為一個應用程式有且隻有一個主視窗)

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

(5)title:檔案清單名,标題的名字

(6)工具欄最後一個選項“連結”:表示這個類和其他類的關系->(分欄控制器viewcontroller)(導航欄控制器rootviewcontroller)->關聯其他控制器->點選拖住按鈕到希望連結的控制器上,如果挂代理,點選挂代理的按鈕拖動到指定控制器

(7)代碼建立的類和故事版中的類進行關聯實在菜單欄裡面的報紙圖示中class:設定成代碼的類名

3、故事版中第一個頁面的箭頭強調内容:指向誰誰就是初始頁面(視窗上的rootController)

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

4、拖控件

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用
iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

5、關聯代碼,設定button的觸發事件,故事版上面的控件添加觸發方法和與代碼進行關聯:

點解故事版-> 點選雙環,把故事版上需要關聯的控件右鍵拖到代碼的.h檔案,
           
iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

如果是添加方法選擇(action),如果是隻關聯(outlets)

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用
iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

這個時候可以運作程式測試下

6、設定sizeClass

(1)compact:緊湊

(2)any:任意

(3)regular:寬松

(4)裝置區分:(iOS7之前不用區分裝置,在iOS8之後出來)

《1》3.5、4、4.5手機橫屏:CwCh

《2》手機橫屏:Ch

《3》5.5手機橫屏:RwCh

《4》手機豎屏:CwRh

《5》手機豎屏ipad的橫豎屏:Rh

《6》ipad的橫豎屏:RwRh

《7》ipad的橫豎屏:Rw

《8》任意:any

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

7、限制

1、button在視圖上的位置

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

我們在用代碼編寫的frame與在storyboard中的相對位置的位置的差別:

frame:原點、尺寸決定視圖的位置大小

相對位置:控件之間的關系

注意:添加完限制之後,如果有黃色或紅色的警告

紅色:限制不合理,把紅色不合理的地方去掉

黃色:表示實際位置與限制位置不比對,可以點選黃色按鈕修複位置

2、button相對視圖的比例限制

選中button,在右下角的快捷操作中勾選箭頭所指選項進行設定,點選Add 2 Constraints。

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

此時,你可能還需要再次選中這個Button,再使用快捷鍵Command+option+=修複frame,這時Button的frame和layout的限制才會對應起來。如果不修複frame也不會影響實際運作的效果,但是Xcode會提示警告

iOS—Storyboard的簡單使用一、介紹Storyboard二、簡單使用

注意:相同層級和不同層級的view之間都可以用比例方式确定大小,但是必須有條件先确定其中一個view的大小。這裡說的條件,指的是限制,或者UIViewController.view這種由父級容器确定了大小的條件。

一般情況下,寬度和高度需要分别設定比例,看需求而定。

寬度和高度之間也可以設定比例,設定方法和上面基本相同,不同的是,隻需要選擇一個view,添加限制的時候隻勾選Aspect Ratio。

寫的有點亂,還請諒解