【iOS】UI学习（三）

前言

本篇博客是我在学习UI部分内容的学习笔记，希望对你有所帮助，如有错误，还请指出！

步进器和分栏控制器

  步进器（Stepper）和分栏控制器（Tab Controller）是iOS开发中常用的两种控件。
  步进器通常用于允许用户增加或减少数值，例如调整音量或选择数量。它通常由一个加号按钮和一个减号按钮组成，用户可以通过按这些按钮来逐步增加或减少数值。步进器还可以具有最小值和最大值，以确保用户不能选择超出指定范围的数值。步进器常用于购物车等需要增减数量的场景，例如增减房间数和人数。
  分栏控制器则是iOS中用于在多个视图控制器之间切换的控件。它通常出现在屏幕底部，每个分栏对应一个视图控制器，用户可以通过点击分栏来切换不同的视图控制器。分栏控制器常用于主界面的设计，例如在社交应用中切换"消息"、“联系人”、"动态"等不同的界面。

下面给出代码示例：

ViewController.h文件：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    //定义一个步进器对象（步进器：按照一定的数字来调整某个数据，比如每次调整音量时以5为单位）
    UIStepper* _stepper;
    
    //定义一个分栏控制器
    UISegmentedControl* _segControl;
}

//定义属性
@property(retain, nonatomic)UIStepper* stepper;
@property(retain, nonatomic)UISegmentedControl* segControl;

@end

ViewController,m文件：

#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(150, 100, 80, 40);
    
    //设置步进器的最小值
    _stepper.minimumValue = 0;
    
    //设置步进器的最大值
    _stepper.maximumValue = 100;
    
    //设置步进器的当前值（不设置的话 默认为0）
    _stepper.value = 50;
    
    //设置步进器的步进制，即每次向前或向后步进的步伐值（默认为1）
    _stepper.stepValue = 5;
    
    //是否可以重复响应事件操作（一直按着可以持续增大或减小）
    _stepper.autorepeat = YES;
    
    //是否将步进结果通过事件函数响应出来（只有在stepValue设置为YES时，才有效果）
    //（设置为YES时，当我们一直按着步进器进行持续增大或减小时，他会通过下面的事件函数将每次调整后的value都打印出来；设置为NO，则不会，但其实步进器的当前值还是发生了变化的）
    _stepper.continuous = YES;
    
    //添加一个事件函数
    //p1:函数实现体  p2：函数体  p3:事件值改变
    [_stepper addTarget:self action:@selector(stepChanged) forControlEvents:UIControlEventValueChanged];
    
    [self.view addSubview:_stepper];
    
    //创建一个分栏控件
    _segControl = [[UISegmentedControl alloc] init];
    
    //设置分栏控件的位置和大小（宽度可变，高度不可变）
    _segControl.frame = CGRectMake(50, 200, 300, 40);
    
    //添加一个按钮元素（多个按钮元素会平分分栏控件的宽度）
    [_segControl insertSegmentWithTitle:@"黄昏" atIndex:0 animated:NO];
    
    //p1:按钮选项文字  p2:按钮的索引位置  p3:是否插入动画效果
    [_segControl insertSegmentWithTitle:@"约尔" atIndex:1 animated:NO];
    
    [_segControl insertSegmentWithTitle:@"阿尼亚" atIndex:2 animated:NO];
    
    [_segControl insertSegmentWithTitle:@"邦德" atIndex:3 animated:NO];
    
    //设置当前默认按钮索引的位置
    _segControl.selectedSegmentIndex = 0;
    
    [_segControl addTarget:self action:@selector(segChanged) forControlEvents:UIControlEventValueChanged];
    
    [self.view addSubview:_segControl];
}

- (void)stepChanged
{
    NSLog(@"step pressed！当前_stepper的值为%f", _stepper.value);
}

- (void)segChanged
{
    NSLog(@"当前索引位置为%d", _segControl.selectedSegmentIndex);
}

@end

运行结果：

警告对话框和等待提示器

  警告对话框（Alert Dialog）主要用于提醒用户关于程序中特定事件的信息。例如，当用户的操作可能会导致数据丢失时，程序会弹出一个警告对话框，询问用户是否真的要执行这个操作。在JavaScript中，你可以使用window.alert()方法来创建一个警告对话框。在iOS中，你可以使用UIAlertController类来创建一个警告对话框。
  等待提示器（Loading Indicator）则主要用于在程序需要花费一些时间来处理任务，例如下载文件或者加载数据时，告诉用户程序正在处理，让用户知道程序没有冻结，只是在执行需要一些时间的操作。在很多情况下，等待提示器会以一个旋转的圆圈的形式出现。

代码示例：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize activityInicator = _activityInicator;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    for (int i = 0; i < 2; i++) 
    {
        UIButton* btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        
        btn.frame = CGRectMake(150, 100 + 100 * i, 100, 40);
        
        if (i == 0) {
            [btn setTitle:@"警告对话框⚠️" forState:UIControlStateNormal];
        } else if (i == 1) {
            [btn setTitle:@"等待提示器⌛️" forState:UIControlStateNormal];
        }
        
        btn.tag = 101 + i;
        
        [btn addTarget:self action:@selector(pressBtn:) forControlEvents:UIControlEventTouchUpInside];
        
        [self.view addSubview:btn];
    }
}

- (void)pressBtn:(UIButton *)btn
{
    if (btn.tag == 101) {
        
        //创建一个UIAlertController对象
        //P1:弹出框的标题  P2弹出框的内容
        //P3:弹出的警告框的样式为UIAlertControllerStyleAlert（即中心弹出的警告框）
        UIAlertController* alertController = [UIAlertController alertControllerWithTitle:@"警告⚠️" message:@"你的手机电量过低，即将关机📴" preferredStyle:UIAlertControllerStyleAlert];

        //添加“确认”动作按钮到控制器上
        //P1:标题文字  P2:动作样式，有三种动作样式：常规(default)、取消(cancel)以及警示(destruective)
        //P3:用户选中并点击该动作时，所执行的代码
        UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) {
            // 用户点击确认按钮后执行的代码
        }];
        //将动作按钮添加到alertController视图上
        [alertController addAction:defaultAction];

        //添加“取消”动作按钮到控制器上
        UIAlertAction* cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * action) {
            // 用户点击取消按钮后执行的代码
        }];
        //将动作按钮添加到alertController视图上
        [alertController addAction:cancelAction];

        //将警告框显示出来
        [self presentViewController:alertController animated:YES completion:nil];
    } else if (btn.tag == 201) {
        //等待提示器创建
        //宽度和高度不可改变
        _activityIndicator = [[UIActivityIndicatorView alloc] init];
        _activityInicator.frame = CGRectMake(100, 300, 80, 80);
        
        //设定提示的风格
        _activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleMedium;
        _activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleLarge;
        
        [self.view addSubview:_activityIndicator];
        
        //启动动画并显示
        [_activityIndicator startAnimating];
        //停止动画并隐藏
        [_activityIndicator stopAnimating];
    }
}

@end

运行结果：

UITextField

  UITextField 是 iOS 开发中的一个基本组件，用于接收用户输入的文本信息。它是 UIKit 框架中的一个类，通常被用于创建文本框。
  UITextField 提供了很多属性和方法来自定义文本框的行为和外观。例如，我们可以通过设置 placeholder 属性来显示提示文字，设置 text 属性来获取或设置文本框中的文本，使用 keyboardType 属性来改变键盘类型等等。
  还可以通过实现 UITextFieldDelegate 协议中的方法来响应文本框的各种事件，如开始编辑、结束编辑、文本改变等。

下面进行代码演示：

ViewController.h文件：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    //定义一个textField
    //textField：是一个文本输入区域，例如：用户名、密码等需要输入文本文字的内容区域
    //textField只能输入单行文字，不能输入或显示多行
    UITextField* _textField;
}

//定义属性
@property(retain, nonatomic)UITextField* textField;

@end

ViewController.m文件：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize textField = _textField;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UILabel* UserName = [[UILabel alloc] init];
    UserName.frame = CGRectMake(90, 150, 80, 40);
    UserName.text = @"用户名:";
    UserName.font = [UIFont systemFontOfSize:15];
    UserName.textColor = [UIColor blackColor];
    [self.view addSubview:UserName];
    
    //创建一个文本输入区对象
    self.textField = [[UITextField alloc] init];
    //设定文本输入区的位置和大小
    self.textField.frame = CGRectMake(150, 150, 180, 40);
    //设置textField的内容文字
    //self.textField.text = @"用户名";
    //设置文字的字体和大小
    self.textField.font = [UIFont systemFontOfSize:15];
    //设置字体的颜色
    self.textField.textColor = [UIColor blueColor];
    //设置边框的风格：
    //UITextBorderStyleRoundedRect：圆角风格（默认为这个）
    //UITextBorderStyleNone：无边框风格
    //UITextBorderStyleLine：线框风格
    //UITextBorderStyleBezel：bezel线框风格
    self.textField.borderStyle = UITextBorderStyleRoundedRect;
    //设置虚拟键盘风格（常用的）：
    //UIKeyboardTypeNumberPad：默认风格
    //UIKeyboardTypeNumberPad：纯数字风格
    //UIKeyboardTypeNamePhonePad：字母和数字组合风格
    self.textField.keyboardType = UIKeyboardTypeDefault;
    //设置提示文字 当text属性为空时，显示此条信息
    self.textField.placeholder = @"请输入用户名";
    //是否作为密码输入（YES——加密输入*；NO——不加密输入 正常显示输入文字）
    self.textField.secureTextEntry = NO;
    
    [self.view addSubview:self.textField];
    
    //设置代理对象
    self.textField.delegate = self;
}

//四个协议：
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
    NSLog(@"开始编辑了！");
}

- (void)textFieldDidEndEditing:(UITextField *)textField
{
    //结束输入后 将输入框清空
    self.textField.text = @"";
    NSLog(@"输入结束！");
}

//是否可以开始输入（YES——可以；NO——不可以） 如果不另外实现该函数，默认为YES
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    return YES;
}

//是否可以结束输入（YES——可以；NO——不可以） 如果不另外实现该函数，默认为YES
- (BOOL)textFieldShouldEndEditing:(UITextField *)textField
{
    return  YES;
}

//点击屏幕空白处调用此函数
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    //使虚拟键盘收回，不再作为第一响应者
    [self.textField resignFirstResponder];
}

@end

运行结果：

登陆界面案例

代码示例：

ViewController.h文件：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    //登录界面的组成： 用户名提示(Label)：输入框；  密码提示(Label)：密码输入框(TextFile)；  登录按钮(Button)；  注册按钮(BUtton)。
    
    //用户名提示Label
    UILabel* _lbUserName;
    //密码提示
    UILabel* _lbPassword;
    
    //用户名输入框
    UITextField* _tfUserName;
    //密码输入框
    UITextField* _tfPassWord;
    
    //登录按钮
    UIButton* _btLogin;
    //注册按钮
    UIButton* _btRegister;
}

@end

ViewController.m文件：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //用户名提示标签创建
    _lbUserName = [[UILabel alloc] init];
    _lbUserName.frame = CGRectMake(20, 100, 80, 40);
    _lbUserName.text = @"用户名：";
    _lbUserName.font = [UIFont systemFontOfSize:20];
    _tfUserName.textAlignment = NSTextAlignmentLeft;
    
    //密码提示创建
    _lbPassword = [[UILabel alloc] init];
    _lbPassword.frame = CGRectMake(20, 200, 80, 40);
    _lbPassword.text = @"密码：";
    _lbPassword.font = [UIFont systemFontOfSize:20];
    _lbPassword.textAlignment = NSTextAlignmentLeft;
    
    //用户名输入框
    _tfUserName = [[UITextField alloc] init];
    _tfUserName.frame = CGRectMake(120, 100, 180, 40);
    _tfUserName.placeholder = @"请输入用户名";
    _tfUserName.borderStyle = UITextBorderStyleRoundedRect;
    
    //密码输入框
    _tfPassWord = [[UITextField alloc] init];
    _tfPassWord.frame = CGRectMake(120, 200, 180, 40);
    _tfPassWord.placeholder = @"请输入密码";
    _tfPassWord.borderStyle = UITextBorderStyleRoundedRect;
    _tfPassWord.secureTextEntry = YES;
    
    //登录按钮和注册按钮的创建
    _btLogin = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _btLogin.frame = CGRectMake(150, 300, 80, 40);
    [_btLogin setTitle:@"登录" forState:UIControlStateNormal];
    [_btLogin addTarget:self action:@selector(pressLogin) forControlEvents:UIControlEventTouchUpInside];
    
    _btRegister = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _btRegister.frame = CGRectMake(150, 360, 80, 40);
    [_btRegister setTitle:@"注册" forState:UIControlStateNormal];
    [_btRegister addTarget:self action:@selector(pressRegister) forControlEvents:UIControlEventTouchUpInside];
    
    //将所有控件添加到视图中显示
    [self.view addSubview:_lbUserName];
    [self.view addSubview:_lbPassword];
    [self.view addSubview:_tfUserName];
    [self.view addSubview:_tfPassWord];
    [self.view addSubview:_btLogin];
    [self.view addSubview:_btRegister];
}

- (void)pressLogin
{
    NSString* strName = @"kacy";
    NSString* strPass = @"1234567";
    
    //获取输入框里的用户名和密码文字
    NSString* strTextName = _tfUserName.text;
    NSString* strTextPass = _tfPassWord.text;
    
    if ([strTextName isEqualToString:strName] && [strTextPass isEqualToString:strPass]) {  //这里不能用==，因为这两个指针不一定相等，我们只需要比较里面的内容
        NSLog(@"用户名和密码输入正确！");
        
        //创建一个UIAlertController对象
        //P1:弹出框的标题  P2弹出框的内容  P3:弹出的警告框的样式为UIAlertControllerStyleAlert（即中心弹出的警告框）
        UIAlertController* alertController = [UIAlertController alertControllerWithTitle:@"提示" message:@"验证成功，正在登录..." preferredStyle:UIAlertControllerStyleAlert];

        UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:nil];
        [alertController addAction:defaultAction];

        UIAlertAction* cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        [alertController addAction:cancelAction];

        [self presentViewController:alertController animated:YES completion:nil];
    } else {
        NSLog(@"用户或密码错误");
        
        UIAlertController* alertController = [UIAlertController alertControllerWithTitle:@"提示" message:@"用户名或密码错误，登录失败" preferredStyle:UIAlertControllerStyleAlert];

        UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:nil];
        [alertController addAction:defaultAction];

        UIAlertAction* cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        [alertController addAction:cancelAction];

        [self presentViewController:alertController animated:YES completion:nil];
    }
}

- (void)pressResigter
{
    
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    //回收键盘对象⌨️
    [_tfUserName resignFirstResponder];
    [_tfPassWord resignFirstResponder];
}

@end

上述代码对用户注册部分的后续界面跳转代码未进行实现。

运行结果：

UIScrollView基础

  UIScrollView是iOS中非常重要的一个控件，它允许用户在其包含的视图大于其自身尺寸时进行滚动和缩放。
  UIScrollView的主要特性和用途包括：

• 滚动视图：当内容视图的尺寸大于UIScrollView的尺寸时，用户可以通过拖动来滚动内容视图，查看被隐藏的部分。
• 缩放视图：UIScrollView支持对内容视图进行缩放，用户可以通过双击或者捏合手势来放大或者缩小内容视图。
• 嵌套滚动视图：UIScrollView可以嵌套使用，一个UIScrollView的内容视图可以是另一个UIScrollView。这种方式常用于实现复杂的滚动效果，比如说日历视图、时钟视图等。
• 自动布局：UIScrollView支持自动布局（Auto Layout），可以根据内容视图的尺寸自动调整滚动范围。
• 滚动事件响应：通过实现UIScrollViewDelegate协议，我们可以对滚动、缩放、动画等事件进行响应。

  UIScrollView的使用场景很广泛，比如说网页浏览、阅读器、图片浏览器等，都是UIScrollView的典型应用。

滚动视图的高级功能

代码示例：

#import "ViewController.h"
 
@interface ViewController ()
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
    
    //定义并创建一个滚动视图并设置其位置，滚动视图可以对视图内容进行滚屏查看
    UIScrollView* sv = [[UIScrollView alloc] initWithFrame: CGRectMake(0, 0, 394, 852)];
    
    //是否按照整页滚动视图
    sv.pagingEnabled = YES;
    //是否可以开启滚动效果
    sv.scrollEnabled = YES;
   
    //设置画布的大小，画布显示在滚动视图的内部，一般大于frame的大小，第一个参数表示宽，第二个表示高
    sv.contentSize = CGSizeMake(394 * 5, 852);
    
    //是否可以边缘弹动效果
    sv.bounces = YES;
    //开启横向弹动效果
    sv.alwaysBounceHorizontal = YES;
    //开启纵向弹动效果
    sv.alwaysBounceVertical = NO;
   
    //是否显示横向滚动条
    sv.showsHorizontalScrollIndicator = NO;
    //是否显示纵向滚动条
    sv.showsVerticalScrollIndicator = NO;
    
    for (int i = 0; i < 3; i++) {
        NSString* imageName = [NSString stringWithFormat: @"syx%d.jpg", i + 1];
        UIImage* aImage = [UIImage imageNamed: imageName];
        UIImageView* aView = [[UIImageView alloc] initWithImage: aImage];
        aView.frame = CGRectMake(394 * i, 0, 394 , 852);
        [sv addSubview: aView];
    }
    
    //设置背景颜色
    sv.backgroundColor = [UIColor cyanColor];
    
    [self.view addSubview: sv];
}
 
@end

运行结果：

总结

  以上就是本篇博客的全部内容，警告对话框和等待提示器、滚动视图等的相关内容在UI学习中还是比较重要的，学完记得动手实践哦！希望这篇博客对您有所帮助～