【iOS】UI学习（二）

媒介

  本篇博客是笔者在学习UI部门内容时的效果和碰到的一些问题，既是我本身的学习条记，也希望对你有帮助～
UIViewContorller

UIViewContorller基础

  UIViewController 是 iOS 开发中的一个核心组件，它负责管理和和谐应用中的视图和视图之间的交互。每一个屏幕页面通常都对应于一个 UIViewController 对象。
UIViewController 的主要职责包括：

• 加载和卸载视图。
  
• 在视图显示或隐藏时接收相关的通知。
  
• 在装备方向改变时调解视图的结构。
  
• 在内存不足时释放不必要的资源。
  
• 和谐视图和其他对象（如数据模子、导航控制器等）之间的交互。
  

在使用 UIViewController 时，通常必要覆盖和实现一些方法，如：

• viewDidLoad：视图加载完成后调用，这是初始化视图的好地方。
  
• viewWillAppear: 和 viewWillDisappear:：视图即将显示或隐藏时调用。
  
• viewDidLayoutSubviews：视图的子视图结构完成后调用，这是调解视图结构的好地方。
  

UIViewContorller使用

  由于要举行视图切换，以是我们必要重新创建一个新的ViewController类。方法如下：
1.“command+N”进入xcode创建项目新文件界面。

2.选择“Cocoa Touch Class”—>“Next”。

3.在“Class”栏给本身新添加的类起名字，在“Subclass of”栏选择该新添加的类的父类，在“Language”栏选择“Objective-C”。
代码演示：
ViewContorller02.h文件：

1. #import <UIKit/UIKit.h>
3. NS_ASSUME_NONNULL_BEGIN
5. @interface ViewController02 : UIViewController
7. @end
9. NS_ASSUME_NONNULL_END

复制代码

ViewContorller02.m文件：

1. #import "ViewController02.h"
3. @interface ViewController02 ()
5. @end
7. @implementation ViewController02
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.    
12.     //第二个控制器的颜色
13.     self.view.backgroundColor = [UIColor cyanColor];
14. }
16. - (void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
17.    
18.     //使当前的控制器消失掉，传入两个参数
19.     //第一个参数指是否有动画效果
20.     //第二个参数指结束后是否调用block块操作，不需要为nil
21.     [self dismissViewControllerAnimated: YES completion: nil];
22. }
24. /*
25. #pragma mark - Navigation
27. // In a storyboard-based application, you will often want to do a little preparation before navigation
28. - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
29.     // Get the new view controller using [segue destinationViewController].
30.     // Pass the selected object to the new view controller.
31. }
32. */
34. @end

复制代码

ViewContorller.h文件：

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController
6. @end

复制代码

ViewContorller.m文件：

1. #import "ViewController.h"
2. #import "ViewController02.h"
4. @interface ViewController ()
6. @end
8. @implementation ViewController
10. //当屏幕被点击的时候，调用此函数
11. - (void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
12.     //创建视图控制器二
13.     ViewController02 *v2 = [[ViewController02 alloc] init];
14.    
15.     //显示一个新的视图控制器界面到屏幕上
16.     //该函数会传入三个参数：第一个参数指新的控制器对象
17.     //第二个参数指是否使用动画切换效果
18.     //第三个参数指切换结束后是否调用block块操作，不需要为nil
19.     [self presentViewController: v2 animated: YES completion: nil];
20. }
22. //当视图控制器第一次被加载显示视图的时，调用此函数
23. //布局初始化视图来使用，初始化资源使用
24. - (void)viewDidLoad {
25.     //调用父类的加载视图函数
26.     [super viewDidLoad];
27.    
28.     self.view.backgroundColor = [UIColor yellowColor];
29.     NSLog(@"viewDidLoad第一次加载视图");
31.    
32.     UIView *view = [[UIView alloc] init];
34.     view.frame = CGRectMake(100, 100, 100, 200);
36.     //将视图添加到当前控制视图上
37.     [self.view addSubview: view];
39.     view.backgroundColor = [UIColor magentaColor];
41.     self.view.backgroundColor = [UIColor yellowColor];
42. }
44. //当视图控制器的视图即将显示的时候，调用此函数
45. //参数：表示是否用动画切换后消失
46. //每一次视图显示时都要被调用
47. - (void) viewWillAppear:(BOOL)animated {
48.     NSLog(@"视图即将显示");
49. }
51. //当视图控制器的视图即将消失的时候，调用此函数
52. //参数：表示是否用动画切换后消失
53. //当前状态：视图还是显示在屏幕上的
54. - (void) viewWillDisappear:(BOOL)animated {
55.     NSLog(@"视图即将消失");
56. }
58. //当视图控制器的视图已经显示到后的瞬间，调用此函数
59. //参数：表示是否用动画切换显示的
60. //当前状态：视图已经显示在屏幕上
61. - (void) viewDidAppear:(BOOL)animated {
62.     NSLog(@"视图已显示");
63. }
65. //当视图控制器的视图已经从屏幕上消失，调用此函数
66. //参数：表示是否用动画切换显示
67. //当前状态：视图已经从屏幕上消失
68. - (void) viewDidDisappear:(BOOL)animated {
69.     NSLog(@"视图已消失");
70. }
72. @end

复制代码

运行效果：

定时器和视图移动

  定时器和视图移动通常在 iOS 开发中一起使用以创、建动画效果。例如，如果你想要让一个视图在屏幕上以一定的速率移动，就可以使用定时器来实现这个效果。
  在 iOS 中，定时器是通过 NSTimer 类来创建的。你可以设置定时器在特定的时间间隔触发，然后在每次触发时更新视图的位置。
  视图的移动可以通过改变它的 frame 属性来实现。每次定时器触发时，你可以小幅度改变这些属性（例如随着时间的流逝，让UIView对象的起始横纵坐标不停+1），使得视图看起来像是在屏幕上移动。
  这里定时器和视图移动的实现要使用到UIButton和UIView的相关知识。
下面给出代码演示：

1. #import "ViewController.h"
3. @interface ViewController ()
5. @end
7. @implementation ViewController
9. //属性和成员变量的同步
10. @synthesize timerView = _timerView;
12. - (void)viewDidLoad {
13.     [super viewDidLoad];
14.     // Do any additional setup after loading the view.
15.     //创建一个启动定时器按钮
16.     UIButton* btn01 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
17.    
18.     btn01.frame = CGRectMake(150, 100, 100, 100);
19.    
20.     [btn01 setTitle:@"启动定时器⏲️" forState:UIControlStateNormal];
21.    
22.     [btn01 addTarget:self action:@selector(pressStart) forControlEvents:UIControlEventTouchUpInside];
23.    
24.     [self.view addSubview:btn01];
25.    
26.     //创建一个停止定时器按钮
27.     UIButton* btn02 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
28.    
29.     btn02.frame = CGRectMake(150, 200, 100, 100);
30.    
31.     [btn02 setTitle:@"停止定时器⏹️" forState:UIControlStateNormal];
32.    
33.     [btn02 addTarget:self action:@selector(pressStop) forControlEvents:UIControlEventTouchUpInside];
34.    
35.     [self.view addSubview:btn02];
36.    
37.     //创建一个视图
38.     UIView* view = [[UIView alloc] init];
39.    
40.     view.frame = CGRectMake(0, 0, 80, 80);
41.    
42.     view.backgroundColor = [UIColor cyanColor];
43.    
44.     [self.view addSubview:view];
45.    
46.     [self.view sendSubviewToBack:view];
47.    
48.     //设置view的标签值，设置完后可以通过父亲视图对象以及view的标签值可以获得相应的视图对象
49.     view.tag = 4399;
50. }
52. - (void)pressStart
53. {
54.     //使用NSTimer的类方法创建一个定时器并且启动这个定时器（返回值为一个新建好的定时器对象）
55.     //P1:每隔多长时间调用定时器函数（以秒为单位的整数）
56.     //P2：表示实现定时器函数的对象（指针）
57.     //P3：定时器函数对象
58.     //P4：可以将一个参数传入定时器函数，无参数可以传入空(nil)， 这里传入的参数会保存在timer的userInfo属性里
59.     //P5：表示定时器是否重复该操作——YES为重复，NO为只完成一次函数调用
60.     _timerView = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateTimer:) userInfo:@"kacy" repeats:YES]; //用_timerView来接收该计时器的返回值
61. }
63. //可以将定时器本身作为参数传入
64. - (void)updateTimer:(NSTimer *)timer
65. {
66.     NSLog(@"%@！正在计时", timer.userInfo);  //调用timer的userInfo属性
67.    
68.     //tag最好从100开始
69.     UIView* view = [self.view viewWithTag:4399];
70.    
71.     view.frame = CGRectMake(view.frame.origin.x + 1, view.frame.origin.y + 1, 80, 80);
72. }
74. - (void)pressStop
75. {
76.     if (_timerView != nil) {
77.         //invalidate：停止计时器的实例方法 使用定时器的返回值
78.         [_timerView invalidate];
79.         NSLog(@"已经停止计时！");
80.     }
81. }
83. @end

复制代码

运行效果：
xcode运行效果打印区效果较多且较为简单，这里只贴出部门，未贴完备。

模仿器运行效果：

UISwitch控件

  UISwitch 是 iOS 开发中常用的一种控件，它通常用于表示开/关或者是/否等二元选择的状态。它有两种状态：开（ON）和关（OFF）。注意，UISwitch 的巨细是固定的，以是在设置 frame 的时间，宽度和高度可以设为 0。
代码示例：
ViewController.h文件：

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController
4. {
5.     //定义一个开关控件（可以进行状态的改变 在“开”和“关”两种状态里进行切换）
6.     //所有UIKit框架库中的控件均以UI开头 苹果官方的控件都定义在UIKit框架库中
7.     UISwitch* _mySwitch;
8. }
10. @property(retain, nonatomic)UISwitch* mySwitch;
12. @end

复制代码

ViewController.m文件：

1. #import "ViewController.h"
3. @interface ViewController ()
5. @end
7. @implementation ViewController
9. //同步属性和成员变量
10. @synthesize mySwitch = _mySwitch;
12. - (void)viewDidLoad {
13.     [super viewDidLoad];
14.    
15.     //创建一个UISwitch开关对象（继承于UIView）
16.     _mySwitch = [[UISwitch alloc] init];
17.    
18.     //_mySwitch.backgroundColor = [UIColor orangeColor];
19.    
20.     //苹果官方的控件的位置设置（不是所有的控件都可以设置宽和高）
21.     //对于UISwitch对象，其位置的X、Y坐标可以改变，但其宽和高无法改变，是官方设定好的
22.     _mySwitch.frame = CGRectMake(100, 150, 80, 40);
23.    
24.     //设置开关状态属性（YES——开启状态；NO——关闭状态）
25.     _mySwitch.on = YES;
26.     //也可以使用setOn:方法
27.     [_mySwitch setOn:YES];
28.    
29.     //设置开关状态  p1：开关状态  p2:是否开启动画效果
30.     [_mySwitch setOn:YES animated:YES];
31.    
32.     //设置开启状态的风格颜色
33.     [_mySwitch setOnTintColor:[UIColor blueColor]];
34.    
35.     //改变开关圆钮的颜色
36.     [_mySwitch setThumbTintColor:[UIColor cyanColor]];
37.    
38.     //设置整体风格颜色
39.     [_mySwitch setTintColor:[UIColor purpleColor]];
40.    
41.     //向开关控件添加事件函数
42.     //p1:函数实现对象  p2:函数对象
43.     //p3:事件响应时的事件类型（UIControlEventValueChanged：状态发生变化时触发函数）
44.     [_mySwitch addTarget:self action:@selector(swChanged:) forControlEvents:UIControlEventValueChanged];
45.    
46.     self.view.backgroundColor = [UIColor magentaColor];
47.    
48.     [self.view addSubview:_mySwitch];
49. }
51. //参数传入开关对象本身
52. - (void)swChanged:(UISwitch *)sw
53. {
54.     NSLog(@"开关状态发生变化！");
55.    
56.     //on表示当前结束时开关的状态
57.     if (sw.on == YES) {
58.         NSLog(@"开关被打开！");
59.     } else {
60.         NSLog(@"开关被关闭！");
61.     }
62. }
64. @end

复制代码

运行效果：

UIProgressView和UISlider

  UIProgressView 是 iOS 开发中常用的一个控件，它用于表示任务的完成进度。UIProgressView 的表面是一个长条形的进度条，可以设置进度值、进度条颜色、进度条样式等属性。UISlider 则是一个滑动条控件，它可以让用户通过滑动来选择一个范围内的值。你可以设置滑动条的最小值和最大值，以及滑动条的颜色。当用户滑动滑动条时，你可以获取到用户选择的值。
  我们也可以通过两者实现用滑动条动态控制进度条。
代码演示：
ViewController.h文件：

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController
4. {
5.     //创建一个进度条对象 一般用来表示下载或视频播放的进度
6.     UIProgressView* _progressView;
7.    
8.     //创建一个滑动条对象 一般用来进行调整音频的音量等
9.     UISlider* _slider;
10. }
12. //定义一个进度条属性
13. @property(retain, nonatomic)UIProgressView* pView;
14. //定义一个滑动条属性
15. @property(retain, nonatomic)UISlider* slider;
17. @end

复制代码

ViewController.m文件：

1. #import "ViewController.h"
3. @interface ViewController ()
5. @end
7. @implementation ViewController
9. @synthesize slider = _slider;
10. @synthesize pView = _progressView;
12. - (void)viewDidLoad {
13.     [super viewDidLoad];
14.    
15.     //进度条的创建
16.     _progressView = [[UIProgressView alloc] init];
17.    
18.     //设置进度条的位置和大小（进度条的高度（即第四个参数）是不可变化的）
19.     _progressView.frame = CGRectMake(50, 200, 300, 40);
20.    
21.     //设置进度条的风格颜色
22.     _progressView.progressTintColor = [UIColor blueColor];
23.    
24.     //剩余进度条颜色
25.     _progressView.trackTintColor = [UIColor cyanColor];
26.    
27.     //设置进度条的进度值（范围是[0,1]）
28.     _progressView.progress = 0.3;
29.    
30.     //设置进度条的风格特征
31.     _progressView.progressViewStyle = UIProgressViewStyleDefault;
32.    
33.     [self.view addSubview:_progressView];
34.    
35.     //创建滑动条对象
36.     _slider = [[UISlider alloc] init];
37.    
38.     //设置滑动条的位置和大小（高度不可变）
39.     _slider.frame = CGRectMake(50, 400, 300, 40);
40.    
41.     //设置滑动条最大值和最小值（可以为负值）（进度条不能设置）
42.     _slider.maximumValue = 100;
43.     _slider.minimumValue = 0;
44.    
45.     //设置滑动条滑块的位置float值
46.     _slider.value = 50;
47.    
48.     //设置左侧滑条颜色
49.     _slider.minimumTrackTintColor = [UIColor yellowColor];
50.     //设置右侧滑条颜色（默认为灰色）
51.     _slider.maximumTrackTintColor = [UIColor cyanColor];
52.    
53.     //设置滑块的颜色（默认为白色）
54.     _slider.thumbTintColor = [UIColor magentaColor];
55.    
56.     //对滑动条添加事件函数
57.     [_slider addTarget:self action:@selector(pressSlider) forControlEvents:UIControlEventValueChanged];
58.    
59.     [self.view addSubview:_slider];
60. }
62. - (void)pressSlider
63. {
64.     _progressView.progress = (_slider.value - _slider.minimumValue) / (_slider.maximumValue - _slider.minimumValue);
65.     NSLog(@"value = %f", _slider.value);
66. }
68. @end

复制代码

运行效果：

注：在写滑动条和进度条的代码时，由于两者的高度均无法改变，以是我将进度条的高度设置的很大为1000（我在视图上先添加的进度条，再添加的滑动条），从而体现其高度不可设置，随后当我设置滑动条位置时，发现无论位置设置多少，滑动条始终在下半屏幕或者屏幕之外。后来发现在这两个视图控件下面还有隐藏的配景视图，该位置设置的高度固然对进度条和滑动条无用，但其实影响了下面的配景视图。
总结

  以上就是本篇博客的全部内容，请读者在学习的同时积极举行实际代码敲写，希望对你有所帮助～

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。