UI控件进阶

一.UIButton控件

1.添加UIButton

    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 50, 100, 60)];
    [button setTitle:@"Button1" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
    [self.view addSubview:button];

2.Button响应方法

-(void)button2 {
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 110, 100, 60)];
    [button setTitle:@"Button2" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    //为Button添加响应方法
    //buttonAction: 代表将当前button传递过去，响应方法改为-(void)buttonAction:(UIButton *)bt{}
    [button addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

-(void)buttonAction {
    NSLog(@"我被点击了！");
}

3.UIButton设置背景颜色和背景图片

-(void)button3 {
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 170, 100, 60)];
    [button setTitle:@"Button3" forState:UIControlStateNormal];
    //setTitleColor：字体颜色，默认白色
    [button setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
    //backgroundColor：整个button背景颜色
    button.backgroundColor = [UIColor grayColor];
    //背景图片
    //正常状态显示1.jpg
    [button setBackgroundImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];
    //选中不放时就是高亮，会显示2.jpg
    [button setBackgroundImage:[UIImage imageNamed:@"2.jpg"] forState:UIControlStateHighlighted];
    [self.view addSubview:button];
}

4.Button枚举类型及Button控件参数响应方法关联

//枚举：状态枚举   事件枚举
-(void)button4 {
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 230, 100, 60)];
    [button setTitle:@"Button4" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    //UIControlEventTouchUpInside：点击之后,如果按下不放是不会触发的，按下并松手才算点击
    //UIControlEventTouchDown：按下之后就触发
    [button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

-(void)buttonAction:(UIButton *)bt {
    NSLog(@"我被点击了！");
}

//通过storyboard拖拽的控件
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *myButton;
- (IBAction)myAction:(id)sender;
@end

//谁调用这个方法，当前参数就是谁传递过来的
- (IBAction)myAction:(id)sender {
    UIButton *bt = (UIButton *)sender;
    bt.backgroundColor = [UIColor greenColor];
}

5.UIButton边框及Type类型

//边框
 button.layer.borderColor = [UIColor purpleColor].CGColor;
 button.layer.borderWidth = 2.0;
 //圆角效果
 button.layer.cornerRadius = 10.0;

//Type类型,能够定义的Button类型有以下6种
//UIButtonTypeCustom = 0,        //自定义风格                          
//UIButtonTypeRoundedRect = UIButtonTypeSystem,         //圆角按钮，即标准系统按钮
//UIButtonTypeDetailDisclosure,        //  蓝色小箭头按钮，主要做详细说明用
//UIButtonTypeInfoLight,        //亮色感叹号
//UIButtonTypeInfoDark,        //暗色感叹号
//UIButtonTypeContactAdd,        //加号按钮


-(void)button5 {
   UIButton *button = [UIButton buttonWithType:UIButtonTypeInfoLight];
   button.frame = CGRectMake(50, 290, 100, 60);
   [button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
   [self.view addSubview:button];
}

6.自定义Button

change.jpeg

//
//  MyButton.m
//  HelloUI
//
//  Created by 李姝谊 on 2018/8/10.
//  Copyright © 2018年 李姝谊. All rights reserved.
//

#import "MyButton.h"

@implementation MyButton

-(id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
    //1.边框
        self.layer.borderColor = [UIColor grayColor].CGColor;
        self.layer.borderWidth = 1.0;
        self.layer.cornerRadius = 3.0;
    //2.图片
        self.imageView.contentMode = UIViewContentModeCenter; //!!有的时候这个属性不能起作用,表示图片显示在imageview的正中间，原图大小
        [self setImage:[UIImage imageNamed:@"2.jpeg"] forState:UIControlStateNormal];
        [self setImage:[UIImage imageNamed:@"1.jpeg"] forState:UIControlStateHighlighted];
    //3.文字
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        [self setTitle:@"未选中" forState:UIControlStateNormal];
        [self setTitle:@"选中" forState:UIControlStateHighlighted];
        [self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
        [self setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
         
        
    }
    return self;
}
//传进来的是frame，返回的是image：frame的限制属性
-(CGRect)imageRectForContentRect:(CGRect)contentRect {
    CGFloat w = contentRect.size.height/2;
    CGFloat h = w;
    CGFloat x = 5;
    CGFloat y = (contentRect.size.height - h)/2;
    return CGRectMake(x, y, w, h);
}

-(CGRect)titleRectForContentRect:(CGRect)contentRect {
    CGFloat h = contentRect.size.height/2;
    CGFloat w = contentRect.size.width - h - 5;
    CGFloat x = 5 + h + 2 ;//2是为了留出一点距离
    CGFloat y = (contentRect.size.height - h)/2;
    return CGRectMake(x, y, w, h);
}
@end

//
//  ViewController.m
//  HelloUI
//
//  Created by 李姝谊 on 2018/8/4.
//  Copyright © 2018年 李姝谊. All rights reserved.
//

#import "ViewController.h"
#import "MyButton.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //自定义Button核心思想：image + title
    [self button1];
}

//自定义button
-(void)button1 {
    MyButton *button = [[MyButton alloc]initWithFrame:CGRectMake(50, 400, 100, 50 )];
    
    [self.view addSubview:button];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

---

二.UITextField控件

1.UITextField常见属性

//常见属性
-(void)textfield1 {
    UITextField *textfield = [[UITextField alloc]initWithFrame:CGRectMake(10, 50, 300, 30)];
    textfield.borderStyle = UITextBorderStyleLine;//边框效果 直线
    textfield.textColor = [UIColor redColor];//字体颜色 红色
    textfield.font = [UIFont systemFontOfSize:17.0];//字体大小
    textfield.placeholder = @"Please enter text";//对用户提示，输入文字时这个内容就会消失
    textfield.keyboardType = UIKeyboardTypeDefault;//键盘类型 command+shift+k在模拟器上弹出虚拟键盘
    textfield.returnKeyType = UIReturnKeyDone;//键盘右下角的return按钮就变成了Done按钮
    [self.view addSubview:textfield];
}

2.UITextField其它常用属性

-(void)textfield2 {
    UITextField *textfield = [[UITextField alloc]initWithFrame:CGRectMake(10, 100, 300, 30)];
    textfield.borderStyle = UITextBorderStyleRoundedRect;//圆角边框
    textfield.keyboardType = UIKeyboardTypeDefault;
    textfield.returnKeyType = UIReturnKeyDone;
    textfield.clearButtonMode = UITextFieldViewModeNever;//清除按钮
    textfield.tag = 100;//唯一标识符
    [self.view addSubview:textfield];
}

3.UITextField响应方法

@interface ViewController () 

@end
//响应方法delegate协议实现
-(void)textfield2 {
    UITextField *textfield = [[UITextField alloc]initWithFrame:CGRectMake(10, 100, 300, 30)];
    textfield.borderStyle = UITextBorderStyleRoundedRect;//圆角边框
    textfield.keyboardType = UIKeyboardTypeDefault;
    textfield.returnKeyType = UIReturnKeyDone;
    textfield.clearButtonMode = UITextFieldViewModeNever;//清除按钮
    textfield.tag = 100;//唯一标识符
    
    textfield.delegate = self;
    [self.view addSubview:textfield];
}
//TextField输入完成之后被调用
- (void)textFieldDidEndEditing:(UITextField *)textField {
    NSLog(@"%@",textField.text);
}

//点击键盘上的Done之后被调用
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    NSLog(@"tag = %ld",(long)textField.tag);
    [textField resignFirstResponder];//取消当前键盘输入响应，否则textFieldDidEndEditing方法无法被调用
    return true;
}

4.自定义UITextField

//部分自定义
-(void)textfield3 {
    UITextField *textfield = [[UITextField alloc]initWithFrame:CGRectMake(10, 150, 300, 30)];
    textfield.borderStyle = UITextBorderStyleRoundedRect;
    //效果是左边出现一张图片
    textfield.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.jpg"]];//leftView是个UIView，UIImageView继承自UIView
    textfield.leftViewMode = UITextFieldViewModeAlways;
    
    [self.view addSubview:textfield];
}

效果图

开始全是灰色边框，输入时变为蓝色，输入完成变为绿色，输入后内容仍为空变红色，点击登陆按钮又都变为灰色

//  MyTextField.h
#import 
@interface MyTextField : UITextField

@end

//  MyTextField.m

#import "MyTextField.h"

@implementation MyTextField

-(id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        //初始时将边框设为灰色
        self.layer.borderColor = [UIColor grayColor].CGColor;
        self.layer.borderWidth = 1.0;
        self.layer.cornerRadius = 5.0;
        self.delegate = self;
    }
    return self;
}
//开始编辑时调用
- (void)textFieldDidBeginEditing:(UITextField *)textField {
    //开始编辑时将边框设为蓝色
    textField.layer.borderColor = [UIColor blueColor].CGColor;
}
//编辑结束时调用
- (void)textFieldDidEndEditing:(UITextField *)textField {
    NSString *text = [textField.text stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];//防止有空格，去掉空格
    if ([text isEqualToString:@""] || text == nil) {
        //编辑结束之后仍然为空时，边框变为红色警告
        self.layer.borderColor = [UIColor redColor].CGColor;
    }else{
        //编辑结束之后不为空时，边框变为绿色
    textField.layer.borderColor = [UIColor greenColor].CGColor ;
    }
}
@end

//  ViewController.m

#import "ViewController.h"
#import "MyTextField.h"
@interface ViewController () {
    UITextField *textfield1;
    UITextField *textfield2;
}
- (IBAction)login:(id)sender;

@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    textfield1 = [[MyTextField alloc]initWithFrame: CGRectMake(20, 100, 200, 40)];
    [self.view addSubview:textfield1];
    textfield2 = [[MyTextField alloc]initWithFrame: CGRectMake(20, 150, 200, 40)];
    [self.view addSubview:textfield2];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


- (IBAction)login:(id)sender {
    [textfield1 resignFirstResponder];//取消响应
    [textfield2 resignFirstResponder];
    textfield1.layer.borderColor = [UIColor grayColor].CGColor;
    textfield2.layer.borderColor = [UIColor grayColor].CGColor;
    textfield1.text = @"";
    textfield2.text = @"";
}
@end

---

三.提示框相关控件

1.UIAlertView的基本使用

-(void)alertview1 {
    //1标题     2内容     3委托      4取消按钮     5其他按钮
    UIAlertView *alertview = [[UIAlertView alloc]initWithTitle:@"Alert" message:@"message" delegate:nil  cancelButtonTitle:@"Cancel" otherButtonTitles:@"1",@"2" , nil];
    [alertview show];//alertView不使用addSubview，而是使用show方法
}

2.UIAlertView按钮的区分(使用Delegate)

-(void)alertview2 {
    
    UIAlertView *alertview = [[UIAlertView alloc]initWithTitle:@"Alert" message:@"message" delegate:self   cancelButtonTitle:@"Cancel" otherButtonTitles:@"1",@"2" , nil];
    [alertview show];
}
//如何区分点击的是哪一个按钮
//取消按钮buttonIndex=0，”1“按钮buttonIndex=1，”2“按钮buttonIndex=2
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    NSLog(@"buttonIndex = %ld",(long)buttonIndex);
}

3.UIAlertView作为输入的使用

//如何区分点击的是哪一个按钮
//取消按钮buttonIndex=0，”1“按钮buttonIndex=1，”2“按钮buttonIndex=2
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    NSLog(@"buttonIndex = %ld",(long)buttonIndex);
    if (buttonIndex == 1) {
        //如果点击的是OK按钮，显示textField中的内容
        UITextField *textfield = [alertView textFieldAtIndex:0];
        NSLog(@"%@",textfield.text);
    }
}

//输入
-(void)alertview3 {
    UIAlertView *alertview = [[UIAlertView alloc]initWithTitle:@"Alert" message:@"message" delegate:self cancelButtonTitle:@"Cancel" otherButtonTitles:@"OK", nil];
    //设置为输入类型 + TextField + 键盘类型
    alertview.alertViewStyle = UIAlertViewStylePlainTextInput;
    UITextField *textfield = [alertview textFieldAtIndex:0];
    textfield.keyboardType = UIKeyboardTypeNumberPad;
    [alertview show];
}

4.UIAlertView快速创建登陆界面

//用户名 密码登录界面
-(void)alertview4 {
    
    UIAlertView *alertview = [[UIAlertView alloc]initWithTitle:@"Alert" message:@"message" delegate:self   cancelButtonTitle:@"Cancel" otherButtonTitles:@"OK" , nil];
    alertview.alertViewStyle = UIAlertViewStyleLoginAndPasswordInput;
    [alertview show];
}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    NSLog(@"buttonIndex = %ld",(long)buttonIndex);
    if (buttonIndex == 1) {
        //如果点击的是OK按钮，显示textField中的内容
        UITextField *textfieldName = [alertView textFieldAtIndex:0];
        UITextField *textfieldPassword = [alertView textFieldAtIndex:1];
        NSLog(@"%@ %@",textfieldName.text,textfieldPassword.text);
    }
}

5.自定义AlertView

与之前自定义不同的是这次继承UIView

//  MyViewToAlertView.m

#import "MyViewToAlertView.h"

@implementation MyViewToAlertView

-(id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor grayColor];
        self.alpha = 0.8;
        
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, 50)];
        label.text = @"自定义AlertView";
        label.textAlignment = NSTextAlignmentCenter;
        [self addSubview:label];
        
        UIButton *bt_ok = [[UIButton alloc]initWithFrame:CGRectMake(0, self.frame.size.height - 40, self.frame.size.width/2, 40)];
        bt_ok.tag = 200;
        [bt_ok setTitle:@"ok" forState:UIControlStateNormal];
        bt_ok.layer.borderColor = [UIColor blueColor].CGColor;
        bt_ok.layer.borderWidth = 1.0;
        [bt_ok addTarget:self action:@selector(alertAction:) forControlEvents: UIControlEventTouchUpInside];
        [self addSubview:bt_ok];
        
        UIButton *bt_cancel = [[UIButton alloc]initWithFrame:CGRectMake(self.frame.size.width/2, self.frame.size.height - 40, self.frame.size.width/2, 40)];
        bt_cancel.tag = 201;
        [bt_cancel setTitle:@"cancel" forState:UIControlStateNormal];
        bt_cancel.layer.borderColor = [UIColor blueColor].CGColor;
        bt_cancel.layer.borderWidth = 1.0;
        [bt_cancel addTarget:self action:@selector(alertAction:) forControlEvents: UIControlEventTouchUpInside];
        [self addSubview:bt_cancel];
    }
    return self;
}

-(void)alertAction:(UIButton *)bt {
//1.区分是ok还是cancel按钮 2.隐藏AlertView
    if (bt.tag == 200) {
        NSLog(@"ok");
    }if (bt.tag == 201) {
        NSLog(@"cancel");
    }
    self.alpha = 0;
}
@end

//  ViewController.m

#import "ViewController.h"
#import "MyViewToAlertView.h"
@interface ViewController ()
@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    MyViewToAlertView *myAlertView = [[MyViewToAlertView alloc]initWithFrame:CGRectMake(20, 100, self.view.frame.size.width - 40, 100)];
    [self.view addSubview:myAlertView];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

6.UIActionSheet的基本使用

#pragma mark -- Action Sheet
//UIActionSheet显示在整个视图的最底端
-(void)actionSheet1 {
    //destructiveButtonTitle销毁按钮
    UIActionSheet *actionSheet= [[UIActionSheet alloc]initWithTitle:@"Action" delegate:nil cancelButtonTitle:nil destructiveButtonTitle:@"ok" otherButtonTitles:nil, nil];
    actionSheet.actionSheetStyle = UIActionSheetStyleDefault;
    [actionSheet showInView:self.view];
}

7.UIActionSheet响应顺序

UIActionSheet

#import "ViewController.h"
@interface ViewController ()

@end

-(void)actionSheet2 {
    //cancel -> 最下面一行
    //title标题 -> 最上面一行
    //销毁按钮destructiveButtonTitle -> 上面数第二行红色
    //otherButton -> 上面数第三行开始
    UIActionSheet *actionSheet= [[UIActionSheet alloc]initWithTitle:@"Action" delegate:self cancelButtonTitle:@"cancel" destructiveButtonTitle:@"ok" otherButtonTitles:@"1",@"2", nil];
    actionSheet.actionSheetStyle = UIActionSheetStyleDefault;
    [actionSheet showInView:self.view];
}
//响应顺序 0 -> max 从上到下依次增加
- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {
    NSLog(@"buttonIndex = %ld",(long)buttonIndex);
}

---

四.UI控件补充

1.UISlider的基本使用

-(void)slider1 {
    UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(20, 100, 200, 20)];
    slider.minimumValue = 0.0;
    slider.maximumValue = 100.0;
    slider.value = 50.0;//当前值
    slider.continuous = true;//表明当前slider滑动连续
    [slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:slider];
}

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

2.自定义UISlider

-(void)slider2 {
    UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(20, 150, 200, 20)];
    slider.minimumValue = 0.0;
    slider.maximumValue = 100.0;
    slider.value = 50.0;//当前值
    slider.continuous = true;//表明当前slider滑动连续
    [slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpInside];
    UIImage *imageLeft = [UIImage imageNamed:@"1.png"];
    UIImage *imageRight = [UIImage imageNamed:@"2.png"];
    UIImage *imageCenter = [UIImage imageNamed:@"3.png"];
    //图片拉伸
    //左边10个像素，上边0个像素不拉伸，其余可拉伸
    UIImage *imageLeftTrack = [imageLeft stretchableImageWithLeftCapWidth:10 topCapHeight:0];
    UIImage *imageRightTrack = [imageRight stretchableImageWithLeftCapWidth:10 topCapHeight:0];
    //设定三张图片
    [slider setMinimumTrackImage:imageLeftTrack  forState:UIControlStateNormal];
    [slider setMaximumTrackImage:imageRightTrack  forState:UIControlStateNormal];
    //中间圆钮上的图片
    [slider setThumbImage:imageCenter forState:UIControlStateNormal];
    [self.view addSubview:slider];
}
-(void)sliderAction:(UISlider *)slider {
    NSLog(@"%f",slider.value);
}

3.UISwitch的基本使用

#pragma mark -- UISwitch
//开关
-(void)switch1 {
    UISwitch *myswitch = [[UISwitch alloc]initWithFrame:CGRectMake(20, 200, 50, 25)];
    [myswitch addTarget:self action:@selector(switchAction:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:myswitch];
}

-(void)switchAction:(UISwitch *)sender {
    NSLog(@"%d",[sender isOn]);
    //1表示开关打开   0表示开关关闭
}

4.UIDatePicker的基本使用

#pragma mark -- UIDatePicker
-(void)datePicker1 {
    UIDatePicker *datePicker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0, 160, 320, 100)];
    datePicker.datePickerMode =  UIDatePickerModeDate;//年 月 日
    [datePicker addTarget:self action:@selector(pickerAction:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:datePicker];
}

-(void)pickerAction:(UIDatePicker *)picker {
    NSLog(@"%@",[picker date]);
}

日期格式的改变

-(void)pickerAction:(UIDatePicker *)picker {
    
    NSDateFormatter *format= [[NSDateFormatter alloc]init];
    format.dateFormat = @"yyyy--MM--dd HH:mm:ss";
    //时间 -> format -> str
    NSString *str = [format stringFromDate:[picker date]];
    NSLog(@"%@",str);
}

NSDate

//1 NSDate的声明、初始化
NSDate *date = [NSDate date];
//2 下面两个常用的方法
 date = [NSDate dateWithTimeIntervalSinceNow:10];//返回当前时间10秒后的时间  
 date = [NSDate dateWithTimeIntervalSince1970:10];//返回1970-1-1 00:00:00时间10秒后的时间