為了和程序員和平相處，設計師學會在Xcode中簡單編程

• 本文由CocoaChina譯者hyhSuper（ GitHub ）翻譯

• 作者： Meng To

• 原文： Simple Coding In Xcode

在你學習過 Learning Xcode 5 As a Designer 和 Animate in Xcode Without Code 這兩篇文章之后，你已經為簡單編程做好了準備。為什么要編程呢？因為編程可以解決所有的問題。這篇文章將以一個設計師能夠理解的方式實現編程，這是將是一個有趣的旅程。

關注GitHub工程

地址： https://github.com/MengTo/Ripple ，我決定把Ripple Prototype放到GitHub是為了讓大家能夠及時更新最新提交的代碼。隨著項目的發展，我將會把它以最簡單的最容易理解的方式打包為了大家能夠慢慢的穩定的學習它。UI代碼集合和他們如何應用到工程中，請看文章末尾處。

UI樣式與代碼分離

我們使用Storyboard不僅僅是因為它簡單容易用，還有一個重要原因是它能使你的代碼編程變得更簡單。UI樣式在Storyboard中編輯，使得工程師的代碼更加簡潔，把關注點更多的放到數據和操作上。此外，這樣做的另一個好處是能夠使你的UI界面很容易適配iPad，之后我們會學習。

編碼

這篇教程的神奇之處是，代碼只在一個ViewController里面。在Xcode里面創建如下工程：

在上一篇教程中，我明確解釋了如何使用ViewController模板創建工程。下面我們將一個按鈕和一個動畫聯接起來。

目前我們有一個應用程序demo——Ripple 1.1 . 在此我們要創建一個chat 場景的View Controller.

使用Command + N命令，系統將會詢問你是否創建新文件，我們接下來創建如下圖所示的一個類。

記得我們已經有一個ViewController了，所以我們創建一個名為ChatViewController的視圖控制器。這和JS文件和CSS文件之間相匹配一樣，只是功能不同。

現在，我們多了兩個文件。.h文件主要是引用來之Storyboard的元素。.m文件主要是為了實現你的引用。注意，我們刪除了兩個方法，原因是我們通常是不用他們的。

引入代碼

在HTML中，你需要引入CSS文件，同理在Xcode中，你需要引入View Controller文件。

當你要選擇Controller的時候，在Runtime Attributes欄設置Class屬性為你的目標文件的名字。

建立聯結

下面就是展示如何把Storyboard中的元素和類建立聯結。

將屏幕分屏，方便Storyboard建立聯結。注意，如果你打開了UI 自動布局按鈕，Storyboard將會自動把合適的視圖展現給你。

這里我們為視圖創建一個IBoutlet屬性，為UIButton創建一個IBAction方法。注意，要為視圖選擇正確的視圖類型。

隱藏和展示

默認情況下我們隱藏People列表

代碼實現

這里比較有趣的地方在于我們僅僅是引入Canvas類，當按鈕按下的時候，就可以實現使listView顯示出來并且做動畫的功能。

結果如上圖，很簡單的代碼，就實現了如此神奇的效果。

代碼片段

Objective - C是一門重量級語言。但是它是有自動補全代碼和聲明的功能。此外，預置代碼功能能夠幫助你預置長代碼片段。

非常好的文檔功能

UIKit庫是比較龐大比較深得，但是Xcode里面的文檔化的注釋是很好的，并且在Xcode里面可以直接訪問他們。你可以通過command鍵找到你想要的類的所有屬性，僅僅是通過長按command鍵,同時點擊你想看的屬性。

假如我們想改變一個UILable類對象的text屬性，上圖就是我們如何找到這個屬性的過程。

命名規則

在Xcode中,很難偏離其建議命名規則——它無處不在! 快速瀏覽一下 蘋果公司的文檔 將會有一個大概的想法。但是，你并不能知道所有的規則,特別是涉及到Storyboard對象。下面的一些例子,你可以關注:

• IBOutlet

listButton——list表示它代表的是一個列表。

• IBAction

listButtonDidPress ——didPress表示按鈕它的行為。

• View Controller

CSChatViewController——CS 這兩個字母代表你的工程名字。CanvaS ,RippleApp,等等。View Controller 是類名。 這樣，我就是覺得Canvas類的兩個字母CS和“CSS”類似。

UI代碼集合

下面我共享的代碼列表將會幫助你解決在Storyboard中不能做的常見的布局問題。它們也是我在學習Xcode時候遇到的問題。

Light Status Bar ——有時候你沒有NavigationController,因此你需要手動設置狀態欄為淺色。

NavigationBar Custom Font ——在AppDelegate.m文件中設置NavigationBar字體樣式。

Open Links in Safari ——創建StoryBoard中UIButton對象的IBAction事件，并且使它們連接起來。

iOS7 Motion Effect ——使用這個庫和一行代碼，使你實現一個這樣的功能：當你的手機傾斜的時候，可以移動視圖上的元素。

關注 GitHub project 了解更多信息。

本文僅用于學習和交流目的，轉載請注明文章譯者、出處和本文鏈接。

感謝博文視點為本期翻譯活動提供贊助