一、使用Xcode搭建可視化界面
Xcode提供了兩種可視化搭建界面的方法，即storyBoard以及xib：
- StoryBoard：擴展名為.storyboard的文件，一般包含多個控制器，以及描述控制器之間如何進行跳轉的。從字面意思上理解，即：通過故事板能夠看出一款app是如何設計界面的
- xib：擴展名為.xib的文件，一般用於展示單個視圖（view）；
在實際的開發過程中，一般需要把兩種方式結合起來使用，App應用的整體框架，特別是涉及到控制器之間跳轉的，建議使用StoryBoard；對於控制器中特定的視圖（view），一般采用xib的方式來創建，在實際編碼過程中，會手工通過代碼方式添加xib到某個控制器中。
二、使用Storyboard創建界面
根據示例程序，在界面中一共包含兩個UI控件，即：
- UIImageView：用於顯示一張圖片；
- UIButton：用於點擊，當點擊時，圖片會自動顯示。
如下圖，在Storyboard中，查找出UIButton和UIImageView控件，並用鼠標按住后，拖動到視圖控制器中，並在右側的公共區中設置控件的屬性。其中，對於UIButton可以更新其顯示的按鈕提示文字。
三、連線–建立界面與代碼之間的聯系
當搭建完畢UI界面后，如何把界面中的UI控件與代碼邏輯進行關聯？Xcode中提供了連線操作，通過連線操作，可以為控制器添加屬性（IBOutlet）以及點擊方法（IBAction）
選中工具欄中的“show assistant editor”
選中UIImageView，按住control鍵，然后拖動連線到viewController.m文件中的如下位置，即為控制器添加一個屬性（IBOutlet）;
@interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *imageView; @end
選中UIButton，按住control鍵，然后拖動連線到ViewController.m文件中的如下位置， 即為控制器添加了一個按鈕點擊方法（IBAciton）,方法命名為：showImage;
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (IBAction)showImage:(id)sender {
}
@end
完成后的狀態如下圖所示
四、添加圖片資源文件
APP中使用到的一些圖片資源，可以手工添加到工程文件中的Assets文件夾中。如下資源建議放入Assets文件中：
- App的icon；
- App的啟動頁圖片
- App中界面使用的靜態圖片，如按鈕、底部Tabbar圖片等；動態圖片不建議放在Assets文件夾中。
五、在代碼中實現點擊按鈕后，顯示圖片功能
在ViewController.m中的showImage方法中，添加如下一行代碼（假設圖片名稱為IMG_0123,如不是則替換成實際名稱）：
- (IBAction)showImage:(id)sender {self.imageView.image = [UIImage imageNamed:@"IMG_0123"];}六、選擇真機或模擬器運行
程序至此，可以運行了。在工具欄中，選擇運行的環境（真機or模擬器），點擊運行，即可開始運行。
- 真機運行：xcode7開始，無需證書即可進行真機調試（請注意真機指的是iPhone！！！）同時需要注意真機運行的iOS版本，需要比代碼編譯所需的最低版本要高；
- 模擬器運行：沒有證書限制，但是有部分功能的調試，不支持模擬器，必須要真機才行，例如：藍牙、地圖、照相機等。
