UI学习入门 - 技术栈

UI 学习入门

文章目录

[UI 学习入门](#UI 学习入门)
- UILabel
- UIButton
- UIView
- - UIWindow
- UIViewController
- 总结

在 iOS 开发中，UIKit 框架提供了丰富的界面控件。本文将通过实际代码示例，介绍 UILabel、UIButton、UIView 以及 UIViewController 的基础用法

UILabel

UILabel 用于展示静态文本，支持设置字体、颜色、对齐方式、阴影、行数等属性。

objectivec

objectivec 复制代码

-(void) creatUI {
    //创建一个lable对象
    UILabel *lable = [[UILabel alloc] init];
    //文字赋值
    lable.text = @"Hello";
    
    lable.frame = CGRectMake(150, 300, 150, 100);
    //lable背景色
    lable.backgroundColor = [UIColor blueColor];
    //屏幕背景颜色
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:lable];
    //设置lable的大小字体
    lable.font = [UIFont systemFontOfSize:32];
    //设置文字颜色
    lable.textColor = [UIColor blackColor];
    //lable的高级属性
    //设置lable的文字阴影颜色
    lable.shadowColor = [UIColor grayColor];
    //设置阴影偏移位置
    lable.shadowOffset = CGSizeMake(3, 3);
    //设置text文字的对齐方式，默认靠左对齐
    lable.textAlignment = NSTextAlignmentCenter;
    //设置行数，文字尽量占满你所设的行数，为0时则自动计算所需要的行数
    lable.numberOfLines = 0;
}

代码说明：

创建 UILabel 对象后，先设置文本内容 text。
通过 frame 确定控件位置和大小。
设置背景色和父视图背景色。
必须调用 addSubview: 才能显示。
可以设置字体、文字颜色、阴影、对齐方式等。
numberOfLines = 0 表示自动换行，不限制行数。

UIButton

UIButton 可以响应点击事件，支持设置不同状态下的标题、颜色、图片等。

普通按钮

objectivec 复制代码

-(void) creatUTRectButton {
    UIButton* b1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    b1.frame = CGRectMake(100, 100, 100, 40);
    [b1 setTitle:@"按钮1" forState:UIControlStateNormal];
    [b1 setTitle:@"按钮1被按下" forState:UIControlStateHighlighted];
    b1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:b1];
    [b1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [b1 setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
    [b1 setTintColor:[UIColor greenColor]];
    b1.titleLabel.font = [UIFont systemFontOfSize:12];
}

说明：

buttonWithType:UIButtonTypeRoundedRect 创建圆角按钮。
setTitle:forState: 设置不同状态（normal / highlighted）下的标题。
通过 setTitleColor:forState: 设置不同状态下的文字颜色。
tintColor 可能影响部分样式，此处仅作演示。

自定义图片按钮

objectivec 复制代码

-(void) creatImagebtn {
    UIButton* b2 = [UIButton buttonWithType:UIButtonTypeCustom];
    b2.frame = CGRectMake(100, 300, 200, 200);
    UIImage* icon01 = [UIImage imageNamed:@"123.jpg"];
    UIImage* icon02 = [UIImage imageNamed:@"456.jpg"];
    [b2 setImage:icon01 forState:UIControlStateNormal];
    [b2 setImage:icon02 forState:UIControlStateHighlighted];
    [self.view addSubview:b2];
}

说明：

UIButtonTypeCustom 自定义按钮，无系统样式。
加载图片需要使用 [UIImage imageNamed:]，图片需提前添加到项目中。
通过 setImage:forState: 设置不同状态下的图片。

按钮事件处理

objectivec 复制代码

-(void) creatUI {
    UIButton* b3 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    b3.frame = CGRectMake(100, 500, 200, 200);
    [b3 setTitle:@"按钮" forState:UIControlStateNormal];
    [b3 addTarget:self action:@selector(pressb3:) forControlEvents:UIControlEventTouchUpInside];
    [b3 addTarget:self action:@selector(touchDown) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:b3];
    UIButton* b4 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    b4.frame = CGRectMake(100, 700, 200, 200);
    [b4 setTitle:@"按钮2" forState:UIControlStateNormal];
    [b4 addTarget:self action:@selector(pressb3:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:b4];
    b3.tag = 100;
    b4.tag = 101;
}

-(void) touchDown {
    NSLog(@"按钮被触碰");
}
-(void) pressb3 : (UIButton*) btn {
    if (btn.tag == 100) {
        NSLog(@"按钮被按下");
    }
    if (btn.tag == 101) {
        NSLog(@"按钮2被按下");
    }
}

说明：

addTarget:action:forControlEvents: 为按钮添加事件监听。
UIControlEventTouchUpInside：手指在按钮范围内抬起时触发。
UIControlEventTouchDown：手指按下瞬间触发。
通过 tag 属性区分多个按钮，共用一个响应方法。

UIView

UIView 是所有可见控件的基类，可以管理位置、大小、背景色、透明度等。

objectivec 复制代码

-(void) creatView {
    UIView* view = [[UIView alloc] init];
    view.frame = CGRectMake(100, 100, 100, 100);
    view.backgroundColor = [UIColor blackColor];
    [self.view addSubview:view];
    view.hidden = NO;
    view.alpha = 0.5;
    self.view.backgroundColor = [UIColor redColor];
    view.opaque = NO;
    [view removeFromSuperview];
}

说明：

创建 UIView 并设置 frame 和背景色。
添加到父视图后才能显示。
hidden 控制是否隐藏；alpha 控制透明度（0~1）。
opaque 表示是否不透明，影响绘制性能（通常不需要手动设置）。
removeFromSuperview 将视图从父视图中移除。

UIWindow

UIWindow 是所有视图的顶层容器，负责承载整个应用界面。通常由系统自动创建，但也可以手动配置。

objectivec 复制代码

self.window.rootViewController = [[UIViewController alloc] init];
self.window.backgroundColor = [UIColor grayColor];
UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 150, 120)];
v1.backgroundColor = [UIColor blueColor];
UIView* backView = [[UIView alloc] initWithFrame:CGRectMake(50, 75, 400, 300)];
UIView* v2 = [[UIView alloc] initWithFrame:CGRectMake(35, 35, 50, 50)];
v2.backgroundColor = [UIColor whiteColor];
backView.backgroundColor = [UIColor redColor];
[backView addSubview:v1];
[backView addSubview:v2];
[self.window addSubview:backView];
NSLog(@"%@", v1.window);
NSLog(@"%@", backView.window);
NSLog(@"%@", self.window);
[self.window makeKeyAndVisible];

代码说明：

rootViewController：为窗口设置根视图控制器，窗口会管理该控制器的视图。
backgroundColor：设置窗口背景色（灰色）。
创建三个视图 v1（蓝色）、backView（红色）、v2（白色），并通过 addSubview: 构建层级：backView 包含 v1 和 v2，窗口包含 backView。
view.window 属性：返回视图所在的 UIWindow 对象。由于所有视图最终都添加到窗口，所以三个 window 打印结果相同。
makeKeyAndVisible：将窗口设置为主窗口并显示，没有这一行界面不会显示。

UIViewController

视图控制器负责管理一个视图层级，处理界面逻辑和生命周期。

objectivec 复制代码

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor blueColor];
}

-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self dismissViewControllerAnimated:YES completion:nil];
}

说明：

viewDidLoad 在视图加载完成后调用，适合做初始化。
touchesBegan:withEvent: 是 UIResponder 的方法，点击屏幕任意位置会触发。
dismissViewControllerAnimated:completion: 关闭当前模态弹出的控制器。

objectivec 复制代码

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor redColor];
    NSLog(@"第一次加载视图");
}

-(void) viewWillAppear:(BOOL)animated {
    NSLog(@"将要显示");
}

-(void) viewWillDisappear:(BOOL)animated {
    NSLog(@"将要消失");
}

-(void) viewDidAppear:(BOOL)animated {
    NSLog(@"已显示");
}

-(void) viewDidDisappear:(BOOL)animated {
    NSLog(@"已消失");
}

说明：

viewWillAppear: 视图即将显示时调用。
viewDidAppear: 视图已经显示后调用。
viewWillDisappear: 视图即将消失时调用。
viewDidDisappear: 视图已经消失后调用。
这些方法常用于更新 UI、暂停/恢复动画等。

objectivec 复制代码

-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    ViewController01* v1 = [[ViewController01 alloc] init];
    [self presentViewController:v1 animated:YES completion:nil];
}

说明：

创建一个新的视图控制器实例 ViewController01。
presentViewController:animated:completion: 以模态方式展示新控制器，常用于临时界面（如登录、提示框）。
新控制器可以通过 dismissViewControllerAnimated:completion: 返回。

总结

本文通过纯代码的形式，演示了 iOS 开发中几个最基础的 UI 组件：

UILabel：显示文本，支持字体、颜色、阴影、对齐、自动换行。
UIButton：响应点击，支持不同状态下的标题、颜色、图片，以及事件绑定。
UIView：所有控件的基类，管理位置、大小、背景、透明度等。
UIWindow：所有视图的根容器，负责显示窗口和管理视图层级。
UIViewController：管理视图生命周期，实现页面跳转（模态）。