【UI初级 连载四】--------UI常用控件

【1】 UILabel  -------------------------文本标签

【2】 UIButton  ------------------------按钮

    UIControl ————————控件（按钮的父类）

【3】 UITextField  -------------------文本输入框

【4】 UIImageView  -------------------图像视图 

【5】  UISlider  ------------------------滑块

【6】   UISWitch  ------------------------选择开关

【7】 UIActivityIndicatorView-----风火轮

【8】 UIPageControl------------------页面控制

【9】 UIProgressView------------------进度条

【10】 UIAlertView----------------提示框

【11】 UIAlertController------提示框

【12】 UIActionSheet------------提示框

【13】 UISegmentedControl-------分段控件

一、UILabel  

    // 设置 label
    [ self _initLabel ];
   
    // 设置 button
    [ self _initButton ];

   

#pragma mark -UILabel
- ( void )_initLabel{
    // 创建一个 Label
    UILabel *label = [[ UILabel alloc ] initWithFrame : CGRectMake ( 50 , 50 , 200 , 200 )];
    label. backgroundColor = [ UIColor cyanColor ];
    // 设置文本内容
    label. text = @"1234567890" ;
    // 设置字体 ( 系统字体 )
    label. font = [ UIFont systemFontOfSize : 19 ];
    // （设为粗体）
    //    label.font = [UIFont boldSystemFontOfSize:19];
   
    //===== 字体类（ UIFont ） =================
//    NSArray *familyNames = [UIFont familyNames];
//    NSLog(@"familyNames is %@",familyNames);
//    label.font = [UIFont fontWithName:@"Papyrus" size:19];
   
    // 设置字体颜色
    label. textColor = [ UIColor redColor ];
   
    // 设置文本对齐方式
    label. textAlignment = NSTextAlignmentCenter ;
   
    // 设置当前显示行数 ---- 默认为 1 行，若设为 0 ，则是自动换行
    label. numberOfLines = 0 ;
   
    // 自动根据文本调整宽度和高度
    [label sizeToFit ];
//    NSLog(@"label is %@",label);
//    // 这样打印出来的 label 的宽高是自动调整后的宽高。
   
    [ self . window addSubview :label];
}

二、UIButton

#pragma mark -UIButton

- ( void )_initButton{
    // 创建一个 Button
    UIButton *button = [ UIButton buttonWithType : UIButtonTypeCustom ];
    button. frame = CGRectMake ( 50 , 300 , 100 , 40 );
    button. backgroundColor = [ UIColor whiteColor ];
   
    // 设置显示标题，（标题总是需要跟状态绑定到一起的）
    [button setTitle : @"Normal" forState : UIControlStateNormal ];
   
    // 设置高亮状态下的 Title
    [button setTitle : @"Highlighted" forState : UIControlStateHighlighted ];
   
    // 设置选中状态下的 Title
    [button setTitle : @"Selected" forState : UIControlStateSelected ];
   
    // 设置按钮是否选中
    button. selected = true ;
   
    // 设置标题的字体
    button. titleLabel . font = [ UIFont boldSystemFontOfSize : 20 ];
   
    // 设置标题的颜色
    [button setTitleColor :[ UIColor redColor ] forState : UIControlStateNormal ];
    [button setTitleColor :[ UIColor cyanColor ] forState : UIControlStateSelected ];
   
    //===== 给 button 设置背景图片 ============================
    // 获取图片 -----imageNamed: 在当前工程目录下找到名字为 “ ” 的图片 , 如果图片是 png 格式的，可以不加 .png ，但还是建议添加上
    UIImage *image1 = [ UIImage imageNamed : @"back_on_black.png" ];
    UIImage *image2 = [ UIImage imageNamed : @"back_on.png" ];
   
   
    // 设置背景图片 ----- 图片会随着按钮的 frame 改变而拉伸
    [button setBackgroundImage :image1 forState : UIControlStateNormal ];
    // 设置高亮状态下的背景图片
    [button setBackgroundImage :image2 forState : UIControlStateHighlighted ];

    // 设置图片 ----- 图片不会被拉伸 -- 但是 imageView 上面不能显示 Title
    [button setImage :image1 forState : UIControlStateNormal ];
    [button setImage :image2 forState : UIControlStateHighlighted ];
   
    // 给按钮添加点击事件
    [button addTarget : self action : @selector (buttonClick:) forControlEvents : UIControlEventTouchUpInside ];
   
    // 设置 titleLabel 的偏移量
    [button setTitleEdgeInsets : UIEdgeInsetsMake ( 0 , - 50 , 0 , 0 )];
    [button setImageEdgeInsets : UIEdgeInsetsMake ( 0 , 20 , 0 , 0 )];
   
    // 设置按钮是否可用
    button. enabled = NO ;
    // 是否相应触摸时间
    button. userInteractionEnabled = NO ;

    [ self . window addSubview :button];
}

- ( void )buttonClick:( UIButton *)btn
{
    NSLog ( @"btnClick" );
    //选中状态取反
//    btn.selected = !btn.selected;

}

三、 UITextField

#import "AppDelegate.h"

@interface AppDelegate ()< UITextFieldDelegate >

@end

@implementation AppDelegate


- ( BOOL )application:( UIApplication *)application didFinishLaunchingWithOptions:( NSDictionary *)launchOptions {
    // Override point for customization after application launch.
   
    //******* 创建 window 窗口 *********************
    // 拿到屏幕的大小
    CGRect rect = [ UIScreen mainScreen ]. bounds ;
    // 创建一个 window
    self . window = [[ UIWindow alloc ] initWithFrame :rect];
    // 设置窗口颜色
    self . window . backgroundColor = [ UIColor whiteColor ];
    // 把当前的 window 作为程序的主 window 显示出来
    [ self . window makeKeyAndVisible ];
   
    [ self _initTextField ];
   
   
    return YES ;
}
// 文本输入框
- ( void )_initTextField{
    // 如果需要在模拟器中调用电脑的键盘 使用快捷键： command+ shift+ k
    UITextField *textField = [[ UITextField alloc ] initWithFrame : CGRectMake ( 100 , 100 , 200 , 30 )];
    textField. tag = 100 ;
    // 设置输入框的边框样式，默认无边框
    textField. borderStyle = UITextBorderStyleRoundedRect ;
    // 设置输入文字的字体
    textField. font = [ UIFont boldSystemFontOfSize : 19 ];
    // 设置文字的颜色
    textField. textColor = [ UIColor redColor ];
    // 设置或获取当前文本输入框的内容
//    textField.text = @"hhhhhhhhh";
    // 设置文字对齐方式
    textField. textAlignment = NSTextAlignmentCenter ;
    // 设置首字母是否大小写
    textField. autocapitalizationType = UITextAutocapitalizationTypeWords ;
    // 设置自动单词提示
//    textField.autocorrectionType = UITextAutocorrectionTypeNo;
   
    // 输入框为空时的提示文本
    textField. placeholder = @" 请输入登陆邮箱 " ;
   
    // 修改键盘上的 return 按钮上的标题
    textField. returnKeyType = UIReturnKeyGo ;
   
    // 设置输入框是否安全输入
    textField. secureTextEntry = YES ;
   
    // 纯数字键盘
    textField. keyboardType = UIKeyboardTypeNumberPad ;
   
    // 开启清除键盘
    textField. clearButtonMode = UITextFieldViewModeWhileEditing ;
   
//    // 成为第一响应者
//    [textField becomeFirstResponder];
//   
//    // 失去第一响应者
//    [textField resignFirstResponder];
   
    // 设置代理 ---// 要在本文件的延展处加上代理协议： <UITextFieldDelegate>
    textField. delegate = self ;

    [ self . window addSubview :textField];
   
    // 创建一个 Button
    UIButton *button = [ UIButton buttonWithType : UIButtonTypeContactAdd ];
    button. frame = CGRectMake ( 50 , 400 , 100 , 40 );
    [button addTarget : self action : @selector (buttonClick:) forControlEvents : UIControlEventTouchUpInside ];
    [ self . window addSubview :button];
}

- ( void )buttonClick:( UIButton *)button{
    UITextField *textField = ( UITextField *)[ self . window viewWithTag : 100 ];
    // 失去第一响应者
    [textField resignFirstResponder ];
}

#pragma mark -UITextFieldDelegate
// 将要开始编辑
- ( BOOL )textFieldShouldBeginEditing:( UITextField *)textField
{
    NSLog ( @" 将要开始编辑 " );
    // 返回 YES 表示可以继续编辑，返回 NO 是阻止编辑
    return YES ;
}

// 已经开始编辑了
- ( void )textFieldDidBeginEditing:( UITextField *)textField
{
    NSLog ( @" 正在编辑 " );
}


// 已经结束编辑
- ( 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 ;
}

@end

四、UIImageView

// 图片视图（ ImageWiew ）
- ( void )_initImageView{
    // 创建图片对象
    UIImage *img = [ UIImage imageNamed : @"scene1.jpg" ];
   
    // 创建 ImageView
    UIImageView *imgView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 50 , 100 , 275 , 200 )];
    imgView. image = img;
    imgView. backgroundColor = [ UIColor redColor ];
   
//    // 设置 ImageView 高亮状态下的图片
//    imgView.highlightedImage = [UIImage imageNamed:@"scene2.jpg"];
//    imgView.highlighted = YES;
   
    // 设置内容模式
    /*
     三种常用的内容模式：
     UIViewContentModeScaleToFill, // 横向和纵向都拉伸到边框
     UIViewContentModeScaleAspectFit, // 等比例拉伸，当某一方向到头时，则不拉伸
     UIViewContentModeScaleAspectFill, // 等比例拉伸，当某一方向到头时，则继续拉伸到另一方向也到头
     */
    imgView. contentMode = UIViewContentModeScaleAspectFit ;
   
    //imageView 设置动画图片组
    UIImage *img1 = [ UIImage imageNamed : @"scene1.jpg" ];
    UIImage *img2 = [ UIImage imageNamed : @"scene2.jpg" ];
    UIImage *img3 = [ UIImage imageNamed : @"scene3.jpg" ];
    UIImage *img4 = [ UIImage imageNamed : @"scene4.jpg" ];
    UIImage *img5 = [ UIImage imageNamed : @"scene5.jpg" ];
   
    NSArray *images = @[ img1, img2, img3, img4, img5 ] ;
   
    // 设置动画播放的集合
    imgView. animationImages = images;
    // 设置动画播放的时间
    imgView. animationDuration = 5 ;
    // 开始动画
    [imgView startAnimating ];
   
   
    [ self . window addSubview :imgView];
   
    UIButton *btn = [ UIButton buttonWithType : UIButtonTypeContactAdd ];
    btn. frame = CGRectMake ( 0 , 50 , 40 , 40 );
    [btn addTarget : self action : @selector (btnClick:) forControlEvents : UIControlEventTouchUpInside ];
    // 注意： imageView 默认的触摸事件是关闭的
    imgView. userInteractionEnabled = YES ;
   
    [imgView addSubview :btn];
}

- ( void )btnClick:( UIButton *)btn
{
    NSLog ( @"hehehe" );

}

五、UISlider

#pragma mark -UISlider
// 滑块
- ( void )_initSlider{
    //slider 显示的高度是固定的
    UISlider *slider = [[ UISlider alloc ] initWithFrame : CGRectMake ( 30 , 100 , 300 , 20 )];
//    slider.backgroundColor = [UIColor redColor];
   
    // 设置滑块的最大值和最小值 ( 默认范围为： 0~1)
    slider. minimumValue = 0 ;
    slider. maximumValue = 100 ;
   
    // 设置初始值
    slider. value = 50 ;
   
//    // 设置滑动条左边 | 右边的颜色
//    [slider setMinimumTrackTintColor:[UIColor redColor]];
//    [slider setMaximumTrackTintColor:[UIColor purpleColor]];
   
    // 设置滑动条的左右边的图片
    UIImage *image1 = [ UIImage imageNamed : @"com_slider_min_l-Decoded" ];
    UIImage *image2 = [ UIImage imageNamed : @"com_slider_min_r-Decoded" ];

//    // 设置图片的拉伸点
//    // 方法一：（左、高）
//    image1 = [image1 stretchableImageWithLeftCapWidth:5 topCapHeight:0];
//    image2 = [image2 stretchableImageWithLeftCapWidth:5 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 *image3 = [ UIImage imageNamed : @"com_thumb_max_n-Decoded" ];
    UIImage *image4 = [ UIImage imageNamed : @"com_thumb_max_h-Decoded" ];
   
    [slider setThumbImage :image3 forState : UIControlStateNormal ];
    [slider setThumbImage :image4 forState : UIControlStateHighlighted ];

    //设置滑块按钮的颜色----（只有先加载了滑块的图片，才能设置颜色）
    [slider setThumbTintColor:[UIColor redColor ]];

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

- ( void )sliderAction:( UISlider *)slider{
    NSLog ( @"slider value is %.2f" ,slider. value );
}

六、UISwitch

#pragma mark -UISwitch
// 开关
- ( void )_initSwitch{
    UISwitch *switch1 = [[ UISwitch alloc ] initWithFrame : CGRectMake ( 100 , 200 , 20 , 20 )];
   
    // 默认开
    switch1. on = YES ;
   
    // 添加事件
    [switch1 addTarget : self action : @selector (switchAction:) forControlEvents : UIControlEventValueChanged ];
   
   
    [ self . window addSubview :switch1];
}

- ( void )switchAction:( UISwitch *)switch1{
    if (switch1. on ) {
        NSLog ( @" 开启 " );
    } else {
        NSLog ( @" 关闭 " );
    }
}

七、 UIActivityIndicatorView

// 风火轮
- ( void )_initUIActivityIndicatorView{
    UIActivityIndicatorView *activity = [[ UIActivityIndicatorView alloc ] initWithActivityIndicatorStyle : UIActivityIndicatorViewStyleWhiteLarge ];
    activity. frame = CGRectMake ( 100 , 100 , 0 , 0 );
    activity. backgroundColor = [ UIColor redColor ];
    // 开始转动
    [activity startAnimating ];
    // 停止转动并自动隐藏
//    [activity stopAnimating];
   
    [ self . window addSubview :activity];
}

八、UIPageControl

// 页面控制
- ( void )_initUIPageControl{
    UIPageControl *pageControl = [[ UIPageControl alloc ] initWithFrame : CGRectMake ( 0 , 200 , 200 , 40 )];
    // 设置总页数
    pageControl. numberOfPages = 5 ;
    // 设置当前选中的页面的索引
    pageControl. currentPage = 2 ;
   
    // 添加点击事件
    [pageControl addTarget : self action : @selector (pageControlAction:) forControlEvents : UIControlEventValueChanged ];
   
    [ self . window addSubview :pageControl];
}

- ( void )pageControlAction:( UIPageControl *)pageControl{
    NSLog ( @"currentCPage is %ld" ,pageControl. currentPage );
}

九、UIProgressView

// 进度条
- ( void )_initUIProgressView{
    UIProgressView *progressView = [[ UIProgressView alloc ] initWithProgressViewStyle : UIProgressViewStyleDefault ];
    progressView. frame = CGRectMake ( 0 , 300 , 300 , 10 );
    // 设置进度值（默认为 0 ，默认范围： 0~1---CGFloat 型）
//    progressView.progress = 0.3;
    // 设置已加载的进度条颜色
    progressView. progressTintColor = [ UIColor redColor ];
    // 设置未加载的进度条颜色
    progressView. trackTintColor = [ UIColor yellowColor ];
    progressView. tag = 10 ;
   
    [ NSTimer scheduledTimerWithTimeInterval : 0.2
                                     target : self
                                   selector : @selector (timeAction:)
                                   userInfo :progressView
                                    repeats : YES ];
    [ self . window addSubview :progressView];
}
- ( void )timeAction:( NSTimer *)timer{
    // 若没传 userInfo:
//    UIProgressView *pro = (UIProgressView *)[self.window viewWithTag:10];
    // 传了 userInfo:
    UIProgressView *pro = timer. userInfo ;
   
    pro. progress += 0.1 ;
    if (pro. progress >= 1 ) {
        [timer invalidate ];
    }

}

十、UIAlertView

//创建一个视图控制器
    ViewController *VC = [[ViewController alloc] init];
   
    //根视图控制器

    self.window.rootViewController = VC;

//以后的代码可以在ViewController文件中写

//这是为了弹出模态视图可以用

#pragma mark -UIAlertView
- ( void )_initUIAlertView{
    // 先建一个 button ，点击 button ，弹出 UIAlertView
    UIButton *btn = [ UIButton buttonWithType : UIButtonTypeContactAdd ];
    btn. frame = CGRectMake ( 100 , 100 , 50 , 50 );
    [btn addTarget : self action : @selector (showAlertView) forControlEvents : UIControlEventTouchUpInside ];
    [ self . view addSubview :btn];
}

- ( void )showAlertView{
    // 这样设置的 title 的索引：（ 0~3 分别为：取消、确定、 1 、 2 ）
    UIAlertView *alterView = [[ UIAlertView alloc ] initWithTitle : @" 警告 "
                                                        message : @" 密码输入错误 "
                                                       delegate : self
                                              cancelButtonTitle : @" 取消 "
                                              otherButtonTitles : @" 确定 " , @"1" , @"2" , nil ];
   
    // 设置 alertView 的样式
    /*
     typedef NS_ENUM(NSInteger, UIAlertViewStyle) {
     UIAlertViewStyleDefault = 0,
     UIAlertViewStyleSecureTextInput,   // 默认带了一个输入密码用的 textField
     UIAlertViewStylePlainTextInput,    // 默认带了一个明文的 textField
     UIAlertViewStyleLoginAndPasswordInput  // 默认带了两个 textField ，用来输入用户名和密码
     };
     */
    //
   
    alterView. alertViewStyle = UIAlertViewStyleLoginAndPasswordInput ;
    // 显示 alterView
    [alterView show ];
}

#pragma mark -UIAlertViewDelegate
- ( void )alertView:( UIAlertView *)alertView clickedButtonAtIndex:( NSInteger )buttonIndex
{
   
    UITextField *tf1 = [alertView textFieldAtIndex : 0 ];
    UITextField *tf2 = [alertView textFieldAtIndex : 1 ];
   
    NSLog ( @"buttonIndex is %ld" , buttonIndex);
    if (buttonIndex == 0 ) {
        NSLog ( @" 取消 " );
    } else if (buttonIndex == 1 ) {
        NSLog ( @" 确定 " );
        NSLog ( @"tf1 is %@, tf2 is %@" , tf1. text , tf2. text );
    }
}

十一、 UIAlertController

#pragma mark -UIAlertController
- ( void )_initUIAlertController{
    // 先建一个 button ，点击 button ，弹出 UIAlertView
    UIButton *btn = [ UIButton buttonWithType : UIButtonTypeInfoDark ];
    btn. frame = CGRectMake ( 200 , 100 , 50 , 50 );
    [btn addTarget : self action : @selector (showAlertController) forControlEvents : UIControlEventTouchUpInside ];
    [ self . view addSubview :btn];
}

- ( void )showAlertController{
    //UIAlertController代替了AlertView和ActionSheet
    UIAlertController *alertControl = [ UIAlertController alertControllerWithTitle : @" 警告 "
                                                                          message : @" 密码错误 " preferredStyle : UIAlertControllerStyleAlert ];
   

    // 添加一个文本框  

         //注意：只有 UIAlertControllerStyleAlert样式才能添加文本框

    [alertControl addTextFieldWithConfigurationHandler :^( UITextField *textField) {
        // 给 textField 添加自己想要的属性
        textField. secureTextEntry = YES ;
        textField. textAlignment = NSTextAlignmentCenter ;
        textField. placeholder = @" 请输入密码 " ;
        textField. keyboardType = UIKeyboardTypeNumberPad ;
    }];
   
    // 创建一个 action
    UIAlertAction *cancelAction = [ UIAlertAction actionWithTitle : @" 取消 " style : UIAlertActionStyleDestructive handler :^( UIAlertAction *action) {
        // 点击之后需要做哪些事情
        NSLog ( @" 取消 " );
    }];
   
    UIAlertAction *sureAction = [ UIAlertAction actionWithTitle : @" 确定 " style : UIAlertActionStyleDefault handler :^( UIAlertAction *action) {
        // 点击之后需要做哪些事情
       
        UITextField *textField = [[alertControl textFields ] lastObject ];
        NSLog ( @"%@" , textField. text );
    }];
   
    // 添加一个 action
    [alertControl addAction :cancelAction];
    [alertControl addAction :sureAction];
   
    // 弹出一个模态视图
    [ self presentViewController :alertControl animated : true completion : nil ];
}

十二、 UIActionSheet

#pragma mark -UIActionSheet
- ( void )_initActionSheet
{
    UIButton *btn = [ UIButton buttonWithType : UIButtonTypeInfoDark ];
    btn. frame = CGRectMake ( 200 , 100 , 50 , 50 );
    [btn addTarget : self action : @selector (showActionSheet) forControlEvents : UIControlEventTouchUpInside ];
    [ self . view addSubview :btn];
   
}

- ( void )showActionSheet

{

     // 这样设置的 title 的索引：（ 0~3 分别为：确定、 1 、 2 、取消）

    UIActionSheet *actionSheet = [[ UIActionSheet alloc ] initWithTitle : @" 提示 " delegate : self cancelButtonTitle : @" 取消 " destructiveButtonTitle : @" 确定 " otherButtonTitles : @" 按钮 1" , @" 按钮 2" , nil ];
    [actionSheet showInView : self . view ];
}

#pragma mark -UIActionSheetDelegate
- ( void )actionSheet:( UIActionSheet *)actionSheet clickedButtonAtIndex:( NSInteger )buttonIndex
{
    NSLog ( @"buttonIndex is %ld" , buttonIndex);

}

十三、 UISegmentedControl

#pragma mark -UISegmentedControl
// 分段控件
- ( void )_initSegmentControl
{
    // 设置按钮的标题数组
    NSArray *array = [ NSArray arrayWithObjects : @" 选择 " , @" 搜索 " , @" 工具 " , nil ];
    // 创建分段控件
    UISegmentedControl *segmentCtrl = [[ UISegmentedControl alloc ] initWithItems :array];
    segmentCtrl. frame = CGRectMake ( 20 , 30 , 150 , 25 );
    // 设置样式—ios7后弃用
    segmentCtrl. segmentedControlStyle = UISegmentedControlStyleBar ;
    // 设置默认选中按钮
    segmentCtrl. selectedSegmentIndex = 0 ;
    [segmentCtrl addTarget : self action : @selector (segmentAction:)  forControlEvents : UIControlEventValueChanged ];
    [ self . view addSubview :segmentCtrl];

}

- ( void )segmentAction:( UISegmentedControl *)segmentCtrl
{
    NSLog ( @"segmentCtrl.selectedSegmentIndex is %ld" , segmentCtrl. selectedSegmentIndex );

}