【iOS】UI学习（二）

进度条和滑动条

下面通过一个程序来讲解该内容：

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

复制代码

1. #import "ViewController.h"
3. @interface ViewController ()
5. @end
7. @implementation ViewController
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     // Do any additional setup after loading the view.
12.     _progressView = [[UIProgressView alloc] init];
13.     //进度条的宽度是固定的，所以第四个参数并没有意义
14.     _progressView.frame = CGRectMake(100, 400, 200, 100);
15.     //进度条默认为蓝色
16.     _progressView.progressTintColor = [UIColor greenColor];
17.     _progressView.trackTintColor = [UIColor blackColor];
18.     //设置它的进度值
19.     _progressView.progress = 0;
20.     //设置进度条的风格特征
21.     _progressView.progressViewStyle = UIProgressViewStyleDefault;
22.     [self.view addSubview:_progressView];
23.    
24.     _slider = [[UISlider alloc] init];
25.     //位置设置，宽度不可变更
26.     _slider.frame = CGRectMake(10, 500, 200, 100);
27.     //设置滑动条最大值100
28.     _slider.maximumValue = 100;
29.     //设置滑动条最小值,可以为负值
30.     _slider.minimumValue = 0;
31.     //设置滑动条的滑块的位置
32.     _slider.value = 0;
33.     //左侧滑条背景颜色(以滑块为起点）
34.     _slider.minimumTrackTintColor = [UIColor greenColor];
35.     //右侧滑条背景颜色
36.     _slider.maximumTrackTintColor = [UIColor redColor];
37.     //设置滑块的颜色
38.     _slider.thumbTintColor = [UIColor blueColor];
39.     //对滑条移动添加函数
40.     [_slider addTarget:self action:@selector(press) forControlEvents:UIControlEventValueChanged];
41.     [self.view addSubview:_slider];
42. }
44. -(void)press
45. {
46.    
47.     _progressView.progress = (_slider.value - _slider.minimumValue)/(_slider.maximumValue - _slider.maximumValue);
48.     NSLog(@"value = %f", _slider.value);
49. }
51. @end

复制代码

效果图：

步进器与分栏控件

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController
4. {
5.     //定义步进器对象
6.     //按照一定的数字来调整某个数据
7.     UIStepper* _stepper;
8.     //分栏控制器定义
9.     UISegmentedControl* _segControl;
10. }
12. @property (retain, nonatomic) UIStepper* stepper;
13. @property (retain, nonatomic) UISegmentedControl* segControl;
14. @end

复制代码

1. #import "ViewController.h"
3. @interface ViewController ()
5. @end
7. @implementation ViewController
8. @synthesize stepper = _stepper;
9. @synthesize segControl = _segControl;
12. - (void)viewDidLoad {
13.     [super viewDidLoad];
14.    
15.     //创建步进器对象
16.     _stepper = [[UIStepper alloc] init];
17.     //宽度是固定的，无法改变
18.     _stepper.frame = CGRectMake(100, 100, 100, 40);
19.     //设置步进器的最小值
20.     _stepper.minimumValue = 0;
21.     //设置步进器的最大值
22.     _stepper.maximumValue = 100;
23.     //设置步进器的当前值
24.     _stepper.value = 0;
25.     //设置步进器美走一次的value值
26.     _stepper.stepValue = 5;
27.     //是否将步进结果通过事件函数响应出来
28.     //YES：这时会一边执行步进器一边执行事件函数。随着按住的时间越长，执行步进器的速度就越快
29.     //NO：这是会执行步进器，只会在松开按钮时执行一次事件函数
30.     _stepper.continuous = NO;
31.     //当为YES时，按住按钮就会一直执行步进器
32.     //NO时，按住按钮只会执行一次步进器
33.     _stepper.autorepeat = YES;
34.     //添加事件函数
35.     [_stepper addTarget:self action:@selector(press) forControlEvents:UIControlEventValueChanged];
36.     [self.view addSubview:_stepper];
37.    
38.    
39.     //创建分栏控件对象
40.     _segControl = [[UISegmentedControl alloc] init];
41.     //宽度仍然不可改变
42.     _segControl.frame = CGRectMake(10, 200, 300, 40);
43.     //P1:按钮选项文字
44.     //P2:按钮的索引位置
45.     //P3:是否有插入的动画效果
46.     [_segControl insertSegmentWithTitle:@"ak" atIndex:0 animated:NO];
47.     [_segControl insertSegmentWithTitle:@"a1" atIndex:1 animated:NO];
48.     [_segControl insertSegmentWithTitle:@"a4" atIndex:2 animated:NO];
49.     _segControl.selectedSegmentIndex = 1;
50.    
51.     [self.view addSubview: self.segControl];
52.    
53.     [_segControl addTarget:self action:@selector(press1) forControlEvents:UIControlEventValueChanged];
54. }
56. -(void) press
57. {
58.     NSLog(@"Value = %f", _stepper.value);
59. }
61. -(void) press1
62. {
63.     NSLog(@"%ld", (long)self.segControl.selectedSegmentIndex);
64. }
66. @end

复制代码

效果图：

告诫对话框和提示等待器

下面是几个将会用到的方法：

• UIAlertController 中创建实例的指定初始化程序。该方法会创建具有特定标题、消息和首选样式的警报控制器。
  alertControllerWithTitlenullable NSString *)title messagenullable NSString *)message preferredStyleUIAlertControllerStyle)preferredStyle:
  

• title:设置告诫框的标题，如果无标题为nil；
  
• message：在告诫框中显示的内容，无内容的话设置为nil；
  
• oreferredStyle：告诫控制器的样式。可以是 UIAlertControllerStyleAlert 或UIAlertControllerStyleActionSheet。前者表示告诫控制器以弹出方式显示，后者表示以滑出方式显示。
  

• actionWithTitle是一个iOS开发中的方法，用于创建一个带有标题的动作按钮。
  actionWithTitleNSString *)title styleUIPreviewActionStyle)style handlervoid (^)(UIPreviewAction *action, UIViewController *previewViewController))handler:
  

• title：操作的名称
  
• style：操作的样式，有UIAlertActionStyleDefault,UIAlertActionStyleCancel, UIAlertActionStyleDestructive三种；
  

   UIAlertActionStyleDefault:表示一个默认的操作，通常为白底蓝字
UIAlertActionStyleCancel:表示一个取消操作，字体通常会做加粗处理
UIAlertActionStyleDestructive:表示一个具有粉碎性的操作，通常利用红字。
  

• 最后一部分表示执举措作将要执行的块
  

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController {
4.     //定义一个警告对话框视图对象
5.     UIAlertController* _elertView;
6.     //等待提示对象
7.     //当下载，或加载比较大的文件时，可以显示此控件，处于提示等待状态
8.     UIActivityIndicatorView* _activityIndicator;
9. }
10. @property (retain, nonatomic) UIAlertController* elertView;
11. @property (retain, nonatomic) UIActivityIndicatorView* activityIndicator;
12. @end

复制代码

1. #import "ViewController.h"
3. @interface ViewController ()
5. @end
7. @implementation ViewController
8. //同步属性和成员变量
9. @synthesize elertView = _elertView;
10. @synthesize activityIndicator = _activityIndicator;
12. - (void)viewDidLoad {
13.     [super viewDidLoad];
14.     // Do any additional setup after loading the view.
15.     //通过for循环定义两个按钮
16.     for(int i = 0; i < 2; i++) {
17.         UIButton* btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
18.         btn.frame = CGRectMake(100, 100 + i * 100, 100, 40);
19.         if(i == 0) {
20.             [btn setTitle:@"警告对话框" forState:UIControlStateNormal];
21.             
22.         } else {
23.             [btn setTitle:@"等待提示器" forState:UIControlStateNormal];
24.             
25.         }
26.         btn.tag = 100 + i;
27.         [btn addTarget:self action:@selector(pressBtn:) forControlEvents:UIControlEventTouchUpInside];
28.         
29.         [self.view addSubview:btn];
30.     }
31. }
33. -(void) pressBtn:(UIButton*) btn
34. {
35.     //创建警告对话框
36.     if(btn.tag == 100) {
37.         _elertView = [UIAlertController alertControllerWithTitle:@"警告" message:@"您的手机电量过低，即将关机" preferredStyle:UIAlertControllerStyleAlert];
38.         UIAlertAction* action01 = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action){/* 在这里编写执行该选项的代码*/}];
39.         UIAlertAction* action02 = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action){/* 在这里编写执行该选项的代码*/}];
40.         [_elertView addAction:action01];
41.         [_elertView addAction:action02];
42.         [self presentViewController:_elertView animated:YES completion:nil];
43.     } else if(btn.tag == 101) {//创建等待提示器
44.         //宽度和高度不可改变
45.         _activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(100, 300, 80, 80)];
46.         //设定提示的风格
47.         _activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleMedium;
48.         //_activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleLarge;
49.         [self.view addSubview:_activityIndicator];
50.         //启动动画并显示
51.         [_activityIndicator startAnimating];
52.         //停止动画并隐藏
53.         //[_activityIndicator stopAnimating];
54.     }
55. }
57. @end

复制代码

效果图：

UITextField

UITextField控件

定义：
UITextField是 iOS 中的一个 UIKit 类，表示单行文本输入字段。它允许用户在应用程序中输入和编辑文本
下面通过代码来演示该程序：

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController <UITextFieldDelegate>
4. {
5.     UITextField* _textField;
6. }
7. @property (retain, nonatomic) UITextField* textField;
9. @end

复制代码

1. - (void)viewDidLoad {
2.     [super viewDidLoad];
3.     // Do any additional setup after loading the view.
4.     self.textField = [[UITextField alloc] init];
5.     self.textField.frame = CGRectMake(100, 250, 200, 40);
6.     self.textField.text = @"用户名";
7.     //self.textField.textColor = [UIColor blueColor];
8.     //字体的大小
9.     self.textField.font = [UIFont systemFontOfSize:24 ];
10.     //字体边框的风格
11.     //UITextBorderStyleNone:无边框风格
12.     //UITextBorderStyleLine:线框风格
13.     //UITextBorderStyleBezel:Bezel风格
14.     //UITextBorderStyleRoundedRect:圆角风格
15.     self.textField.borderStyle = UITextBorderStyleRoundedRect;
16.     //设置虚拟键盘的风格
17.     //UIKeyboardTypeDefault:默认的风格
18.     //UIKeyboardTypeNumberPad:数字和字母结合的风格      
19.     //UIKeyboardTypePhonePad:纯数字风格
20.     self.textField.keyboardType = UIKeyboardTypeDefault;
21.     //当text为空的时候，显示下面的文字
22.     self.textField.placeholder = @"请输入用户名...";
23.     //是否进行密码输入
24.     //YES：隐式输入内容
25.     //NO：显示输入内容（默认为NO）
26.     self.textField.secureTextEntry = NO;
27.     [self.view addSubview:self.textField];
28.     self.textField.delegate = self;
30. }

复制代码

效果图：

UITextFieldDelegate协议

1. -(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
2. {
3.     [self.textField resignFirstResponder];
4.     NSLog(@"键盘已回收");
5. }
7. - (void)textFieldDidBeginEditing:(UITextField *)textField
8. {
9.     NSLog(@"开始输入了");
10. }
12. - (void)textFieldDidEndEditing:(UITextField *)textField
13. {
14.     NSLog(@"结束编译了");
15. }
17. - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
18. {
19.     return YES;
20. }
22. - (BOOL)textFieldShouldEndEditing:(UITextField *)textField
23. {
24.     return YES;
25. }

复制代码

留意：必须在viewDidLoad中设置署理对象才能调用以上的函数

1. self.textField.delegate = self;

复制代码

结果：

UIScrollView

• UIScrollView实际上就是一个可以滚动的UIView，它可以左右滚动或者上下滚动。
  
• UIScrollView支持平移（水平和垂直滚动）和缩放（捏合缩放）手势，允许用户导航和与内容交互。
  
• UIScrollView可以根据开发人员的偏好自动缩放内容以适应可用空间或保持内容的原始大小。
  

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController <UIScrollViewDelegate>
4. {
5.     UIScrollView* _sv;
6. }
8. @property (retain, nonatomic) UIScrollView* sv;
9. @end

复制代码

1. #import "ViewController.h"
3. @interface ViewController ()
5. @end
7. @implementation ViewController
8. @synthesize sv=_sv;
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.    
12.     self.sv = [[UIScrollView alloc] init];
13.     self.sv.frame = CGRectMake(0, 0, 394, 852);
14.     //是否按照整页来滚动视图
15.     self.sv.pagingEnabled = NO;
16.     //是否可以开启滚动效果
17.     self.sv.scrollEnabled = YES;
18.     //设置画布的大小，画布显示在滚动视图内部，一般大于frame的大小
19.     self.sv.contentSize = CGSizeMake(394, 852 * 5);
20.     //是否可以边缘弹动效果
21.     self.sv.bounces = NO;
22.     //是否开启横向、纵向弹动效果
23.     self.sv.alwaysBounceHorizontal = YES;
24.     self.sv.alwaysBounceVertical = YES;
25.     //显示横向滚动条
26.     self.sv.showsHorizontalScrollIndicator = YES;
27.     //是否实现纵向滚动条
28.     self.sv.showsVerticalScrollIndicator = YES;
29.     self.sv.backgroundColor = [UIColor greenColor];
30.     //添加图片进去
31.     for(int i = 0; i < 5; i++) {
32.         NSString* strName = [NSString stringWithFormat:@"%d.JPG", i + 1 ];
33.         UIImage* image = [UIImage imageNamed:strName];
34.         UIImageView* iView = [[UIImageView alloc] initWithImage:image];
35.         iView.frame = CGRectMake(0, 852 * i, 394, 852);
36.         [self.sv addSubview:iView];
37.     }
38.     //将当前视图控制器做为代理对象
39.     self.sv.delegate = self;
40.     [self.view addSubview:self.sv];
41. }
42. //当滚动视图移动时，只要offset坐标发生变化时，都会调用此函数
43. -(void) scrollViewDidScroll:(UIScrollView *)scrollView
44. {
45.     NSLog(@"y = %f", scrollView.contentSize.width);
46. }
49. @end

复制代码

效果图：

布局子视图

我们可以手动或者自动布局子视图。
手动布局子视图

ViewController.h:

1. #import "ViewController.h"
2. #import "ViewSuper.h"
4. @interface ViewController ()
6. @end
8. @implementation ViewController
10. - (void)viewDidLoad {
11.     [super viewDidLoad];
12.    
13.    
14.     ViewSuper* sView = [[ViewSuper alloc] init];
15.     sView.frame = CGRectMake(20, 20, 120, 200);
16.     sView.backgroundColor = [UIColor greenColor];
17.     [sView createSubViews];
18.     [self.view addSubview: sView];
19.     UIButton* btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
20.     btn1.frame = CGRectMake(300, 480, 80, 40);
21.     [btn1 setTitle:@"放大" forState:UIControlStateNormal];
22.     [btn1 addTarget:self action:@selector(press1) forControlEvents:UIControlEventTouchUpInside];
23.     [self.view addSubview: btn1];
24.     UIButton* btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
25.     btn2.frame = CGRectMake(300, 580, 80, 40);
26.     [btn2 setTitle:@"缩小" forState:UIControlStateNormal];
27.     btn1.titleLabel.font = [UIFont systemFontOfSize: 32];
28.     btn2.titleLabel.font = [UIFont systemFontOfSize: 32];
29.     [btn2 addTarget:self action:@selector(press2) forControlEvents:UIControlEventTouchUpInside];
30.     [self.view addSubview: btn2];
31.     sView.tag = 101;
32. }
34. -(void) press1
35. {
36.     //放大父视图动画
37.     ViewSuper* sView = (ViewSuper*)[self.view viewWithTag:101];
38.     [UIView animateWithDuration:1.0 animations:^{
39.         sView.frame = CGRectMake(20, 20, 300, 500);}];
40. }
42. -(void) press2
43. {
44.     //缩小父视图
45.     ViewSuper* sView = (ViewSuper*)[self.view viewWithTag:101];
46.     [UIView animateWithDuration:1.0 animations:^{
47.         sView.frame = CGRectMake(20, 20, 120, 200);}];
48. }
50. @end

复制代码

ViewSuper类

1. #import <UIKit/UIKit.h>
3. NS_ASSUME_NONNULL_BEGIN
5. @interface ViewSuper : UIView
6. {
7.     UIView* _view1;
8.     UIView* _view2;
9.     UIView* _view3;
10.     UIView* _view4;
11. }
13. -(void) createSubViews;
14. @end

复制代码

1. #import "ViewSuper.h"
3. @implementation ViewSuper
5. - (void)createSubViews {
6.     //左上角视图
7.     _view1 = [[UIView alloc] init];
8.     _view1.frame = CGRectMake(0, 0, 40, 40);
9.    
10.     //右上角视图
11.     _view2 = [[UIView alloc] init];
12.     _view2.frame = CGRectMake(self.bounds.size.width - 40, 0, 40, 40);
13.    
14.     //右下角视图
15.     _view3 = [[UIView alloc] init];
16.     _view3.frame = CGRectMake(self.bounds.size.width - 40, self.bounds.size.height - 40, 40, 40);
17.    
18.     //左下角视图
19.     _view4 = [[UIView alloc] init];
20.     _view4.frame = CGRectMake(0, self.bounds.size.height - 40, 40, 40);
21.    
22.     _view1.backgroundColor = [UIColor redColor];
23.     _view2.backgroundColor = [UIColor redColor];
24.     _view3.backgroundColor = [UIColor redColor];
25.     _view4.backgroundColor = [UIColor redColor];
26.    
27.     [self addSubview: _view1];
28.     [self addSubview: _view2];
29.     [self addSubview: _view3];
30.     [self addSubview: _view4];
31. }
33. - (void)layoutSubviews {
34.     [UIView animateWithDuration: 1.0 animations:^ {
35.         self->_view1.frame = CGRectMake(0, 0, 40, 40);
36.         self->_view2.frame = CGRectMake(self.bounds.size.width - 40, 0, 40, 40);
37.         self->_view3.frame = CGRectMake(self.bounds.size.width - 40, self.bounds.size.height - 40, 40, 40);
38.         self->_view4.frame = CGRectMake(0, self.bounds.size.height - 40, 40, 40);
39.     }];
40. }
42. @end

复制代码

效果图：

点击放大后：

自动布局子视图

自动布局子视图是通过UI自己提供的属性和方法来实现布局子视图。
autoresizingMask属性：这是一个 UIView 属性，允许当父视图的边界发生变化时，视图的大小和位置怎样自动调整。

1.         [UIView animateWithDuration:1.0 animations:^{
2.             self->_superView.frame = CGRectMake(10, 30, 300, 500);
3.         }];

复制代码

这是一个类方法，允许为一个或多个视图的属性变化制作动画。第一个参数是指动画持续的时间，第二个参数此参数是一个包含将要动画化的代码的块（或闭包）。在此块中，您可以修改一个或多个视图的属性，并且这些更改将以动画形式呈现。
代码演示：
ViewController:

1. #import <UIKit/UIKit.h>
3. @interface ViewController : UIViewController
4. {
5.     UIView* _superView;
6.     UILabel* _view1;
7.     UILabel* _view2;
8.     UILabel* _view3;
9.     UILabel* _view4;
10.     UIView* _viewCenter;
11. }
15. @end

复制代码

1. #import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        _superView = [[UIView alloc] init];    _superView.frame = CGRectMake(20, 50, 180, 300);    _superView.backgroundColor = [UIColor redColor];        _view1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];    _view1.text = @"1";    _view1.backgroundColor = [UIColor greenColor];        _view2 = [[UILabel alloc] initWithFrame:CGRectMake(180-40, 0, 40, 40)];    _view2.text = @"2";    _view2.textAlignment = NSTextAlignmentCenter;    _view2.backgroundColor = [UIColor greenColor];        _view3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 300-40, 40, 40)];    _view3.text = @"3";    _view3.backgroundColor = [UIColor greenColor];        _view4 = [[UILabel alloc] initWithFrame:CGRectMake(180-40, 300-40, 40, 40)];    _view4.text = @"4";    _view4.backgroundColor = [UIColor greenColor];        [_superView addSubview:_view1];    [_superView addSubview:_view2];    [_superView addSubview:_view3];    [_superView addSubview:_view4];        _viewCenter = [[UIView alloc] initWithFrame:CGRectMake(0, 0, _superView.bounds.size.width, 40)];    _viewCenter.center = CGPointMake(180/2, 300/2);    _viewCenter.backgroundColor = [UIColor greenColor];    [_superView addSubview: _viewCenter];    [self.view addSubview:_superView];    _viewCenter.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin|    UIViewAutoresizingFlexibleBottomMargin;    _view2.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;    _view3.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;    _view4.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin;}//每一次触摸屏幕后，就会放大或缩小屏幕-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{    static BOOL isLarge = NO;    if(isLarge == NO) {        [UIView animateWithDuration:1.0 animations:^{
2.             self->_superView.frame = CGRectMake(10, 30, 300, 500);
3.         }];
4.     } else {        [UIView animateWithDuration:1.0 animations:^{                    self->_superView.frame = CGRectMake(20, 50, 180, 300);        }];    }    isLarge = !isLarge;}@end

复制代码

效果图:

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