IOS开发常用控件

登录界面的实现

功能：在storyboard上创建UILabel,UITextField,UIButton，实现一个简单的登录界面。然后把组件和代码中的成员变量联系起来，再把按钮和监听方法联系起来。实现点击按钮输出账号和密码的信息。
代码如下：
.h文件：

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (strong , nonatomic) IBOutlet UITextField *nameField;
@property (strong , nonatomic) IBOutlet UITextField *passField;
-(IBAction)buttonAction : (id)sender;
@end

.m文件：

#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
}
-(void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}
-(void)buttonAction:(id)sender
{
    NSString *name = [self.nameField text];
    NSString *password = [self.passField text];
    NSLog(@"输入的账号是：%@，输入的密码是：%@",name,password);
}
@end

效果：

输出：
输入的账号是：mayifan ，输入的密码是：123

UINavigationItem和UITextView （文本视图的使用以及虚拟键盘的关闭效果）

功能：使用到的基本组件是导航栏和文本视图，点击文本视图，获取光标，弹出键盘，输入一些内容，然后点击done，关闭键盘，文本视图也失去焦点。
代码实现：
.h文件：

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UITextViewDelegate>
@property (strong , nonatomic) UITextView *textView;
@end

.m文件：

#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
{
    UIBarButtonItem *_done;
    UINavigationItem *_navItem;
}
- (void)viewDidLoad
{
    [super viewDidLoad];
    UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, 44)];
    [self.view addSubview:navBar];
    UITextView *textView= [[UITextView alloc] initWithFrame:CGRectMake(0, 65, [UIScreen mainScreen].bounds.size.width, 40)];
    textView.backgroundColor = [UIColor whiteColor];
    textView.font = [UIFont boldSystemFontOfSize:20.0];
    textView.textAlignment = NSTextAlignmentCenter;
    textView.textColor = [UIColor redColor];
    textView.editable = YES;
    textView.userInteractionEnabled = YES;//允许和用户交互
    textView.delegate = self;//把控制器作为它的代理
    self.textView = textView;
    [self.view addSubview:self.textView];
    _navItem = [[UINavigationItem alloc] initWithTitle:@"导航条"];
    navBar.items = @[_navItem];//把导航条添加到bar上
    _done = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(finishEdit)];//加监听
}
-(void) textViewDidBeginEditing:(UITextView *)textView
{
    _navItem.rightBarButtonItem = _done;//显示done
}
-(void) textViewDidEndEditing:(UITextView *)textView
{
    _navItem.rightBarButtonItem = nil;//使done消失
}
-(void) finishEdit
{
    NSLog(@"关闭虚拟键盘。。。。。。。");
    [self.textView resignFirstResponder];//失去响应，主要用来关闭键盘
}
@end

示意图：

当我们把输入的字数增加并且增大文本视图的尺寸，再来看一下效果。

和文本框的区别： 文本视图更加适合于文本内容比较多的情况，文本视图方便用户修改和编辑。
虚拟键盘的关闭： resignFirstResponder语句使得文本视图失去响应，虚拟键盘会消失。当用户重新点击文本视图的时候，即达到可编辑状态，虚拟键盘会再次出现。

大小自适应的label

label的大小可以根据其中的内容自行调整。其基本参数配置如下：

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 200, [UIScreen mainScreen].bounds.size.width, 50)];
    label.text = @"111111111111111111111";
    label.font = [UIFont fontWithName:@"Arial" size:35];
    label.textColor = [UIColor blueColor];
    label.textAlignment = UITextAlignmentCenter;
    label.backgroundColor = [UIColor whiteColor];
    label.lineBreakMode = UILineBreakModeWordWrap;//设置单词折行方式
    label.numberOfLines = 0;//设置label能否显示多行，0则显示多行
    //大小自适应代码
    CGSize size= [label.text sizeWithFont:label.font constrainedToSize:self.view.bounds.size lineBreakMode:label.lineBreakMode];//label尺寸
    CGRect rect = label.frame;//label位置尺寸
    rect.size.height = size.height;//label的高度适应于文字内容
    label.frame = rect;//赋值
    [self.view addSubview:label];

关键是这段代码，它实现了label的动态变化高度。为什么呢？size获取了label的大小，然后取出label的frame（位置和大小）至rect（位置和大小），设置它的高度与size的高度一致，然后把它赋回给label的frame。这样label的高度就是一个变量了。

    CGSize size= [label.text sizeWithFont:label.font constrainedToSize:self.view.bounds.size lineBreakMode:label.lineBreakMode];//label尺寸
    CGRect rect = label.frame;//label位置尺寸
    rect.size.height = size.height;//label的高度适应于文字内容
    label.frame = rect;//赋值

不同输入下的效果：

实现带刻度的滑动条

功能：滑动条的刻度为1～10，在移动滑动条的时候，上方会有一个标签，标签的内容显示当前滑动条的值，标签会随滑动条一起运动。
代码实现：
.h文件：

#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface BottomSliderView : UIView
@end
NS_ASSUME_NONNULL_END

.m文件：

#import "BottomSliderView.h"
@interface BottomSliderView()
@property (nonatomic , strong) UISlider *slider;
@property (nonatomic , strong) UILabel *label;
@end
@implementation BottomSliderView

-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self){
        [self construtUI:frame];
    }
    return self;
}
-(void)construtUI:(CGRect)frame
{
    self.label = [[UILabel alloc] initWithFrame:CGRectMake(15, 100, 40, 20)];
    self.label.backgroundColor = [UIColor blackColor];
    self.label.textColor = [UIColor whiteColor];
    self.label.font = [UIFont boldSystemFontOfSize:13];
    self.label.textAlignment = NSTextAlignmentCenter;
    self.label.adjustsFontSizeToFitWidth = YES;
    self.label.alpha = 0;
    self.label.opaque = NO;//不透明
    [self addSubview:self.label];
        
    self.slider = [[UISlider alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(self.label.frame)+10, frame.size.width-40,20)];//滑条在标签下方
    self.slider.minimumValue = 1;
    self.slider.maximumValue = 20;
    self.backgroundColor = [UIColor clearColor];
    [self.slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];//加监听
    [self addSubview:self.slider];//显示
}
- (void)sliderValueChanged:(UISlider *)sender
{
    self.slider.value = sender.value;
    if(self.slider.value >= 1){
        self.label.alpha = 1;//修改透明度
        self.label.text = [NSString stringWithFormat:@"%.f",sender.value];
        [self updatePopoverFrame];//更新label位置
    }
}
- (void)updatePopoverFrame
{
    CGFloat min = self.slider.minimumValue;
    CGFloat max = self.slider.maximumValue;
    CGFloat value = self.slider.value;
    //若min小于零，则修正
    if(min < 0.0){
        value = self.slider.value - min;
        max = max - min;
        min = 0.0;
    }
    CGFloat x = 20;
    CGFloat maxMin = (max + min) / 2.0;
    x += (((value - min)/(max - min)) * (self.frame.size.width - 20)) - (self.label.frame.size.width /2.0);
    if(value > maxMin){
        value = (value - maxMin) + (min * 1);
        value = value/maxMin;
        value = value * 11.0;
        x = x - value;
    }else{
        value = (maxMin - value) + (min * 1);
        value = value/maxMin;
        value = value * 11.0;
        x = x + value;
    }
    CGRect popoverRect = self.label.frame;//取出label的位置参数
    popoverRect.origin.x = x;//修改x值
    popoverRect.origin.y = self.label.frame.origin.y;//y不变
    self.label.frame = popoverRect;//设置
}
@end

效果：

UIStepper的使用

效果：点击加号或者减号，标签上的数字递增或者递减。
代码实现（部分代码）：

    UIStepper *stepper = [[UIStepper alloc] init];
    stepper.minimumValue = 0;
    stepper.maximumValue = 20;
    stepper.stepValue = 1;//步进
    stepper.center = CGPointMake(100, 100);
    [stepper addTarget:self action:@selector(changeValue:) forControlEvents:UIControlEventValueChanged];
    self.stepper = stepper;
    [self.view addSubview:stepper];
    
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(stepper.frame.origin.x+20, stepper.frame.origin.y-30, 50, 25)];
    label.backgroundColor = [UIColor yellowColor];
    label.textColor = [UIColor blackColor];
    label.adjustsFontSizeToFitWidth = YES;
    label.textAlignment = UITextAlignmentCenter;
    label.text = @"0";
    self.label = label;
    [self.view addSubview:label];

//监听方法，用于修改标签值
- (void)changeValue:(UIStepper *)sender
{
    self.label.text = [NSString stringWithFormat:@"%d",(int)sender.value];
}

UISwitch的使用

效果：可以切换开关状态，切换开关状态会有提示，且按钮颜色会改变。
代码实现（关键代码）：

    self.view.backgroundColor = [UIColor whiteColor];
    UINavigationBar *nav = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, 44)];//设置导航栏尺寸
    nav.barTintColor = [UIColor blueColor];//设置导航栏颜色
    UINavigationItem *item = [[UINavigationItem alloc] init];//设置导航栏条目
    item.title = @"UISwitch的使用";
    nav.items = @[item];//在导航栏中添加item
    [self.view addSubview:nav];//显示导航栏
    UISwitch *mySwitch = [[UISwitch alloc] initWithFrame:CGRectMake(180, 100, 300, 50)];
    mySwitch.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:mySwitch];
    mySwitch.onTintColor = [UIColor yellowColor];//开关打开时的颜色
    mySwitch.tintColor = [UIColor redColor];//开关关闭时的颜色
    mySwitch.thumbTintColor = [UIColor purpleColor];//按钮的颜色
    [mySwitch setOn:YES animated:YES];//默认打卡且需要动画
    if(mySwitch.isOn){
        NSLog(@"打开状态");
    }else{
        NSLog(@"关闭状态");
    }
    [mySwitch addTarget:self action:@selector(switchChange:) forControlEvents:UIControlEventValueChanged];//加监听

监听方法：

- (void)switchChange:(UISwitch *)sender
{
    UISwitch *mySwitch = (UISwitch *)sender;
    if(mySwitch.isOn){
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"开关打开!" message:nil preferredStyle:UIAlertControllerStyleAlert];//警示控制器
        [self presentViewController:alert animated:YES completion:nil];//应用该控制器并需要动画效果
        [self performSelector:@selector(dismiss:) withObject:alert afterDelay:2.0];//延时2秒执行sel方法
    }else{
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"开关关闭!" message:nil preferredStyle:UIAlertControllerStyleAlert];
        [self presentViewController:alert animated:YES completion:nil];
        [self performSelector:@selector(dismiss:) withObject:alert afterDelay:2.0];
    }
}
- (void)dismiss:(UIAlertController *)alert
{
    [alert dismissViewControllerAnimated:YES completion:nil];//解除控制器
}

这段代码中比较有意思的是以下这个部分，它是ISO9之后普遍使用的API，先实例化警示控制器，然后可以再创建若干action来实现一些功能跳转之类的操作。这里我一开始使用的时候发现它打开后就没有退出了，因为没有取消之类的选择。于是可以使用下面的这行代码实现延时退出（延时执行某方法）。

        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"开关打开!" message:nil preferredStyle:UIAlertControllerStyleAlert];//警示控制器
        [self presentViewController:alert animated:YES completion:nil];//应用该控制器并需要动画效果
        [self performSelector:@selector(dismiss:) withObject:alert afterDelay:2.0];//延时2秒执行sel方法

效果截图：

分段控件

效果：实现一个分段的按钮效果，可以分别响应事件。这个分段控件放在导航栏中。
代码实现：

- (void)viewDidLoad
{
    [super viewDidLoad];
    UINavigationBar *nav = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, 44)];//设置导航栏尺寸
    nav.barTintColor = [UIColor blueColor];//设置导航栏颜色
    UINavigationItem *item = [[UINavigationItem alloc] init];//设置导航栏条目
    item.title = @"UISwitch的使用";
    nav.items = @[item];//在导航栏中添加item
    [self.view addSubview:nav];//显示导航栏
    UISegmentedControl *mySegmentControl = [[UISegmentedControl alloc] initWithItems:nil];
    mySegmentControl.segmentedControlStyle = UISegmentedControlStyleBezeled;
    UIColor *myTint = [[UIColor alloc] initWithRed:0.66 green:1.0 blue:0.77 alpha:1.0];//配置颜色
    mySegmentControl.tintColor = myTint;
    mySegmentControl.momentary = YES;
    [mySegmentControl insertSegmentWithTitle:@"First" atIndex:0 animated:YES];//设置小标题和位置，以及动画
    [mySegmentControl insertSegmentWithTitle:@"Second" atIndex:1 animated:YES];
    [mySegmentControl insertSegmentWithTitle:@"Third" atIndex:2 animated:YES];    
  //[mySegmentControl setTitle:@"Zero" forSegmentAtIndex:0];//设置总标题
  //NSString *myTitle = [mySegmentControl titleForSegmentAtIndex:0];
  //NSLog(@"myTitle:%@",myTitle);    
    [mySegmentControl setWidth:100 forSegmentAtIndex:0];//设置宽度
    [mySegmentControl addTarget:self action:@selector(selected:) forControlEvents:UIControlEventValueChanged];//监听
    item.titleView = mySegmentControl;//添加到导航栏
}
- (void) selected:(id)sender
{
    UISegmentedControl *mySegmentControl = (UISegmentedControl *)sender;//取出
    switch(mySegmentControl.selectedSegmentIndex) {
        case 0:
            NSLog(@"0");
            break;
        case 1:
            NSLog(@"1");
            break;
        case 2:
            NSLog(@"2");
            break;
        default:
            break;
    }
}

效果截图：