iOS 入門——Hello World app

iOS 入門——Hello World app

做爲Mac重度使用者以及iOS小白一枚(匿),我將爲iOS 10 構建咱們的第一個iOS應用程序
(著名的「Hello World」 )。
咱們將以幾種方式學習如何向用戶呈現信息。swift

開發環境

  • macOS系統app

  • Xcode 8 (最好是最新版本)編輯器

  • Apple開發者帳號(可選項,爲了安裝到iPhone上裝逼。。沒有的話能夠用Xcode自帶的simulator)ide

咱們將使用稱爲labelview的UI元素在屏幕上顯示一條靜態消息。學習

讓咱們開始建立一個新的項目。

點擊左側 Create a new Xcode projectspa

clipboard.png

咱們也能夠從Xcode中的文件菜單建立新的項目:設計

clipboard.png

這將打開一個對話框類型屏幕,容許咱們在多種應用程序類型之間進行選擇。 例如,咱們可使用Xcode爲iPhone和/或iPad(iOS應用程序)構建應用程序,適用於Apple TV(tvOS),Apple Watch或Mac。 使用Xcode 8,咱們還能夠構建跨平臺遊戲code

clipboard.png

這裏咱們選擇Single View Application(這也是咱們初學項目最常選項) 這是用戶在運行應用程序時看到的屏幕,它佔用了設備的整個屏幕空間。
雖然該應用程序是由Xcode建立爲單個視圖應用程序,但咱們能夠添加任意數量的視圖。對象

單擊下一步按鈕,而後給項目名稱Hello World。 確保選擇Swift做爲開發語言
(還不怎麼會使用objective-C。。逃)
對於設備,若是但願app在iPad和iPhone上運行,請選擇通用。 也還能夠選擇特定設備。遊戲

clipboard.png

建立項目後,咱們將在窗口左側的文件樹中看到項目中的文件,庫和其餘項目的列表。 個人看起來像這樣:

clipboard.png

  • AppDelegate.Swift:這是一個文件,您編寫代碼來處理我所說的應用程序的管理區域。例如,若是您須要在應用程序啓動時執行的代碼,或者當應用程序重點關注時執行代碼,或者在用戶關閉應用程序時整理代碼,該代碼將放在此處。

  • ViewController.Swift:您的應用程序中各個視圖的代碼在ViewController文件中。這是一個名爲UIViewController的類,它運行每一個視圖的操做。因爲咱們的Hello World應用程序中只有一個視圖,因此有一個ViewController。若是要添加更多屏幕,您將爲每一個屏幕或視圖添加視圖控制器文件。

  • MainStoryboard:故事板是一個圖形界面,用於設計應用程序的GUI或用戶界面。大多數時候,您的全部視圖控制器都將在這裏看到他們的意見。您能夠將用戶界面元素拖到每一個屏幕或視圖上,如按鈕,滑塊控件和圖像。它也能夠將視圖屏幕添加爲單獨的文件,在這種狀況下,它們是xib文件。這是從舊版本的Xcode,而絕大多數時候,咱們將使用故事板。它還容許您鏈接屏幕,以便點擊按鈕將會轉到特定視圖,例如。您能夠看到啓動屏幕有本身的故事板,您能夠在其中設計啓動時看到的屏幕。

  • Assets.xcassets:您能夠在這裏找到一個地方,添加與應用程序相關聯的圖像,包括應用程序圖標和啓動圖像。

  • Info.plist:這是存儲應用程序重要屬性的重要文件。

  • Products:在這裏,您將找到實現的.app文件(若是已經構建)。您能夠右鍵單擊
    在其上選擇「在Finder中顯示」。

因此讓咱們開始構建咱們的Hello World應用程序吧!
點擊你的Main.storyboard文件。 在右下方點擊第三個相似銅幣圖案,
找到Label 並將其拖動到屏幕頂部,命名並將文字居中。

clipboard.png

單擊View Controller查看代碼。
如今咱們來點擊白色背景來選擇視圖。 在右側,您將看到所選對象的屬性。 讓咱們將視圖的背景顏色更改成柔和的綠色。 經過點擊背景來作到這一點。

clipboard.png

如今再拖一個按鈕到屏幕上。改變相應屬性,如圖所示。 我也改變了文字的顏色並居中。

clipboard.png

但僅僅只有用戶界面元素是無用的,除非咱們能夠在代碼中識別它們,並根據屏幕上發生的事件執行功能。 例如,當用戶點擊按鈕時,咱們須要編寫代碼來響應該事件。 這樣的代碼被放在一個Action方法中。 Xcode能夠輕鬆地將屏幕上的對象直接與代碼相關聯。 咱們來看看怎麼作

在Xcode 界面右上方

clipboard.png

第二個按鈕稱爲助手編輯器。 若是您點擊它,將打開一個代碼窗口。 例如,假設咱們的屏幕上有一個按鈕。 點擊助手編輯器,咱們看到:

clipboard.png

單擊對象,同時按下control鍵選擇它(在這種狀況下爲按鈕)。 如今從對象拖到代碼中,在行類ViewController和override func viewDidLoad之間的區域。 你會看到一個彈出窗口:

clipboard.png

一個Outlet將在你的代碼中識別這個對象。 咱們如今不須要擔憂存儲,因此選weak便可。 鍵入名稱,而後單擊connect。 你會看到你的代碼以下,若是咱們給它的名稱helloButton:

clipboard.png

一樣的方法連接視圖中的UILabel,命名爲sayHelloLabel.

如今爲按鈕添加方法:
一樣選中按鈕,按住control鍵,此時單擊打開「connect」下拉列表,而後選擇「Action」。

clipboard.png

您還能夠選擇參數列表,但如今默認值是咱們須要的。 命名你的功能 您將在代碼中看到以下:

@IBAction func helloClicked(_ sender: AnyObject) { }

在大括號之間輸入代碼。
如今關閉助理編輯器,點擊窗口右上角的X,而後返回到ViewController.Swift。 我將聲明一個咱們將在代碼中使用的一個常量字符串:

let myMessage = "Hello world, hope you are having a good day!"

當點擊按鈕時,咱們但願應用更改屏幕標籤的文本。 這能夠經過設置標籤的text屬性來實現。
最後,代碼是這樣。

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var sayHelloLabel: UILabel!
    @IBOutlet weak var helloButton: UIButton!

    let myMessage = "Hello world, hope you are having a good day!"

@IBAction func helloClicked(_ sender: AnyObject) { 
    var strMessage = "Hello World!"
    sayHelloLabel.text = myMessage 
}
override func viewDidLoad() { 
    super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

}
override func didReceiveMemoryWarning() { 
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.

}

如今能夠在模擬器中運行應用程序。 這能夠經過單擊Xcode窗口左上角的箭頭來完成。 若是您點擊打開下拉列表,您將看到幾個選項(包括您本身的iPhone或iPad設備,若是鏈接,並須要開發者帳號)選擇任一模擬器便可。
[image:BB059721-ED72-43B1-9A3D-2DC49746111B-1297-00000FB77AC4FC02/03BEA926-A1FF-49A8-811C-2B7113AEC173.png]

這裏,點擊SayHelloWorld, 上方的標籤將由SayHello變爲
Hello world, hope you are having a good day!

[image:A26A0CFB-E626-44A0-A77B-91AB4FF442AB-1792-00001CC9057BB808/Screen Shot 2017-09-06 at 22.27.50.png]

這樣,咱們成功完成了Hello World app的搭建,邁出了進入iOS開發的第一步,以後要學習的還不少,一塊兒加油。

Reference

App school for Xcode and iOS 10 Development Free

Copyright © 2017 zhiwei xu. All rights reserved.
相關文章
相關標籤/搜索