【iOS】UI学习（一）

目录

• 前言
• 前情内容：如何在xcode里创建UI项目
• UILabel
• UIButton
• • UIButton基础
  • UIButton事件处理
• UIview
• • UIView基础概念
  • UIView的层级关系
• UIWindow对象
• 总结

前言

本篇博客主要介绍了iOS中UI学习的部分知识，即UILabel、UIButton、UiView、UIWindow的相关内容，大部分注释都放在了代码中，这篇博客既是我自己的学习笔记，又希望可以帮到你～

前情内容：如何在xcode里创建UI项目

1.打开xcode，选择"iOS"--->"APP"--->"Next"。

2.给自己的UI项目命名--->将Interface改为"Storyboard"。

3.将Language改为"Objective-C"--->"Next"。

现在就可以开始你的UI之旅啦～（记得在运行代码之前下载苹果模拟机哦）

UILabel

UILabel 是 iOS 编程中用于展示文本的一个基本组件。它是 UIKit 框架的一部分，通常用于在应用程序的用户界面中展示一段静态的，只读的文本，比如标题、子标题或任何用户需要注意的信息。UILabel 有许多可以自定义的属性，比如文本颜色、背景颜色、字体大小、对齐方式等等。

下面我将通过代码来演示U ILabel的基本用法（下述代码在"ViewController.m"中编写）：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

//创建UI控件函数
- (void)creatUI
{
    //定义并且创建一个UILabel对象
    //UILabel是可以显示在屏幕上，并且可以显示文字的一种UI视图
    UILabel* label = [[UILabel alloc] init];
    
    //显示文字的赋值
    label.text = @"浅空天胧🎊 耀月银白🎊 4399😁";//text是字符串对象，赋值时要为字符串，赋值数字会报错
    
    //设定label的显示位置（frame将文字或视图显示在屏幕上时需要的位置------一个矩形）
    label.frame = CGRectMake(100, 150, 200, 300);
    //          （显示位置的横坐标，纵坐标，宽度，高度）
    
    //设置label的背景颜色
    label.backgroundColor = [UIColor yellowColor];
    
    //设置屏幕背景颜色
    self.view.backgroundColor = [UIColor magentaColor];
    
    //将label显示到屏幕上
    [self.view addSubview:label];
    
    //设置label文字大小，使用默认字体，大小为34
    label.font = [UIFont systemFontOfSize:34];
    
    //设置文字颜色
    label.textColor = [UIColor cyanColor];
    
    //label的高级属性
    //设置阴影的颜色
    label.shadowColor = [UIColor grayColor];
    //设置阴影的偏移位置
    label.shadowOffset = CGSizeMake(4, 3);
    //设置文字对齐方式 一般默认为靠左对齐
    label.textAlignment = NSTextAlignmentCenter;
    //设定label文字显示的行数，一般默认为1，只用一行来显示
    //其他>0的行数，文字会尽量按照设定行数来显示
    //如果设定值为0，iOS会自动计算文字所需的行数，按照需要的行数来显示文字
    label.numberOfLines = 0;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    //调用创建UI函数
    [self creatUI];
}

@end

运行结果：

UIButton

UIButton基础

UIButton 是 iOS 开发中的一个基本组件，用于创建和管理在应用程序的用户界面中的按钮。UIButton 是 UIKit 框架的一部分，它提供了一种简单的方式来处理用户的触摸事件。

UIButton可以包含文本、图片或者两者都有。你可以设置按钮的不同状态（如普通、高亮、选中、禁用等）下显示的文本或图片，你还可以自定义按钮的样式，例如改变字体、文本颜色、背景颜色等。

下面通过代码来演示具体用法：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)creatUIButton
{
    //创建一个btn对象，根据类型来创建btn（这里创建一个圆角类型btn：UIButtonTypeRoundedRect）
    //通过类方法来创建buttonWithtype（所有的btn创建都是用的是类方法）
    UIButton* btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    
    //设置btn按钮的位置
    btn.frame = CGRectMake(100, 100, 200, 50);
    //设置按钮的文字内容
    //@parameter（意为参数 下文简写为p）
    //p1:字符串类型，显示到按钮上的文字 p2:设置文字的状态：UIControlStateNormal，正常状态
    [btn setTitle:@"点击这里 启动原神" forState:UIControlStateNormal];
    //    p1:显示的文字             p2:显示文字的状态UIControlStateHighlighted，按下状态
    [btn setTitle:@"原神已经启动！" forState:UIControlStateHighlighted];
    
    //设置背景颜色
    btn.backgroundColor = [UIColor magentaColor];
    //    p1:文字颜色      p2:文字的状态UIControlStateNormal，正常状态
    [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    //    p1:文字颜色      p2:文字的状态UIControlStateHighlighted，按下状态
    [btn setTitleColor:[UIColor yellowColor] forState:UIControlStateHighlighted];
    //设置按钮的风格颜色（对按钮颜色进行统一设置，但其优先级低于TitleColor，即当其与setTitleColor同时存在时，将以TitleColor设置的为准）
    [btn setTintColor:[UIColor whiteColor]];
    //设置字体大小（titleLabel：UILabel空间）
    btn.titleLabel.font = [UIFont systemFontOfSize:22];
    //添加到视图中并显示
    [self.view addSubview:btn];
}

//创建一个图片按钮
- (void)creatImageBtn
{
    //创建一个自定义类型btn
    UIButton* btnImage = [UIButton buttonWithType:UIButtonTypeCustom];
    //设置位置
    btnImage.frame = CGRectMake(100, 200, 100, 100);
    //
    UIImage* icon01 = [UIImage imageNamed:@"btn01.jpg"];
    UIImage* icon02 = [UIImage imageNamed:@"btn02.jpg"];
    
    [btnImage setImage:icon01 forState:UIControlStateNormal];
    [btnImage setImage:icon02 forState:UIControlStateHighlighted];
    [self.view addSubview:btnImage];
}

- (void)viewDidLoad {
    [super viewDidLoad];
     
    [self creatUIButton];
    
    [self creatImageBtn];
}

@end

运行结果：

UIButton事件处理

UIButton 事件处理是指如何响应用户对 UIButton 的操作，例如点击按钮。在 iOS 开发中，你可以为 UIButton 添加不同类型的事件处理函数。这些处理函数会在用户进行特定操作，如点击、按住、双击、拖动等时被调用。这使得你可以在用户与 UIButton 交互时执行特定的代码。

UIButton 的事件处理通常通过addTarget方法来设置。这个方法需要三个参数：目标（target，执行操作的对象）、操作（action，要执行的方法）和控制事件（controlEvent，触发操作的事件类型）。

下面通过代码来演示具体用法：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

//创建按钮函数
- (void)creatBtn
{
    //创建圆角按钮
    UIButton* btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    //设置按钮的位置
    btn1.frame = CGRectMake(100, 100, 100, 100);
    //设置按钮状态
    [btn1 setTitle:@"按钮1🔘" forState:UIControlStateNormal];
    //给按钮添加事件函数(目标函数)
    //p1:"谁"来实现该事件函数，实现的对象就是"谁"
    //p2：@selector(pressBtn):函数对象，当按钮满足p3事件类型时，调用该函数（pressBtn）
    //p3:UIControlEvent：事件处理函数类型（UIControlEventTouchUpInside：当手指离开屏幕且离开时手指的位置在按钮范围内，触发事件类型）
    [btn1 addTarget:self action:@selector(pressBtn:) forControlEvents:UIControlEventTouchUpInside];
    [btn1 addTarget:self action:@selector(touchBtn1) forControlEvents:UIControlEventTouchDown];
    //设置按钮的标记值
    btn1.tag = 1;
    
    [self.view addSubview:btn1];
    
    UIButton* btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn2.frame = CGRectMake(100, 200, 100, 100);
    [btn2 setTitle:@"按钮2🔘" forState:UIControlStateNormal];
    //可以多个按钮使用同一个事件函数来处理不同按钮的事件
    [btn2 addTarget:self action:@selector(pressBtn:) forControlEvents:UIControlEventTouchUpInside];
    
    btn2.tag = 2;
    
    [self.view addSubview:btn2];
}

//- (void)pressBtn1
//{
//    NSLog(@"按钮1🔘被按下！");
//}

- (void)touchBtn1
{
    NSLog(@"按钮1🔘被触碰！");
}

//- (void)pressBtn2
//{
//    NSLog(@"按钮2🔘被按下！");
//}

- (void)pressBtn:(UIButton *)btn
{
    if (btn.tag == 1) {
        NSLog(@"按钮1🔘被按下！");
    }
    if (btn.tag == 2) {
        NSLog(@"按钮2🔘被按下！");
    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [self creatBtn];
}

@end

运行结果：

UIview

UIView 是 iOS 开发中的一个基础组件，它是所有视图或视图相关类的基类，包括按钮、标签、文本框、滑动视图等等。UIView 提供了一系列的方法和属性来管理视图层级（例如添加或移除子视图）、布局（例如设置视图的大小和位置）、绘图（例如设置背景色和透明度）、处理事件（例如点击或滑动）等等。

UIView 可以包含零个或多个子视图（subviews），并且可以添加到其他的视图（superview）上。

UIView基础概念

下面是代码演示：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建一个UIView对象（UIView是iOS中的视图类 是显示在屏幕上的所有的对象的基础类）
    //所有显示在屏幕上的对象一定都继承于UIView，屏幕上能看到的对象都是UIView的子类(图片、文字等)
    //UIView是一个矩形对象，有背景颜色，可以显示，有层级关系
    UIView* view = [[UIView alloc] init];
    
    //设置UIView的位置
    view.frame = CGRectMake(100, 100, 200, 200);
    
    view.backgroundColor = [UIColor cyanColor];
    
    //将新建视图添加到父亲视图上
    //下面这个方法执行两件事：1.将新建的视图显示到屏幕上 2.将视图作为父亲视图的子视图管理起来
    [self.view addSubview:view];
    
    //是否隐藏视图对象(YES：不显示，NO：显示，一般默认为显示)
    view.hidden = NO;
    
    //设置视图的透明度[0(透明)~1(不透明)]
    view.alpha = 0.5;
    self.view.backgroundColor = [UIColor yellowColor];
    
    //设置是否显示不透明(其优先级低于alpha)
    view.opaque = NO;
    
    //将自己从父亲视图中删除掉(1.从父亲视图中删除 2.不会显示在屏幕上)
    //[view removeFromSuperview];
}

@end

运行结果：

UIView的层级关系

UIView 的层级关系是指在一个 iOS 应用程序的用户界面中，视图（UIView）是如何组织和管理的。在 UIView 的层级结构中，每个视图都有一个父视图（superview）和若干个子视图（subviews）。父视图和子视图的关系类似于树结构，其中父视图是树的一个节点，子视图是其下的分支。

特别地，每个 UIView 都有以下几个重要的属性来管理其在视图层级中的位置：

• superview：这个属性指向视图的父视图。如果视图没有父视图（即它是视图层级的根视图），那么这个属性的值就是 nil。
• subviews：这个属性是一个数组，包含了所有的子视图。
  当你将一个视图添加到另一个视图上时，被添加的视图会成为添加它的视图的子视图，同时，添加它的视图会成为它的父视图。例如，如果你调用 viewA.addSubview(viewB)，那么 viewB 就会成为 viewA 的子视图，同时 viewA 会成为 viewB 的父视图。

代码演示：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建三个视图对象
    UIView* view01 = [[UIView alloc] init];
    view01.frame = CGRectMake(100, 100, 150, 150);
    view01.backgroundColor = [UIColor cyanColor];
    
    UIView* view02 = [[UIView alloc] init];
    view02.frame = CGRectMake(125, 125, 150, 150);
    view02.backgroundColor = [UIColor yellowColor];
    
    UIView* view03 = [[UIView alloc] init];
    view03.frame = CGRectMake(150, 150, 150, 150);
    view03.backgroundColor = [UIColor orangeColor];
    
    //将三个视图对象显示到屏幕上并添加到父亲视图上
    [self.view addSubview:view01];
    [self.view addSubview:view02];
    [self.view addSubview:view03];
    //这三个子视图会出现部分覆盖，具有层级关系，最先添加的视图在最下面，后面的会覆盖在前面的上面
    //哪一个视图先被添加到父亲视图中，哪一个就先被绘制
    
    //将某一个视图调整到最上面显示
    [self.view bringSubviewToFront:view01];
    
    //将某一个视图调整到最下面显示
    [self.view sendSubviewToBack:view03];
    
    //subviews管理所有self.view的子视图的数组
    UIView* viewFront = self.view.subviews[2];
    UIView* viewBack = self.view.subviews[0];
    
    if (viewBack == view03) {
        NSLog(@"相等");
    }
    if (viewFront == view01) {
        NSLog(@"也相等");
    }
//    view01.superview; 
//    self.view.superview;//（每个视图只有一个父视图）
    
//    view01.subviews; //（但每个视图可以有若干个子视图）
    
    [view01 removeFromSuperview]; //(写在这里 上面第一个if条件仍然成立)
}

@end

运行结果：

UIWindow对象

"UIWindow" 是 iOS 编程中的一个对象，它是所有视图（View）的容器。在一个 iOS 应用中，所有的视图都在这个窗口内部显示。每一个应用都至少有一个窗口，通常这个窗口在应用启动时创建。在应用的运行过程中，这个窗口一直存在，除非应用被关闭。可以把它看作是一个应用的主舞台，所有的视图都在这个舞台上进行展示。UIWindow 是 UIKit 框架中的一部分，UIKit 是用于构建 iOS 用户界面的框架。

老版本UIWindow的代码是写在"AppDelegate.m"中的。但是现在都不在这里写了，现在写到SceneDelegate.m里面，而且UIWindow对象不需要你手动创建了。------转自糸师凛博客。

代码演示：

- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
    //首先是对UIWindow对象创建视图控制器
    self.window.rootViewController = [[UIViewController alloc] init];
    //对UIWindow设置背景颜色
    self.window.backgroundColor = [UIColor magentaColor];
    //可以直接给window上添加视图
    UIView* view1 = [[UIView alloc] initWithFrame: CGRectMake(100, 100, 100, 50)];
    view1.backgroundColor = [UIColor yellowColor];
    //当创建一个新的背景视图，然后将这个视图作为window的子视图，再让view1作为背景视图的子视图，就会有一个层级关系
    //当移动背景视图的时候，view1视图也会随着移动，子视图是参照父视图的坐标系
    UIView* backView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, 200, 200)];
    backView.backgroundColor = [UIColor cyanColor];
    [backView addSubview: view1];
    //将view1视图添加到window上
    [self.window addSubview: backView];
 
    //打印不同视图的window属性：
    NSLog(@"%@", view1.window);
    NSLog(@"%@", backView.window);
    NSLog(@"%@", self.window);
    //可以看出，它们三个的window属性是同一个window
 
    //使window有效并显示在屏幕上
    [self.window makeKeyAndVisible];
 
}

运行结果：

由此可见，这三个UIView对象具有同一个window属性。

如果我将backView的坐标进行调整，那么加在其上面的子视图view01也会随着其移动。

演示如下：

运行结果：

PS：对于函数didFinishLaunchingWithOptions的介绍分析：当程序框架初始化成功后调用此函数，此函数是用来初始化整个程序的框架结构，是整个程序对iOS开发工程的入口函数。

总结

学习完本篇博客记得要实际操作哦～多加练习才能减少遗忘。