【iOS】UI学习（二）

UI学习（二）

进度条和滑动条
步进器与分栏控件
警告对话框和提示等待器
UITextField
- UITextField控件
- UITextFieldDelegate协议
UIScrollView
布局子视图
- 手动布局子视图
- 自动布局子视图

进度条和滑动条

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

objectivec 复制代码

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    //进度条对象
    //一般用来表示下载或视频播放的进度
    UIProgressView* _progressView;
    //滑动条的定义
    //一般用来进行调整音乐音量等
    UISlider* _slider;
}
//定义一个进度条属性
@property (retain, nonatomic) UIProgressView* progressView;
//定义一个滑动条属性
@property (retain, nonatomic) UISlider* slider;

@end

objectivec 复制代码

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    _progressView = [[UIProgressView alloc] init];
    //进度条的宽度是固定的，所以第四个参数并没有意义
    _progressView.frame = CGRectMake(100, 400, 200, 100);
    //进度条默认为蓝色
    _progressView.progressTintColor = [UIColor greenColor];
    _progressView.trackTintColor = [UIColor blackColor];
    //设置它的进度值
    _progressView.progress = 0;
    //设置进度条的风格特征
    _progressView.progressViewStyle = UIProgressViewStyleDefault;
    [self.view addSubview:_progressView];
    
    _slider = [[UISlider alloc] init];
    //位置设置，宽度不可变更
    _slider.frame = CGRectMake(10, 500, 200, 100);
    //设置滑动条最大值100
    _slider.maximumValue = 100;
    //设置滑动条最小值,可以为负值
    _slider.minimumValue = 0;
    //设置滑动条的滑块的位置
    _slider.value = 0;
    //左侧滑条背景颜色(以滑块为起点）
    _slider.minimumTrackTintColor = [UIColor greenColor];
    //右侧滑条背景颜色
    _slider.maximumTrackTintColor = [UIColor redColor];
    //设置滑块的颜色
    _slider.thumbTintColor = [UIColor blueColor];
    //对滑条移动添加函数
    [_slider addTarget:self action:@selector(press) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_slider];
}

-(void)press
{
    
    _progressView.progress = (_slider.value - _slider.minimumValue)/(_slider.maximumValue - _slider.maximumValue);
    NSLog(@"value = %f", _slider.value);
}

@end

效果图 ：

步进器与分栏控件

objectivec 复制代码

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    //定义步进器对象
    //按照一定的数字来调整某个数据
    UIStepper* _stepper;
    //分栏控制器定义
    UISegmentedControl* _segControl;
}

@property (retain, nonatomic) UIStepper* stepper;
@property (retain, nonatomic) UISegmentedControl* segControl;
@end

objectivec 复制代码

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize stepper = _stepper;
@synthesize segControl = _segControl;


- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建步进器对象
    _stepper = [[UIStepper alloc] init];
    //宽度是固定的，无法改变
    _stepper.frame = CGRectMake(100, 100, 100, 40);
    //设置步进器的最小值
    _stepper.minimumValue = 0;
    //设置步进器的最大值
    _stepper.maximumValue = 100;
    //设置步进器的当前值
    _stepper.value = 0;
    //设置步进器美走一次的value值
    _stepper.stepValue = 5;
    //是否将步进结果通过事件函数响应出来
    //YES：这时会一边执行步进器一边执行事件函数。随着按住的时间越长，执行步进器的速度就越快
    //NO：这是会执行步进器，只会在松开按钮时执行一次事件函数
    _stepper.continuous = NO;
    //当为YES时，按住按钮就会一直执行步进器
    //NO时，按住按钮只会执行一次步进器
    _stepper.autorepeat = YES;
    //添加事件函数
    [_stepper addTarget:self action:@selector(press) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_stepper];
    
    
    //创建分栏控件对象
    _segControl = [[UISegmentedControl alloc] init];
    //宽度仍然不可改变
    _segControl.frame = CGRectMake(10, 200, 300, 40);
    //P1:按钮选项文字
    //P2:按钮的索引位置
    //P3:是否有插入的动画效果
    [_segControl insertSegmentWithTitle:@"ak" atIndex:0 animated:NO];
    [_segControl insertSegmentWithTitle:@"a1" atIndex:1 animated:NO];
    [_segControl insertSegmentWithTitle:@"a4" atIndex:2 animated:NO];
    _segControl.selectedSegmentIndex = 1;
    
    [self.view addSubview: self.segControl];
    
    [_segControl addTarget:self action:@selector(press1) forControlEvents:UIControlEventValueChanged];
}

-(void) press
{
    NSLog(@"Value = %f", _stepper.value);
}

-(void) press1
{
    NSLog(@"%ld", (long)self.segControl.selectedSegmentIndex);
}

@end

效果图 ：

警告对话框和提示等待器

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

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

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

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

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

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

最后一部分表示执行动作将要执行的块

objectivec 复制代码

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {
    //定义一个警告对话框视图对象
    UIAlertController* _elertView;
    //等待提示对象
    //当下载，或加载比较大的文件时，可以显示此控件，处于提示等待状态
    UIActivityIndicatorView* _activityIndicator;
}
@property (retain, nonatomic) UIAlertController* elertView;
@property (retain, nonatomic) UIActivityIndicatorView* activityIndicator;
@end

objectivec 复制代码

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
//同步属性和成员变量
@synthesize elertView = _elertView;
@synthesize activityIndicator = _activityIndicator;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //通过for循环定义两个按钮
    for(int i = 0; i < 2; i++) {
        UIButton* btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        btn.frame = CGRectMake(100, 100 + i * 100, 100, 40);
        if(i == 0) {
            [btn setTitle:@"警告对话框" forState:UIControlStateNormal];
            
        } else {
            [btn setTitle:@"等待提示器" forState:UIControlStateNormal];
            
        }
        btn.tag = 100 + i;
        [btn addTarget:self action:@selector(pressBtn:) forControlEvents:UIControlEventTouchUpInside];
        
        [self.view addSubview:btn];
    }
}

-(void) pressBtn:(UIButton*) btn
{
    //创建警告对话框
    if(btn.tag == 100) {
        _elertView = [UIAlertController alertControllerWithTitle:@"警告" message:@"您的手机电量过低，即将关机" preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction* action01 = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action){/* 在这里编写执行该选项的代码*/}];
        UIAlertAction* action02 = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action){/* 在这里编写执行该选项的代码*/}];
        [_elertView addAction:action01];
        [_elertView addAction:action02];
        [self presentViewController:_elertView animated:YES completion:nil];
    } else if(btn.tag == 101) {//创建等待提示器
        //宽度和高度不可改变
        _activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(100, 300, 80, 80)];
        //设定提示的风格
        _activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleMedium;
        //_activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleLarge;
        [self.view addSubview:_activityIndicator];
        //启动动画并显示
        [_activityIndicator startAnimating];
        //停止动画并隐藏
        //[_activityIndicator stopAnimating];
    }
}

@end

效果图 ：

UITextField

UITextField控件

定义：

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

objectivec 复制代码

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITextFieldDelegate>
{
    UITextField* _textField;
}
@property (retain, nonatomic) UITextField* textField;

@end

objectivec 复制代码

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

效果图 ：

UITextFieldDelegate协议

objectivec 复制代码

-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self.textField resignFirstResponder];
    NSLog(@"键盘已回收");
}

- (void)textFieldDidBeginEditing:(UITextField *)textField
{
    NSLog(@"开始输入了");
}

- (void)textFieldDidEndEditing:(UITextField *)textField
{
    NSLog(@"结束编译了");
}

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    return YES;
}

- (BOOL)textFieldShouldEndEditing:(UITextField *)textField
{
    return YES;
}

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

objectivec 复制代码

self.textField.delegate = self;

结果：

UIScrollView

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

objectivec 复制代码

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIScrollViewDelegate>
{
    UIScrollView* _sv;
}

@property (retain, nonatomic) UIScrollView* sv;
@end

objectivec 复制代码

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize sv=_sv;
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.sv = [[UIScrollView alloc] init];
    self.sv.frame = CGRectMake(0, 0, 394, 852);
    //是否按照整页来滚动视图
    self.sv.pagingEnabled = NO;
    //是否可以开启滚动效果
    self.sv.scrollEnabled = YES;
    //设置画布的大小，画布显示在滚动视图内部，一般大于frame的大小
    self.sv.contentSize = CGSizeMake(394, 852 * 5);
    //是否可以边缘弹动效果
    self.sv.bounces = NO;
    //是否开启横向、纵向弹动效果
    self.sv.alwaysBounceHorizontal = YES;
    self.sv.alwaysBounceVertical = YES;
    //显示横向滚动条
    self.sv.showsHorizontalScrollIndicator = YES;
    //是否实现纵向滚动条
    self.sv.showsVerticalScrollIndicator = YES;
    self.sv.backgroundColor = [UIColor greenColor];
    //添加图片进去
    for(int i = 0; i < 5; i++) {
        NSString* strName = [NSString stringWithFormat:@"%d.JPG", i + 1 ];
        UIImage* image = [UIImage imageNamed:strName];
        UIImageView* iView = [[UIImageView alloc] initWithImage:image];
        iView.frame = CGRectMake(0, 852 * i, 394, 852);
        [self.sv addSubview:iView];
    }
    //将当前视图控制器做为代理对象
    self.sv.delegate = self;
    [self.view addSubview:self.sv];
}
//当滚动视图移动时，只要offset坐标发生变化时，都会调用此函数
-(void) scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"y = %f", scrollView.contentSize.width);
}


@end

效果图 ：

布局子视图

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

手动布局子视图

ViewController.h:

objectivec 复制代码

#import "ViewController.h"
#import "ViewSuper.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    ViewSuper* sView = [[ViewSuper alloc] init];
    sView.frame = CGRectMake(20, 20, 120, 200);
    sView.backgroundColor = [UIColor greenColor];
    [sView createSubViews];
    [self.view addSubview: sView];
    UIButton* btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn1.frame = CGRectMake(300, 480, 80, 40);
    [btn1 setTitle:@"放大" forState:UIControlStateNormal];
    [btn1 addTarget:self action:@selector(press1) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview: btn1];
    UIButton* btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn2.frame = CGRectMake(300, 580, 80, 40);
    [btn2 setTitle:@"缩小" forState:UIControlStateNormal];
    btn1.titleLabel.font = [UIFont systemFontOfSize: 32];
    btn2.titleLabel.font = [UIFont systemFontOfSize: 32];
    [btn2 addTarget:self action:@selector(press2) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview: btn2];
    sView.tag = 101;
}

-(void) press1
{
    //放大父视图动画
    ViewSuper* sView = (ViewSuper*)[self.view viewWithTag:101];
    [UIView animateWithDuration:1.0 animations:^{
        sView.frame = CGRectMake(20, 20, 300, 500);}];
}

-(void) press2
{
    //缩小父视图
    ViewSuper* sView = (ViewSuper*)[self.view viewWithTag:101];
    [UIView animateWithDuration:1.0 animations:^{
        sView.frame = CGRectMake(20, 20, 120, 200);}];
}

@end

ViewSuper类

objectivec 复制代码

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface ViewSuper : UIView
{
    UIView* _view1;
    UIView* _view2;
    UIView* _view3;
    UIView* _view4;
}

-(void) createSubViews;
@end

objectivec 复制代码

#import "ViewSuper.h"
 
@implementation ViewSuper
 
- (void)createSubViews {
    //左上角视图
    _view1 = [[UIView alloc] init];
    _view1.frame = CGRectMake(0, 0, 40, 40);
    
    //右上角视图
    _view2 = [[UIView alloc] init];
    _view2.frame = CGRectMake(self.bounds.size.width - 40, 0, 40, 40);
    
    //右下角视图
    _view3 = [[UIView alloc] init];
    _view3.frame = CGRectMake(self.bounds.size.width - 40, self.bounds.size.height - 40, 40, 40);
    
    //左下角视图
    _view4 = [[UIView alloc] init];
    _view4.frame = CGRectMake(0, self.bounds.size.height - 40, 40, 40);
    
    _view1.backgroundColor = [UIColor redColor];
    _view2.backgroundColor = [UIColor redColor];
    _view3.backgroundColor = [UIColor redColor];
    _view4.backgroundColor = [UIColor redColor];
    
    [self addSubview: _view1];
    [self addSubview: _view2];
    [self addSubview: _view3];
    [self addSubview: _view4];
}
 
- (void)layoutSubviews {
    [UIView animateWithDuration: 1.0 animations:^ {
        self->_view1.frame = CGRectMake(0, 0, 40, 40);
        self->_view2.frame = CGRectMake(self.bounds.size.width - 40, 0, 40, 40);
        self->_view3.frame = CGRectMake(self.bounds.size.width - 40, self.bounds.size.height - 40, 40, 40);
        self->_view4.frame = CGRectMake(0, self.bounds.size.height - 40, 40, 40);
    }];
}
 
@end

效果图 ：

点击放大后：

自动布局子视图

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

objectivec 复制代码

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

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

代码演示：

ViewController:

objectivec 复制代码

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    UIView* _superView;
    UILabel* _view1;
    UILabel* _view2;
    UILabel* _view3;
    UILabel* _view4;
    UIView* _viewCenter;
}



@end

objectivec 复制代码

#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:^{
            self->_superView.frame = CGRectMake(10, 30, 300, 500);
        }];
    } else {
        [UIView animateWithDuration:1.0 animations:^{
                    self->_superView.frame = CGRectMake(20, 50, 180, 300);
        }];
    }
    isLarge = !isLarge;
}

@end

效果图 :