UI学习
一：UIView基础
我们先来介绍一下frame属性
frame属性
frame框架可以理解为视图在父视图中的位置和大小的描述。具体来说，frame框架包括视图的原点坐标和宽高两个属性。
- 原点坐标（origin）：原点坐标表示视图在父视图坐标系统中的位置，通常是相对于父视图左上角的距离。原点坐标是一个CGPoint对象，包括x和y两个属性。
- 宽高（size）：宽高表示视图在父视图中的大小，通常是视图的宽度和高度。宽高是一个CGSize对象，包括width和height两个属性
而CGRectMake是一个用来创建CGRect结构体的函数，该函数传入四个参数，分别为原点坐标的x和y，宽高的width和height。
简而言之，我们对frame属性初始化，传入前两个参数确定开始位置，传入后两个参数作为视图的大小。这也是其他控件的基本属性。
UIview是iOS的视图对象，是显示在屏幕上的所有对象的基础类，
也就是说，所有显示在屏幕上的对象一定都继承与UIView，屏幕上所有能看到的对象都是UIView的子类
- UIView是一个矩形对象，有背景颜色，可以显示，有层级关系
- frame属性是UIView的基本属性，而UiView是其他对象的父类，因此所有对象都有该属性。
下面使用代码来展示UIView的基础内容：
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//初始化一个UIview对象
UIView *view = [[UIView alloc] init];
//设置UIview的位置
view.frame = CGRectMake(100, 100, 100, 200);
view.backgroundColor = [UIColor orangeColor];
//将新建的视图添加到父亲视图上
//1:将新建的视图显示到屏幕上
//2：将视图作为父亲视图的子视图管理起来
[self.view addSubview:view];
//将自己从父亲视图删除掉
//1.从父亲视图的管理中删除
//2.不会显示在屏幕。
//[view removeFromSuperview] ;
}
效果：
隐藏视图对象：
分别有三种方法：
- 设置hidde属性：是否隐藏
- 设置alpha属性：设置透明度
- 设置opaque属性：是否显示不透明
//是否隐藏视图对象
//YES：不显示
//NO：显示，默认值为NO
view.hidden = YES;
//设置视图的透明度
//alpha= 1：不透明
//a = 0 ：透明
//a = 0.5: 半透明
view.alpha = 1;
//设置是否显示不透明
view.opaque = YES;
UIView的层级关系
UIview是在父视图中可以用self.view.subviews[]的数组下标来查看，而这个数组是有顺序的，即层级关系。
- 先加入的视图，在数组的开始，即在屏幕的最底层。
- 重复加入，不会开辟新的数组位置，而是移动数组的排序方式。
- 可以使用bringSubviewToFront、sendSubviewToBack等方法来改变视图的顺序。
- removeFromSuperview方法可以删除子视图。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UIView *view1 = [[UIView alloc] init];
view1.frame = CGRectMake(100, 100, 150, 150);
view1.backgroundColor = [UIColor orangeColor];
UIView *view2 = [[UIView alloc] init];
view2.frame = CGRectMake(125, 125, 150, 150);
view2.backgroundColor = [UIColor blueColor];
UIView *view3 =[[UIView alloc] init];
view3.frame = CGRectMake(150, 150, 150, 150);
view3.backgroundColor = [UIColor blackColor];
//将三个视图对象显示到屏幕上并且添加到父亲视图上。
//重复加入已有元素，不会扩大数组，而是移动数组
[self.view addSubview:view1];
[self.view addSubview:view2];
[self.view addSubview:view3];
[self.view addSubview:view1];
//[self.view addSubview:view2];
//将某一个视图调整到最前面显示
//参数：UIView对象，调整到一个视图到最前方
//实际上也移动了数组的位置。
// [self.view bringSubviewToFront:view1];
//将某一个视图调整到最后显示
//参数：UIView对象，调整哪一个视图到最后
//实际上也移动了数组的位置
// [self.view sendSubviewToBack:view3];
UIView *viewFront = self.view.subviews[0];
// [view1 removeFromSuperview];
UIView *viewBack = self.view.subviews[2];
if (viewFront == view2) {
NSLog(@"等于");
}
if (viewBack == view1) {
NSLog(@"等于");
}
}
效果：
同时，我们可以验证重复添加视图，是移动数组位置而不是创建新的数组。
二：UIWindow对象
注意：在XCode13之后我们使用代码来创建初始化一个UIWindow对象不在AppDelegate类中进行，而是在SceneDelegate类进行，并且不需要创建UIWindow对象，只需要为其初始化视图管理器后即可进行使用。
UIWindow对象是UIView最顶层的容器，包含应用并显示所有的UIView对象。同时，也可以反映传递事件给UIView。
下面是UIWindow的一些基本使用。
SceneDelegate.m文件
#import "SceneDelegate.h"
@interface SceneDelegate ()
@end
@implementation SceneDelegate
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
//对UIWindow对象创建视图控制器
self.window.rootViewController = [[UIViewController alloc] init] ;
//设置背景颜色
self.window.backgroundColor = [UIColor blackColor];
//直接给window上添加视图
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 200)];
view1.backgroundColor = [UIColor blueColor];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(150, 0, 50, 200)];
view2.backgroundColor = [UIColor redColor];
//当创建一个新的背景视图，然后将这个视图作为window的子视图，再让view1作为背景视图的子视图，就会有一个层级关系
//当移动背景视图的时候，view1视图也会随着移动，子视图是参照父视图的坐标系
UIView *backview = [[UIView alloc] initWithFrame:CGRectMake(100, 400, 200, 200)];
backview.backgroundColor = [UIColor whiteColor];
//将子视图添加到爸爸视图上
[backview addSubview:view1];
[backview addSubview:view2];
[self.window addSubview:backview];
NSLog(@"%@", view1.window);
NSLog(@"%@", backview.window);
NSLog(@"%@", self.window);
//使window有效并显示到屏幕上
[self.window makeKeyAndVisible];
}
效果：
同时，通过对三个window对象的打印，我们可以印证整个程序仅有一个UIWindow对象。
三：UIViewController基础
UIViewController是视图控制器的意思。整个UIKit框架中只能有一个根视图控制器，属于window属性，但是可以有多个视图控制器，视图控制器用来管理界面和处理界面的逻辑类对象，程序启动前必须对根视图控制器赋值。
我们在SceneDelegate.m文件中实现对根视图控制器的初始化。
#import "SceneDelegate.h"
#import "ViewController.h"
@interface SceneDelegate ()
@end
@implementation SceneDelegate
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
ViewController *vcRoot = [[ViewController alloc] init];
self.window.rootViewController = vcRoot;
self.window.backgroundColor = [UIColor redColor];
}
UIViewController使用
通过对UIViewController的学习，我们可以实现视图控制界面的切换。下面我们实操来加深学习。
首先，我们需要创建视图控制器，并为其初始化不同的颜色。
之后我们可以调用presentViewController方法，实现显示一个新的视图控制器界面到屏幕上。再在新的view文件中使用dismissViewControllerAnimated方法(关闭当前视图控制器界面)，回到原来的视图控制器界面。
具体实现代码：
ViewController.m文件
#import "ViewController.h"
#import "ViewC02.h"
@interface ViewController ()
@end
@implementation ViewController
-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
//创建视图控制器二
ViewC02* vc = [[ViewC02 alloc] init];
//整个屏幕
vc.modalPresentationStyle = UIModalPresentationFullScreen;
//显示一个新的视图控制器到屏幕上
//P1:新的视图控制器对象
//P2：使用动画切换动画效果
//P3:切换结束后功能调用，不需要则穿nil
[self presentViewController:vc animated:YES completion:nil];
}
//第一次程序加载视图时调用
//只调用一次
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor blueColor];
NSLog(@"viewDidLoad 第一次加载!");
}
//当视图控制器的视图即将显示时，调用次函数
//视图分为：1.显示前 2.正在处于显示状态 3.已经被隐藏
//参数：是否用动画切换后显示
- (void) viewWillAppear:(BOOL)animated
{
NSLog(@"viewWillAppear,视图即将显示！");
}
//视图即将消失，调用次函数
//参数：表示是否用动画切换后消失
//当前的状态：视图还显示在屏幕上
-(void) viewWillDisAppear:(BOOL)animated
{
NSLog(@"视图即将消失！");
}
//当视图已经显示到屏幕后到瞬间调用次函数
//参数：表示是否用动画切换显示的
//当前状态:已经显示到屏幕上
-(void) viewDidAppear:(BOOL)animated
{
NSLog(@"视图已经显示");
}
//当前视图已经从屏幕上消失
//参数：表示是否用动画切换显示的
//当前状态:当前视图控制器视图已经消失
-(void) viewDidDisappear:(BOOL)animated
{
NSLog(@"视图已经消失！");
}
@end
ViewC02.m文件：
#import "ViewC02.h"
@interface ViewC02 ()
@end
@implementation ViewC02
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor orangeColor];
}
-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
//点击屏幕后使当前视图控制器界面消失。
[self dismissViewControllerAnimated:YES completion:nil];
}
效果：点击前：
点击后：
上图代码中，我们还加入了一些操作函数，来显示屏幕的调用。
注意：添加下述代码后，才会使整个屏幕切换，从而显示viewDidDisappear操作函数。
vc.modalPresentationStyle = UIModalPresentationFullScreen;
代码运行结果：
四：定时器与视图移动
创建一个定时器，先要在接口文件中创建NSTimer属性。
@property (retain, nonatomic) NSTimer *timerVier;
之后，采用scheduledTimerWithTimeInterval:的类方法来创建定时器。并启动该定时器。
该方法有五个参数：
P1:每隔多长时间调用定时器函数，以秒为单位
P2：表示实现定时器函数的对象（指针）
P3:定时器函数对象
P4：可以传入定时器函数中一个参数，无参数可以传nil
P5:定时器是否重复操作，YES为重复，NO只完成一次函数调用
而我们要实现使指定view对象移动，需要先为view对象设置一个标签值，在定时器的事件函数中进行使用。
下列代码中的view.frame =CGRectMake(view.frame.origin.x+1, view.frame.origin.y+1, 80, 80);即实现这一功能，使view视图的x，y轴随时间移动。
ViewController.m文件
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize timerVier = _timerVier;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btn.frame = CGRectMake(100, 100, 80, 40);
[btn setTitle:@"启动定时器" forState:UIControlStateNormal];
[btn addTarget:self action:@selector((pressStart)) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
UIButton *btnStop = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btnStop.frame = CGRectMake(100, 200, 80, 40);
[btnStop setTitle:@"停止定时器" forState:UIControlStateNormal];
[btnStop addTarget:self action:@selector(pressStop) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btnStop];
UIView *view = [[UIView alloc] init];
view.frame = CGRectMake(0, 0, 80, 80);
view.backgroundColor = [UIColor blueColor];
[self.view addSubview:view];
//设置view对标签值
//通过爸爸视图对象以及view的标签值可以获得相应的对象
view.tag = 101 ;
}
//按下开始按钮函数
- (void) pressStart
{
//NSTimer的类方法创建一个定时器并启动这个定时器
//P1:每隔多长时间调用定时器函数，以秒为单位
//P2：表示实现定时器函数的对象（指针）
//P3:定时器函数对象
//P4：可以传入定时器函数中一个参数，无参数可以传nil
//P5:定时器是否重复操作，YES为重复，NO只完成一次函数调用
//返回值为一个新建好的定时器对象
_timerVier = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(updateTimer:) userInfo:@"lyf" repeats:YES];
}
//定时器函数
//可以将定时器本身作为参数传入
-(void) updateTimer:(NSTimer*) timer
{ //userInfo为id类型
NSLog(@"test!! name = %@", timer.userInfo);
//tag最好从100开始
UIView *view = [self.view viewWithTag:101];
view.frame =CGRectMake(view.frame.origin.x+1, view.frame.origin.y+1, 80, 80);
}
//按下停止按钮时调用
-(void) pressStop
{
if (_timerVier != nil)
{
//停止定时器
[_timerVier invalidate];
}
}
@end
效果：
还有一点需要注意：如果对上述代码连续点击两次启动定时器，此时再按停止定时器将无法停止视图移动。
原因：每次点击都创造出一个定时器对象，从而使第一次点击的定时器对象无法覆盖。即无法再停止第一个定时器对象，只能停止新建立的定时器对象。
解决办法：将该属性变成单例模式，或者每次进入pressStart时，调用一遍结束方法。即：
- (void) pressStart
{
[self pressStop];//每次调用前先关闭前一个定时器。
_timerVier = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(updateTimer:) userInfo:@"lyf" repeats:YES];
}
五：UISwitch控件
UISwitch控件是苹果官方库提供的一个控件，与定时器相同，需要先在接口部分声明一个属性，在实现部分实现其具体功能。
但是，作为苹果官方的控件，苹果对其作出了一定的限制：如无法改变宽度高度值和设计样式。
下例代码详细展示了该控件的使用：
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize mySwitch = _mySwitch;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//创建一个开关对象
_mySwitch = [[UISwitch alloc] init];
//苹果官方的控件的位置设置
//位置X，Y的值可以改变
//宽度高度值是无法改变。系统默认设置了
_mySwitch.frame = CGRectMake(100, 100, 0, 0);
//开关状态设置属性
//YES：开启状态
//NO：关闭状态
//_mySwitch.on = YES;
//[_mySwitch setOn:YES];
//设置开关状态
//P1:状态设置
//P2:是否开启动画效果
[_mySwitch setOn:YES animated:YES];
[self.view addSubview:_mySwitch];
//设置开启状态的风格颜色
[_mySwitch setOnTintColor:[UIColor orangeColor]];
//设置开关圆按钮的风格颜色
[_mySwitch setThumbTintColor:[UIColor blueColor]];
//设置整体风格颜色 没作用原因已截图
[_mySwitch setTintColor:[UIColor redColor]];
//向开关控件添加事件函数
//P1:函数实现对象
//P2：函数对象
//P3：事件响应时的事件类型UIControlEventValueChanged：状态发生变化
[_mySwitch addTarget:self action:@selector(swChange:) forControlEvents:UIControlEventValueChanged];
}
- (void) swChange:(UISwitch*) sw
{
if (sw.on == YES) {
NSLog(@"哈哈,打开咯");
}
else {
NSLog(@"哈哈，关闭咯");
}
NSLog(@"我变质了");
}
@end
代码结果：
六：滑动条和进度条
滑动条与进度条也需要在接口部分定义属性，在实现部分实现功能。
除了对这两个的基本使用，我们还可以实现用滑动条来控制进度条的长短，当滑动条与进度条不是相同长度时，我们可以使用下面的代码来实现等比例控制。
pView.progress = (_slider.value - _slider.minimumValue) / (_slider.maximumValue - _slider.minimumValue);
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
//进度条对象
//一般用来表示下载或者视频播放的进度
UIProgressView * pView;
//滑动条定义
//一般用来进行调整音频音乐的音量等
UISlider *_slider;
}
//定义一个进度条属性
@property (retain, nonatomic) UIProgressView *pView;
//定义一个滑动条属性
@property (retain, nonatomic) UISlider *slider;
@end
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize slider = _slider;
@synthesize pView = _pView;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//进度条的创建
pView = [[UIProgressView alloc] init];
//进度条的位置大小设置
//进度条的高度是不可以变化的.P4不可变
pView.frame = CGRectMake(50, 100, 300, 40);
pView.progressTintColor = [UIColor greenColor];
pView.trackTintColor = [UIColor blackColor];
//设置进度条的进度值
//范围从0-1
//最小值为0，最大值为1
pView.progress = 0;
//设置进度条的风格特征
pView.progressViewStyle = UIProgressViewStyleBar;
[self.view addSubview: pView];
//创建滑动条对象
_slider = [[UISlider alloc] init];
//位置设置，高度不可变更
_slider.frame = CGRectMake(10, 200, 300, 40);
//设置滑动条的最大值
_slider.maximumValue = 100;
//设置滑动条的最小值，可以为负
_slider.minimumValue = -100;
//设置滑动条的滑块位置
_slider.value = 0;
//左侧滑条背景颜色
// _slider.minimumTrackTintColor = [UIColor blueColor];
//右侧滑动条背景颜色
_slider.maximumTrackTintColor = [UIColor greenColor];
//设置滑块颜色
_slider.thumbTintColor = [UIColor orangeColor];
[_slider addTarget:self action:@selector(pressSlider) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:_slider];
}
-(void) pressSlider
{
pView.progress = (_slider.value - _slider.minimumValue) / (_slider.maximumValue - _slider.minimumValue);
NSLog(@"value = %f", _slider.value);
}
@end
效果：
七：步进器和分栏控件
先要在接口文件中定义步进器对象和分栏控制器对象。
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
//定义步进器对象
//按照一定的数字来调整某个数据
UIStepper *_stepper;
//分栏控制器定义
UISegmentedControl *_segControl;
}
@property (retain, nonatomic) UIStepper *stepper;
@property (retain, nonatomic) UISegmentedControl *segControl;
@end
在.m文件中，我们不仅可以以文本来初始化分拦控件，还可以以照片来初始化分拦控件。
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize stepper = _stepper;
@synthesize segControl = _segControl;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
_stepper = [[UIStepper alloc] init];
//只能设置位置，宽高不能改变
_stepper.frame = CGRectMake(100, 100, 80, 40);
//设置步进器的最小值
_stepper.minimumValue = 0;
//设置步进器的最大值
_stepper.maximumValue = 100;
//设置步进器的当前值，默认值为0
_stepper.value = 10;
//设置步进器每次向前或者向后步进的步伐值
_stepper.stepValue = 5;
//是否可以重复响应事件操作
_stepper.autorepeat = YES;
//是否将步进结果通过事件函数响应出来
//不显示中间过程，长按直接显示结果。
_stepper.continuous = NO;
//添加事件函数
[_stepper addTarget:self action:@selector(stepChange) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:_stepper];
_segControl = [[UISegmentedControl alloc] init];
//宽度可变，高度不可变
_segControl.frame = CGRectMake(10, 200, 300, 40);
//添加一个按钮元素
[_segControl insertSegmentWithTitle:@"0元" atIndex:0 animated:NO];
//参数一：按钮选项文字
//参数二：按钮索引位置
//参数三：是否有插入的动画效果
[_segControl insertSegmentWithTitle:@"5元" atIndex:1 animated:NO];
[_segControl insertSegmentWithTitle:@"10元" atIndex:2 animated:NO];
// [_segControl insertSegmentWithTitle:@"30元" atIndex:0 animated:NO];
//以照片作为分拦控件的图像。
//注意要将照片放入当前视图内。
UIImage *image = [UIImage imageNamed:@"WechatIMG26890.jpg"];
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[_segControl setImage:image forSegmentAtIndex:2];
//当前默认按钮索引设置
_segControl.selectedSegmentIndex = 0;
[_segControl addTarget:self action:@selector(segChange) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:_segControl];
}
-(void) segChange
{
NSLog(@"%d", _segControl.selectedSegmentIndex);
}
-(void) stepChange
{
NSLog(@"step press! value = %f", _stepper.value);
}
@end
效果
代码结果：
总结
在定时器与视图移动中，OC学习的单例模式在这里起到了很大作用，知识是融会贯通的，要多思考，多使用，多敲打。
在对分拦控件的学习中，对如何将图片作为一栏的学习，才脱离了