iOS UI初级-常用UI控件

控件都是继承UIControl控件

1.Lable控件

2.Button控件

点击按钮

3.TextFiled文本框

// 创建一个 TextFiled
    UITextField *textFiled = [[ UITextField alloc ] initWithFrame : CGRectMake ( 100 , 50 , 200 , 40 )];
    // 设置输入框的边距样式
    textFiled. borderStyle = UITextBorderStyleRoundedRect ;
    // 设置输入框的字体
    textFiled. font = [ UIFont boldSystemFontOfSize : 16 ];
    // 设置输入文字的颜色
    textFiled. textColor = [ UIColor grayColor ];
    // 设置或者获取文本框的内容
//    textFiled.text = @" 你好 ";
    // 设置对齐方式
    textFiled. textAlignment = NSTextAlignmentCenter ;
    // 设置字母是否自动大写
    textFiled. autocapitalizationType = UITextAutocapitalizationTypeWords ;
    // 设置单词提示
//    textFiled.autocorrectionType = UITextAutocorrectionTypeNo;
    // 输入框为空时提示文本
    textFiled. placeholder = @" 请输入用户名 " ;
    // 修改键盘上的 return 按钮标题
    textFiled. returnKeyType = UIReturnKeyGo ;
    // 设置是否安全输入
    textFiled. secureTextEntry = YES ;
    // 纯数字键盘
//    textFiled.keyboardType = UIKeyboardTypeNumberPad;
    // 开启清除按钮
    textFiled. clearButtonMode = UITextFieldViewModeWhileEditing ;
    // 成为第一个响应者，弹出键盘
    [textFiled becomeFirstResponder ];
    // 失去第一个响应者
//    [textFiled resignFirstResponder];
   
    // 设置代理
    textFiled. delegate = self ;

代理协议中的办法

// 将要开始编辑
- ( BOOL )textFieldShouldBeginEditing:( UITextField *)textField
{
    NSLog ( @" 将要开始编辑 " );
    return YES ;
}
// 已经开始编辑
- ( void )textFieldDidBeginEditing:( UITextField *)textField
{
    NSLog ( @" 已经开始编辑 " );
}
// 将要结束编辑
- ( BOOL )textFieldShouldEndEditing:( UITextField *)textField
{
    NSLog ( @" 将要结束编辑 " );
    return YES ;
}
// 已经结束编辑
- ( void )textFieldDidEndEditing:( UITextField *)textField;
{
    NSLog ( @" 已经结束编辑 " );
}
// 输入框内容被修改的时候调用协议方法 ----- 重要
- ( BOOL )textField:( UITextField *)textField shouldChangeCharactersInRange:( NSRange )range replacementString:( NSString *)string
{
    NSString *lastStr = textField. text ;
    NSString *rangeStr = NSStringFromRange (range);
    NSString *replaceStr = string;
    NSLog ( @"lastStr is %@" , lastStr);
    NSLog ( @"rangeStr is %@" , rangeStr);
    NSLog ( @"replaceStr is %@" , replaceStr);
    return YES ;
}

4.ImageView

    // 创建图像
    UIImage *image = [ UIImage imageNamed : @"scene1.jpg" ];
    // 设置 Image 图片
    UIImageView *imageView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 100 , 100 , 200 , 200 )];
    imageView. image = image;
   
   
    // 设置高亮状态下的图片
    imageView. highlightedImage = [ UIImage imageNamed : @"scence3.jpg" ];
   
    imageView. highlighted = YES ;
   
    // 设置内容模式
    // 横向和纵向都拉伸到边框
    imageView. contentMode = UIViewContentModeScaleToFill ;
    // 等比例拉伸，当某一方向拉伸到达时，则不拉伸
    imageView. contentMode = UIViewContentModeScaleAspectFit ;
    // 等比例拉伸，当某一方向到达时，则继续拉伸到另一方向也到头
    imageView. contentMode = UIViewContentModeScaleAspectFill ;
   
    //imageView 设置动画图片组
    // 先创建一个数组装入图片
    UIImage *image1 = [ UIImage imageNamed : @"scene1.jpg" ];
    UIImage *image2 = [ UIImage imageNamed : @"scene2.jpg" ];
    UIImage *image3 = [ UIImage imageNamed : @"scene3.jpg" ];
    UIImage *image4 = [ UIImage imageNamed : @"scene4.jpg" ];
    UIImage *image5 = [ UIImage imageNamed : @"scene5.jpg" ];
    NSArray *imArr = @[ image1, image2, image3, image4, image5 ] ;

    // 设置动画的播放集合
    imageView. animationImages = imArr;
    // 设置动画播放的时间
    imageView. animationDuration = 5 ;
    // 开始动画
    [imageView startAnimating ];
     [ self . window addSubview :imageView];

    // 注意： imageView 的触摸事件是关闭的
    UIButton *bnt = [ UIButton buttonWithType : UIButtonTypeContactAdd ];
    bnt. frame = CGRectMake ( 150 , 150 , 40 , 40 );
    [bnt addTarget : self action : @selector (bntClick) forControlEvents : UIControlEventTouchUpInside ];
    [ self . window addSubview :bnt];

    bnt.userInteractionEnabled = YES;

5.UIslider 滑块

//UISlider 滑块的高度是固定的
    UISlider *slider = [[ UISlider alloc ] initWithFrame : CGRectMake ( 50 , 200 , 300 , 100 )];
   
    // 设置滑动的最大值和最小值
    slider. maximumValue = 100 ;
    slider. minimumValue = 0 ;
    // 设置初始值
    slider. value = 50 ;
    // 设置滑动条左边 | 右边的颜色
//    [slider setMaximumTrackTintColor:[UIColor redColor]];
//    [slider setMinimumTrackTintColor:[UIColor blueColor]];
    // 设置滚动条的左右边的图片
    UIImage *image1 = [ UIImage imageNamed : @"com_slider_max_l-Decoded.png" ];
    UIImage *image2 = [ UIImage imageNamed : @"com_slider_max_r-Decoded.png" ];
   
    // 设置图片的拉伸点
//    image1 = [image1 stretchableImageWithLeftCapWidth:5 topCapHeight:0];
//    image2 = [image2 stretchableImageWithLeftCapWidth:4 topCapHeight:0];
   
    image1 = [image1 resizableImageWithCapInsets : UIEdgeInsetsMake ( 0 , 5 , 0 , 5 )];
    image2 = [image2 resizableImageWithCapInsets : UIEdgeInsetsMake ( 0 , 5 , 0 , 5 )];
   
    [slider setMinimumTrackImage :image1 forState : UIControlStateNormal ];
    [slider setMaximumTrackImage :image2 forState : UIControlStateNormal ];

   

    // 设置滑块的图片
    UIImage *image = [ UIImage imageNamed : @"com_thumb_max_n-Decoded" ];
    [slider setThumbImage :image forState : UIControlStateNormal ];
    UIImage *image0 = [ UIImage imageNamed : @"com_thumb_max_h-Decoded" ];

    [slider setThumbImage:image0 forState:UIControlStateHighlighted];

    // 添加事件
    [slider addTarget : self action : @selector (sliderAction:) forControlEvents : UIControlEventValueChanged ];
   

    [self.window addSubview:slider];

6.开关

    UISwitch *switchUI = [[ UISwitch alloc ] initWithFrame : CGRectMake ( 50 , 100 , 100 , 100 )];
    [ self . window addSubview :switchUI];
   
    // 默认开
    switchUI. on = YES ;
   
    // 添加事件
    [switchUI addTarget : self action : @selector (switchAction:) forControlEvents : UIControlEventValueChanged ];
}
- ( void )switchAction:( UISwitch *)switchU
{
    if (switchU. on ) {
        NSLog ( @" 开启 " );
    } else {
        NSLog ( @" 关闭 " );
    }

}

7.风火轮

- ( void )_initUIActivityIndicatorView
{
    // 初始化风火轮，并将其状态改成白色大的
    UIActivityIndicatorView *activityView = [[ UIActivityIndicatorView alloc ] initWithActivityIndicatorStyle : UIActivityIndicatorViewStyleGray ];
    // 改变风火轮的坐标 长宽都可以为 0 ，如果不为 0 ，则会改变坐标，因为默认居中
    activityView. frame = CGRectMake ( 100 , 100 , 0 , 0 );
    // 开始转动
    [activityView startAnimating ];
    // 停止转动 自动隐藏
//    [activityView stopAnimating];

    [self.window addSubview:activityView];

8.页面加载器

// 页面加载器
- ( void )_initUIPageControl
{
    // 初始化页面加载器
    UIPageControl *pageCon = [[ UIPageControl alloc ] initWithFrame : CGRectMake ( 200 , 200 , 100 , 20 )];
    // 设置背景颜色
    pageCon. backgroundColor = [ UIColor grayColor ];
    // 设置总的页数
    pageCon. numberOfPages = 5 ;
    // 设置当前页数 下标 点击左边，或右边，白点会动
    pageCon. currentPage = 2 ;
    // 添加点击事件
    [pageCon addTarget : self action : @selector (pageConClick:) forControlEvents : UIControlEventValueChanged ];
   
    [ self . window addSubview :pageCon];

}

- ( void )pageConClick:( UIPageControl *)pageCon
{
    // 打印出当前的页数
    NSLog ( @"%ld" , pageCon. currentPage );

}

9.进度条

// 进度条
- ( void )_initUIProgressView
{
    // 初始化进度条，继承的是 UIView
    UIProgressView *progressView = [[ UIProgressView alloc ] initWithProgressViewStyle : UIProgressViewStyleDefault ];
    // 高度可以设成 0 背景颜色也无效
    progressView. frame = CGRectMake ( 100 , 300 , 200 , 0 );
    // 设置进度值 范围是 0~1
    progressView. progress = 0 ;
    // 设置已经加载的进度条的颜色
    progressView. progressTintColor = [ UIColor redColor ];
    // 设置未加载的进度条的颜色
    progressView. trackTintColor = [ UIColor blueColor ];
    [ self . window addSubview :progressView];
   
    // 让进度条走动
    [ NSTimer scheduledTimerWithTimeInterval : 0.2
                                     target : self
                                   selector : @selector (progressViewAction:)
                                   userInfo :progressView
                                    repeats : YES ];
   

}

- ( void )progressViewAction:( NSTimer *)timer
{
//    UIProgressView *progerssView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
    UIProgressView *progerssView = timer. userInfo ;
    progerssView. progress += 0.1 ;
    if (progerssView. progress >= 1 ) {
        [timer invalidate ];
        NSLog ( @"OK!" );
    }

}

10.提示框AlertView

// 定义一个提示框
    UIAlertView *alertView = [[ UIAlertView alloc ] initWithTitle : @" 警告 "
                                                        message : @" 这是提示框 "
                                                       delegate : self
                                              cancelButtonTitle : @" 取消 "
                                              otherButtonTitles : @" 确定 " , nil ];
   
   
//    设置 alterView 样式 alterViewStyle
//    默认带两个输入框的
//    alertView.alertViewStyle = UIAlertViewStyleLoginAndPasswordInput;
//    默认带一个输入框的
//    alertView.alertViewStyle = UIAlertViewStylePlainTextInput;
//    默认带一个密码输入框
//    alertView.alertViewStyle = UIAlertViewStyleSecureTextInput;
//    默认
//    alertView.alertViewStyle = UIAlertViewStyleDefault;
   
//    [alertView show];
   
   
   
//    UIAlertController 代替了 AlertView 和 ActionSheet
    // 类方法创建
    UIAlertController *alterControl = [ UIAlertController alertControllerWithTitle : @" 警告 "
                                                                          message : @" 这是提示栏 "
                                                                   preferredStyle : UIAlertControllerStyleAlert ];
    // 添加一个文本框 注意：只有 AlertControllertStyleAlert 才能添加文本框
    [alterControl addTextFieldWithConfigurationHandler :^( UITextField *textField) {
        // 设置文本框的内容 添加一些属性
        textField. secureTextEntry = YES ; // 安全输入
        textField. textAlignment = NSTextAlignmentCenter ; // 对齐方式
        textField. placeholder = @" 请输入密码 " ; // 提示内容
        textField. keyboardType = UIKeyboardTypeNumberPad ; // 只让输入数字
       
       
    }];
    // 创建 action 取消按钮
    UIAlertAction *cancelAction = [ UIAlertAction actionWithTitle : @" 取消 " style : UIAlertActionStyleCancel handler :^( UIAlertAction *action) {
        NSLog ( @" 取消 " );
    }];
   
    // 再创建一个 action 确定按钮
    UIAlertAction *enterAction = [ UIAlertAction actionWithTitle : @" 确定 " style : UIAlertActionStyleDestructive handler :^( UIAlertAction *action) {
        NSLog ( @" 确定 " );
    }];
   
   
    // 添加 action
    [alterControl addAction :cancelAction];
    [alterControl addAction :enterAction];
   
    // 弹出一个模态视图（因为是 control ，不是视图，所以不能 show ）
    [ self presentViewController :alterControl animated : YES completion : nil ];

   

11.提示框 Sheet

    // 从下边出来的提示框
//    UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:@" 提示 "
//                                                             delegate:self
//                                                    cancelButtonTitle:@" 取消 "
//                                               destructiveButtonTitle:@" 确定 " otherButtonTitles:@" 按钮 1", nil];
//    [actionSheet showInView:actionSheet];
   
    // 用 UIAlertController 替换后的 UIActionSheet
    UIAlertController *alterSheet = [ UIAlertController alertControllerWithTitle : @" 提示 "
                                                                        message : @" 这是提示框 "
                                                                 preferredStyle : UIAlertControllerStyleActionSheet ];
    // 取消按钮
    UIAlertAction *cancelAction = [ UIAlertAction actionWithTitle : @" 取消 " style : UIAlertActionStyleCancel handler :^( UIAlertAction *action) {
        NSLog ( @" 取消 " );}];
    // 确定按钮
    UIAlertAction *enterAction = [ UIAlertAction actionWithTitle : @" 确定 " style : UIAlertActionStyleDestructive handler :^( UIAlertAction *action) {
        NSLog ( @" 确定 " );
    }];
    // 其他按钮
    UIAlertAction *otherActon = [ UIAlertAction actionWithTitle : @" 其他 " style : UIAlertActionStyleDefault handler :^( UIAlertAction *action) {
        NSLog ( @" 其他 " );
    }];
   
    [alterSheet addAction :cancelAction];
    [alterSheet addAction :enterAction];
    [alterSheet addAction :otherActon];
   
    // 弹出一个模态视图

    [self presentViewController:alterSheet animated:YES completion:nil];

//用以前的方式可以调用此方法

- ( void )actionSheet:( UIActionSheet *)actionSheet clickedButtonAtIndex:( NSInteger )buttonIndex

{
    // 下标顺序是从上到下一次增加的
    NSLog ( @"%ld" , buttonIndex);

}

12、分段控件

// 分段控件
- ( void )_initSementControl
{
    // 设置按钮标题数组
    NSArray *arr = [ NSArray arrayWithObjects : @" 选择 " , @" 工具 " , @" 帮助 " , nil ];
    // 创建分段控件
    UISegmentedControl *segmentedCon = [[ UISegmentedControl alloc ] initWithItems :arr];
    segmentedCon. frame = CGRectMake ( 100 , 250 , 200 , 50 );
    // 设置样式
    segmentedCon. segmentedControlStyle = UISegmentedControlStyleBar ;
    // 默认选中的按钮
    segmentedCon. selectedSegmentIndex = 0 ;
    // 点击触发事件

    [segmentedCon addTarget:self action:@selector(segmentedAction:) forControlEvents: UIControlEventValueChanged ];

    [ self . view addSubview :segmentedCon];
}

- ( void )segmentedAction:( UISegmentedControl *)segmentedCon
{
    NSLog ( @" 当前的页数 ,%ld" , segmentedCon. selectedSegmentIndex );
}