大家學(xué)習(xí)iOS開發(fā)，都想有朝一日看到自己的***個(gè)界面程序。本文介紹了在界面上顯示“HELLO”的整個(gè)開發(fā)過程，可供iOS初學(xué)者參考。

***步 打開Xcode開發(fā)工具

在MAC電腦的Launchpad中打開Xcode工具，如圖1所示。

圖1 打開Xcode工具示意圖

要新建工程，選擇圖1中的“Create a new Xcode project”。

第二步 創(chuàng)建iOS工程

選擇圖1中的“Create a new Xcode project”之后，即可進(jìn)入如圖2所示的界面。

圖2 選擇iOS應(yīng)用的類型

在圖2中，我們選擇iOS的Application中的Single View Application，并單擊Next，即可進(jìn)入圖3所示的界面。

圖3 確定工程名字、所用語言、運(yùn)行設(shè)備等

在圖3中，我們可以輸入Product Name，選擇Language和Devices，并單擊Next，即可進(jìn)入圖4所示的界面。

圖4 選擇工程存放位置

在圖4中，我們可以選擇工程的存放位置。選擇好之后，單擊Create，即可成功創(chuàng)建工程。

第三步 設(shè)置界面內(nèi)容

創(chuàng)建好iOS工程之后，我們可以看到整個(gè)工程的程序布局，如圖5所示。

圖5 iOS工程的程序布局

由于本次我們只是在界面上顯示HELLO，并不涉及其他內(nèi)容，因此，我們只要關(guān)注圖5中的紅色框中的Main.storyboard。單擊Main.storyboard，可看到如圖6所示的空白界面。

圖6 空白的界面

由于我們沒有對(duì)界面做任何操作，因此整個(gè)界面是空空如也，啥東西也沒有。此時(shí)，我們要將5個(gè)文本框拉入界面中，并依次展示H、E、L、L、O五個(gè)字母。操作完成之后的界面如圖7所示。

圖7 拉入文本框之后的界面

我們在圖7中的紅色框1處輸入“text”，即可出現(xiàn)Text文本框。由于要顯示五個(gè)字母，因此我們要將五個(gè)文本框拉入到界面上，并雙擊每一個(gè)文本框，將對(duì)應(yīng)的字母輸進(jìn)去。

第四步 運(yùn)行程序

將五個(gè)文本框排列整齊之后，我們接下來就可以看到程序的實(shí)際運(yùn)行效果了。在運(yùn)行程序之前，我們要選擇將程序運(yùn)行在哪類設(shè)備上。選擇運(yùn)行設(shè)備并運(yùn)行程序的操作如圖8所示。

圖8 選擇運(yùn)行設(shè)備并運(yùn)行程序

在圖8中，紅色框1所示的設(shè)備(iPhone 6s)即為我們選擇的運(yùn)行設(shè)備。我們單擊紅色框1，還可以看到有更多的設(shè)備，如圖9所示。

圖9 iOS程序運(yùn)行設(shè)備

單擊圖8中的紅色框2，整個(gè)程序便運(yùn)行起來了。運(yùn)行完成之后的效果如圖10所示。

圖10 程序運(yùn)行效果示意圖

我們之前所做的所有工作都展示在了圖10中，當(dāng)看到它的時(shí)候，我們會(huì)有一種所有的付出都得到了回報(bào)的感覺。但是，有的時(shí)候，我們會(huì)覺得結(jié)果不盡如人意，那么我們就要對(duì)程序做一些修改，或者改變一下界面元素的布局，等等。在這里，我們也可以對(duì)文本框的大小、位置和文字的字體等做一些修改，如圖11所示。

圖11 界面元素的屬性修改示意圖

如圖11所示，我們選中某個(gè)文本框，便可以在右邊的屬性列表中對(duì)文字樣式、顏色、字體、對(duì)齊方式等進(jìn)行修改了。此外，我們也可以拉動(dòng)整個(gè)文本框，對(duì)其位置和大小進(jìn)行修改。

總結(jié)

本文中的內(nèi)容比較簡單，只是在界面上顯示了文字，并沒有涉及到具體的代碼的修改。盡管如此，通過本文中的整個(gè)程序開發(fā)流程，我們可以感受到iOS開發(fā)工具(Xcode)的強(qiáng)大及整個(gè)iOS開發(fā)過程的趣味性。在以后的文章中，我們會(huì)更加深入地認(rèn)識(shí)iOS開發(fā)，會(huì)涉及到更加有趣的東西。

【本文是51CTO專欄作者周兆熊的原創(chuàng)文章，作者微信公眾號(hào)：周氏邏輯(logiczhou)】