天天看點

【iOS開發】在界面上顯示“HELLO”

大家學習iOS開發,都想有朝一日看到自己的第一個界面程式。本文介紹了在界面上顯示“HELLO”的整個開發過程,可供iOS初學者參考。

第一步 打開Xcode開發工具

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

【iOS開發】在界面上顯示“HELLO”

圖1 打開Xcode工具示意圖

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

第二步 建立iOS工程

選擇圖1中的“Create a new Xcode project”之後,即可進入如圖2所示的界面。

【iOS開發】在界面上顯示“HELLO”

圖2 選擇iOS應用的類型

在圖2中,我們選擇iOS的Application中的Single View Application,并單擊Next,即可進入圖3所示的界面。

【iOS開發】在界面上顯示“HELLO”

圖3 确定工程名字、所用語言、運作裝置等

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

【iOS開發】在界面上顯示“HELLO”

圖4 選擇工程存放位置

在圖4中,我們可以選擇工程的存放位置。選擇好之後,單擊Create,即可成功建立工程。

第三步 設定界面内容

建立好iOS工程之後,我們可以看到整個工程的程式布局,如圖5所示。

【iOS開發】在界面上顯示“HELLO”

圖5 iOS工程的程式布局

由于本次我們隻是在界面上顯示HELLO,并不涉及其他内容,是以,我們隻要關注圖5中的紅色框中的Main.storyboard。單擊Main.storyboard,可看到如圖6所示的空白界面。

【iOS開發】在界面上顯示“HELLO”

圖6 空白的界面

由于我們沒有對界面做任何操作,是以整個界面是空空如也,啥東西也沒有。此時,我們要将5個文本框拉入界面中,并依次展示H、E、L、L、O五個字母。操作完成之後的界面如圖7所示。

【iOS開發】在界面上顯示“HELLO”

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

我們在圖7中的紅色框1處輸入“text”,即可出現Text文本框。由于要顯示五個字母,是以我們要将五個文本框拉入到界面上,并輕按兩下每一個文本框,将對應的字母輸進去。

第四步 運作程式

将五個文本框排列整齊之後,我們接下來就可以看到程式的實際運作效果了。在運作程式之前,我們要選擇将程式運作在哪類裝置上。選擇運作裝置并運作程式的操作如圖8所示。

【iOS開發】在界面上顯示“HELLO”

圖8 選擇運作裝置并運作程式

在圖8中,紅色框1所示的裝置(iPhone 6s)即為我們選擇的運作裝置。我們單擊紅色框1,還可以看到有更多的裝置,如圖9所示。

【iOS開發】在界面上顯示“HELLO”

圖9 iOS程式運作裝置

單擊圖8中的紅色框2,整個程式便運作起來了。運作完成之後的效果如圖10所示。

【iOS開發】在界面上顯示“HELLO”

圖10 程式運作效果示意圖

我們之前所做的所有工作都展示在了圖10中,當看到它的時候,我們會有一種所有的付出都得到了回報的感覺。但是,有的時候,我們會覺得結果不盡如人意,那麼我們就要對程式做一些修改,或者改變一下界面元素的布局,等等。在這裡,我們也可以對文本框的大小、位置和文字的字型等做一些修改,如圖11所示。

【iOS開發】在界面上顯示“HELLO”

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

如圖11所示,我們選中某個文本框,便可以在右邊的屬性清單中對文字樣式、顔色、字型、對齊方式等進行修改了。此外,我們也可以拉動整個文本框,對其位置和大小進行修改。

總結

本文中的内容比較簡單,隻是在界面上顯示了文字,并沒有涉及到具體的代碼的修改。盡管如此,通過本文中的整個程式開發流程,我們可以感受到iOS開發工具(Xcode)的強大及整個iOS開發過程的趣味性。在以後的文章中,我們會更加深入地認識iOS開發,會涉及到更加有趣的東西。