当前位置：首页 > news >正文

【iOS初体验】Hello, UIKit! - 第一个iOS App保姆式教程

news 来源：原创 2025/6/28 6:29:42

第一步：创建项目

第二步：了解项目结构

第三步：认识核心概念

第四步：纯代码方式创建UI

头文件 (ViewController.h)

实现文件 (ViewController.m)

第五步：运行应用

第六步：使用Interface Builder设计界面(了解即可)

显示对象库

设置组件属性

第七步：连接界面与代码

创建IBOutlet（连接视图到代码）

创建IBAction（连接按钮点击事件）

第一步：创建项目

打开Xcode（确保你已安装最新版本）
点击"Create New Project..."
选择"App"模板（在iOS选项卡下），点击"Next"
填写项目信息：
- Product Name: HelloUIKit
- Interface: Storyboard
- Language: Objective-C
选择保存位置，点击"Create"

Product Name（产品名称）:输入你的应用程序的名称。在这个例子中是 HelloUIKit。
Team（团队）:选择你的开发者账号或团队。点击“Add account...”可以添加新的开发者账号。
Organization Identifier（组织标识符）:输入你的组织或公司的唯一标识符，通常是反向域名格式，例如 com.scc。
Bundle Identifier（包标识符）:这是应用程序的唯一标识符，通常由组织标识符和产品名称组合而成，例如 com.scc.HelloUIKit。
Interface（界面）:选择应用程序的界面类型。在这个例子中是 Storyboard，表示使用Storyboard文件来设计界面。
Language（语言）:选择编程语言。在这个例子中是 Objective-C，但你也可以选择 Swift。
Testing System（测试系统）:选择测试框架。在这个例子中是 None，表示不使用任何测试框架。你也可以选择 XCTest 等。
Storage（存储）:选择数据存储方式。在这个例子中是 None，表示不使用任何内置的数据存储解决方案。
Host in CloudKit（托管在CloudKit中）:这是一个复选框，可以选择是否将应用程序的数据托管在iCloud的CloudKit服务中。

第二步：了解项目结构

创建完成后，你会看到以下重要文件：

AppDelegate.h/.m：应用委托，处理应用生命周期事件
SceneDelegate.h/.m：场景委托（iOS 13+），管理应用窗口场景
ViewController.h/.m：我们的主视图控制器
Main.storyboard：界面设计文件
main.m：应用程序的入口文件，包含main函数，负责启动应用程序。
AppDelegate.m：应用程序委托的实现文件，包含应用程序生命周期方法的具体实现。
Assets.xcassets：资源目录，用于存储应用程序的图像、颜色和其他资源文件。
Info.plist：应用程序的信息属性列表文件，包含应用程序的配置信息，如应用程序名称、版本号、权限等。
LaunchScreen.storyboard：启动屏幕的Storyboard文件，定义了应用程序启动时的初始界面。

AppDelegate是应用的入口点，而SceneDelegate（iOS 13+）负责管理应用窗口场景。当应用启动时，系统会创建这些对象并调用它们的方法。

第三步：认识核心概念

在开始编码前，先了解几个核心概念：

UIWindow：应用的窗口，是所有视图的容器
UIViewController：视图控制器，管理一个视图层次结构
UIView：屏幕上可见的基本元素，可以包含其他视图

第四步：纯代码方式创建UI

头文件 (ViewController.h)

声明了 UILabel 和 UIButton 属性
声明了按钮点击事件处理方法

实现文件 (ViewController.m)

#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// 创建 Labelself.myLabel = [[UILabel alloc] init];self.myLabel.text = @"Hello, World!";self.myLabel.textAlignment = NSTextAlignmentCenter;self.myLabel.font = [UIFont systemFontOfSize:24];self.myLabel.translatesAutoresizingMaskIntoConstraints = NO;// 创建 Buttonself.myButton = [UIButton buttonWithType:UIButtonTypeSystem];[self.myButton setTitle:@"Click Me" forState:UIControlStateNormal];self.myButton.titleLabel.font = [UIFont boldSystemFontOfSize:18];self.myButton.backgroundColor = [UIColor systemBlueColor];[self.myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];self.myButton.layer.cornerRadius = 8;self.myButton.translatesAutoresizingMaskIntoConstraints = NO;// 添加点击事件[self.myButton addTarget:selfaction:@selector(buttonTapped:)forControlEvents:UIControlEventTouchUpInside];// 添加到视图[self.view addSubview:self.myLabel];[self.view addSubview:self.myButton];// 设置 Auto Layout 约束[NSLayoutConstraint activateConstraints:@[// Label 水平居中[self.myLabel.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],// Label 距离安全区顶部 100 点[self.myLabel.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor constant:100],// Button 水平居中[self.myButton.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],// Button 在 Label 下方 40 点[self.myButton.topAnchor constraintEqualToAnchor:self.myLabel.bottomAnchor constant:40],// Button 宽度 200 点[self.myButton.widthAnchor constraintEqualToConstant:200],// Button 高度 50 点[self.myButton.heightAnchor constraintEqualToConstant:50]]];
}// 按钮点击事件处理
- (void)buttonTapped:(UIButton *)sender {NSLog(@"Button was tapped!");// 可以在这里添加点击后的逻辑// 示例：改变 Label 文本self.myLabel.text = @"Button Clicked!";// 示例：改变按钮背景色sender.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0green:arc4random_uniform(255)/255.0blue:arc4random_uniform(255)/255.0alpha:1.0];
}@end

创建 Label:

使用 UILabel alloc] init] 初始化
设置文本、对齐方式、字体等属性
translatesAutoresizingMaskIntoConstraints = NO 启用 Auto Layout

创建 Button:

使用 [UIButton buttonWithType:UIButtonTypeSystem] 初始化
设置标题、字体、背景色、圆角等样式
添加点击事件 buttonTapped:

布局约束:

使用 NSLayoutAnchor API 进行 Auto Layout 约束
Label 水平居中，距离安全区域顶部 100 点
Button 在 Label 下方 40 点，宽度 200 点，高度 50 点

按钮点击事件:

打印日志到控制台
示例功能：改变 Label 文本和按钮背景色

第五步：运行应用

点击Xcode左上角的运行按钮（或按Command + R）
选择模拟器设备（如iPhone 13）
等待应用编译并启动
在模拟器中点击按钮，观察标签文字和按钮的变化

第六步：使用Interface Builder设计界面(了解即可)

除了使用纯代码创建界面，我们可以用Interface Builder。

在项目导航器中点击Main.storyboard
你会看到一个空白的视图控制器场景
从右下角的对象库（Object Library）中拖拽以下组件到视图上：
- 一个UILabel（标签）
- 一个UIButton（按钮）

显示对象库

打开 Interface Builder
- 在项目导航器中打开你的故事板（.storyboard）或 XIB 文件（.xib）。
显示对象库
- 方法 1：点击 Xcode 右上角工具栏的 库图标（矩形重叠图标，或按快捷键 ⇧⌘L）。
- 方法 2：顶部菜单栏选择 View → Libraries → Show Library。

设置组件属性

选择标签，在属性检查器（Attributes Inspector）中：
- 修改文本为"Hello, UIKit!"
- 调整字体大小和颜色
- 使用自动布局约束居中标签
选择按钮，在属性检查器（Attributes Inspector）中：
- 修改标题为"点击我"
- 设置背景颜色等样式

第七步：连接界面与代码

我们需要将界面元素与代码关联起来，这样就能在代码中操作它们。

创建IBOutlet（连接视图到代码）

打开辅助编辑器（Assistant Editor），同时显示ViewController.h和故事板
按住Control键，从标签拖拽到ViewController.h的@interface部分
在弹出的对话框中：
- 名称输入helloLabel
- 点击"Connect"

这会创建一个属性，让你可以在代码中访问这个标签。

创建IBAction（连接按钮点击事件）

按住Control键，从按钮拖拽到ViewController.h的@interface部分
在弹出的对话框中：
- 连接类型选择"Action"
- 名称输入buttonTapped
- 事件类型保持"Touch Up Inside"
- 点击"Connect"

这会在ViewController.m中创建一个方法，当按钮被点击时会调用这个方法。

#import <UIKit/UIKit.h>@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *helloLable;- (IBAction)buttonTips:(id)sender;@end

【iOS初体验】Hello, UIKit! - 第一个iOS App保姆式教程

第一步：创建项目

第二步：了解项目结构

第三步：认识核心概念

第四步：纯代码方式创建UI

头文件 (ViewController.h)

实现文件 (ViewController.m)

第五步：运行应用

第六步：使用Interface Builder设计界面(了解即可)

显示对象库

设置组件属性

第七步：连接界面与代码

创建IBOutlet（连接视图到代码）

创建IBAction（连接按钮点击事件）

相关推荐

相关文章：