iOS 入门——Hello World app

浏览: 117 发布日期: 2017-09-08 分类: swift

iOS 入门——Hello World app

作为Mac重度使用者以及iOS小白一枚(匿),我将为iOS 10 构建我们的第一个iOS应用程序
(著名的“Hello World” )。
我们将以几种方式学习如何向用户呈现信息。

开发环境

  • macOS系统

  • Xcode 8 (最好是最新版本)

  • Apple开发者账号(可选项,为了安装到iPhone上装逼。。没有的话可以用Xcode自带的simulator)

我们将使用称为labelview的UI元素在屏幕上显示一条静态消息。

让我们开始创建一个新的项目。

点击左侧 Create a new Xcode project

我们也可以从Xcode中的文件菜单创建新的项目:

这将打开一个对话框类型屏幕,允许我们在多种应用程序类型之间进行选择。 例如,我们可以使用Xcode为iPhone和/或iPad(iOS应用程序)构建应用程序,适用于Apple TV(tvOS),Apple Watch或Mac。 使用Xcode 8,我们还可以构建跨平台游戏

这里我们选择Single View Application(这也是我们初学项目最常选项) 这是用户在运行应用程序时看到的屏幕,它占用了设备的整个屏幕空间。
虽然该应用程序是由Xcode创建为单个视图应用程序,但我们可以添加任意数量的视图。

单击下一步按钮,然后给项目名称Hello World。 确保选择Swift作为开发语言
(还不怎么会使用objective-C。。逃)
对于设备,如果希望app在iPad和iPhone上运行,请选择通用。 也还可以选择特定设备。

创建项目后,我们将在窗口左侧的文件树中看到项目中的文件,库和其他项目的列表。 我的看起来像这样:

  • 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 并将其拖动到屏幕顶部,命名并将文字居中。

单击View Controller查看代码。
现在我们来点击白色背景来选择视图。 在右侧,您将看到所选对象的属性。 让我们将视图的背景颜色更改为柔和的绿色。 通过点击背景来做到这一点。

现在再拖一个按钮到屏幕上。改变相应属性,如图所示。 我也改变了文字的颜色并居中。

但仅仅只有用户界面元素是无用的,除非我们可以在代码中识别它们,并根据屏幕上发生的事件执行功能。 例如,当用户点击按钮时,我们需要编写代码来响应该事件。 这样的代码被放在一个Action方法中。 Xcode可以轻松地将屏幕上的对象直接与代码相关联。 我们来看看怎么做

在Xcode 界面右上方

第二个按钮称为助手编辑器。 如果您点击它,将打开一个代码窗口。 例如,假设我们的屏幕上有一个按钮。 点击助手编辑器,我们看到:

单击对象,同时按下control键选择它(在这种情况下为按钮)。 现在从对象拖到代码中,在行类ViewController和override func viewDidLoad之间的区域。 你会看到一个弹出窗口:

一个Outlet将在你的代码中识别这个对象。 我们现在不需要担心存储,所以选weak即可。 键入名称,然后单击connect。 你会看到你的代码如下,如果我们给它的名称helloButton:

同样的方法链接视图中的UILabel,命名为sayHelloLabel.

现在为按钮添加方法:
同样选中按钮,按住control键,此时单击打开“connect”下拉列表,然后选择“Action”。

您还可以选择参数列表,但现在默认值是我们需要的。 命名你的功能 您将在代码中看到如下:

@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.
返回顶部