fb_license

技術標籤

@selector (1) 初使化區塊 (1) 物件 (1) 物件導向 (2) 型別 (4) 封裝 (1) 流程控制 (1) 陣列 (3) 推論型別 (2) 實機測試 (1) 蓋索林(gasolin) (1) 模組 (1) 憑證 (1) 轉型 (1) 羅康鴻 (121) 類別 (1) 變數 (5) Accelerometer (1) ActiveRecord (1) Activity (1) AFNetworking (1) alloc (1) Android (3) Animation (1) App (1) App ID (1) APP上傳 (1) ASP.NET (1) AVAudioPlayer (1) block (1) C# (2) class (1) CLLocationManager (1) CLLocationManagerDelegate (1) CMMotionManager (4) Controller (1) delegate (1) DELETE語法 (1) Device Motion資料 (1) Dialog (1) DropDownList (1) dynamic language (2) Facebook SDK (9) FBRequest (5) FBRequestConnection (2) FMDB (1) Gesture Recognizers (6) GROUP BY (2) Gyro (1) HAVING (1) IBAction (1) IBOutlet (1) id (3) inheritance (1) init (1) Insert (1) instance variable (1) Interface Builder (1) iOS (70) iOS idea (7) iOS Introduction (1) Layout (1) Magnetometer (1) Menu (2) Method (2) MKMapView (1) MKPointAnnotation (1) MS SQL (5) Nil (1) NSArray (1) NSDictionary (1) NSError (1) NSFileManager & .plist (1) NSMutableArray (1) NSMutableDictionary (1) NSNotificationCenter (1) NULL (1) object (2) Objective-C (16) Objective-C idea (1) ORDER BY (1) Parameter (1) property (1) protocol (2) Provisioning (1) Proximate Sensor (1) Q and A (2) R類別 (1) Rails (9) RESTful SOA (9) Ruby (8) Scene (1) SEELECT (1) Segue (2) SEL (1) SELECT語法 (1) Shake (1) Simulator (1) SOA (8) SQL (6) SQL Server (5) SQL函數 (1) SQL彙總函數 SQL (1) SQLite (1) Storyboard (1) Style (1) Swift (1) Table (1) target & action (1) Theme (1) Toast (1) TRUNCATE TABLE語法 (1) UIActionSheet (1) UIActionSheetDelegate (1) UIActivityIndicatorView (1) UIAlertView (1) UIBarButtonItem (1) UIButton (1) UICollectionView (1) UICollectionViewDataSource (1) UIControl (9) UIDatePicker (1) UIImage (1) UIImagePickerController (2) UIImagePickerControllerDelegate (2) UIImageView (1) UILabel (1) UILongPressGestureRecognizer (1) UINavigationController (2) UIPanGestureRecognizer (1) UIPinchGestureRecognizer (1) UIProgressView (1) UIResponder (1) UIRotationGestureRecognizer (1) UISegmentedControl (1) UISlider (1) UIStepper (1) UISwipeGestureRecognizer (1) UISwitch (1) UITabBarController (1) UITableView (1) UITableViewDataSource (1) UITapGestureRecognizer (1) UITextField (1) UITextFieldDelegate (1) UITextView (2) UITextViewDelegate (1) UIToolBar (1) UIView (8) UIWebView (1) UPDATE語法 (1) var (2) VB.NET (7) View (4) WHERE子句 (1) XML (1)

2013/05/23

[iOS] 視覺化編輯您的介面 - Interface Builder

idea...

iOS工程師:「畫面要用程式寫出來,好累人啊,除了花時間,還要假想畫面呈現的結果,若不如預期,又要回來調程式,真是麻煩。」

Apple:「好吧,那我給你一個工具,讓你一邊看著畫面一邊調整內容,完全視覺化設計畫面的工具,嗯,就叫這工具為"Interface Builder"吧。」







建好一個名為"Interface_Builder"的專案後,我們先來作一些前置的基礎設定,好開始一些功能,在您的左上角設定如下:







選取下列選項,當然選取"MainStoryboard.storyboard"時,這時就會在中間開啟一個視覺化的設計畫面,這就是"Interface Builder"




第1步:在右邊的工具中拖拉入您想要的元件,在此拖入一個"Switch"至中間的畫面中,這時您就會發現畫面中增加了一個"Switch"在畫面中。




第2步:當然,您也可以拖拉更多元件至Interface Builder畫面中。這就是"Interface Builder"所為能帶來的功能 - 以視覺化設計畫面的功能。




第3步:接下實際執行程式,而這些元件也確實可在iOS中被操作,這就是"Interface Builder"所為我們帶來的好處,在一行程式都不用寫的情況下,畫面卻已透過視覺的方式佈置完成。







Interface Builder運作原理:

在設計時,"Interface Builder"會以XML的方式將畫面的配置保存下來,因此若您透過文字編輯器打開 "MainStoryboard.storyboard",您會發現其真的以XML的方式描述畫面的配置。

而過去在iOS中常聽到".xib"檔,即是iOS用來描述一個畫面配置用的,其也是以XML的方式保存,".xib"檔編譯後,就會變成二進位的".nib"檔。

那".storyboard"檔又是什麼呢?! 其實您可以想像成是多個".xib"檔的集合,換句話說".storyboard"檔其中會包含多個畫面的XML模述於檔案中,在編譯後也會產生出多個對應的".nib"檔,以供程式執行時使用。

以下,即是將"MainStoryboard.storyboard"以文字編輯器打開後的內容:





檔案連結:Interface_Builder.zip