【IOS 开发】基本 UI 控件详解 (UIDatePicker | UIPickerView | UIStepper | UIWebView | UIToolBar )

时间：2015-12-30 11:37:01 阅读：528 评论：0 收藏：0 [点我收藏+]

标签：

转载注明出处 : http://blog.csdn.net/shulianghan/article/details/50348982

一. 日期选择器 (UIDatePicker)

UIDatePicker 属性截图 :

技术分享

1. UIDatePicker 控件属性

(1) Mode 属性

Mode 属性 : 用于设置 UIDatePicker 模式;

-- Date 属性值 : 显示日期, 不显示时间;

-- Time 属性值 : 显示时间, 不显示日期;

-- Date and Time 属性值 : 同时显示日期和时间;

-- Count Down Timer 属性值 : 显示倒计时器;

(2) Local 属性

Local 属性值 : 国际化设置相关属性, 通常使用默认的设置即可;

(3) Interval 属性

Interval 属性值 : 设置两个时间选项的时间间隔, 仅当采用 Time, Date and Time, Count Down Timer 三个属性时有效;

(4) Constraints 属性

Constraints 属性 : 设置控件的最小时间和最大时间;

(5) Timer 属性

Timer 属性 : 设置倒计时的计时秒数, 只有采用 Count Down Timer 模式时有效;

2. UIDatePicker 日期选择器示例代码

代码示例 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  UIDatePicker
//
//  Created by octopus on 15-12-19.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIDatePicker *datePicker;
- (IBAction)click:(id)sender;

@end

-- OCViewController.m :

//
//  OCViewController.m
//  UIDatePicker
//
//  Created by octopus on 15-12-19.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

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

- (IBAction)click:(id)sender {
    //从 UIdatePicker 中获取事件
    NSDate * date = [self.datePicker date];
    //创建 Date 格式化工具
    NSDateFormatter * formatter = [[NSDateFormatter alloc] init];
    //格式日期格式化格式
    [formatter setDateFormat:@"yyyy-MM-dd HH:mm"];
    //将日期转为格式化好的字符串
    NSString * dateString = [formatter stringFromDate:date];
    //创建 警告对话框
    NSString * message = [NSString stringWithFormat:@"UIDatePicker 被选中的时间是 %@", dateString];
    UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"时间选择" message:message delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    //显示警告对话框
    [alertView show];
}
@end

-- 界面运行效果 :

技术分享

3. UIDatePicker 计时器示例代码

计时器示例代码 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  UIDatePicker
//
//  Created by octopus on 15-12-19.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController
//日期选择器
@property (strong, nonatomic) IBOutlet UIDatePicker *datePicker;
//计时器
@property (strong, nonatomic) IBOutlet UIDatePicker *countDown;
//计时器按钮控件
@property (strong, nonatomic) IBOutlet UIButton *countDownBt;
//日期选择器下的按钮方法
- (IBAction)click:(id)sender;
//计时器下的按钮方法
- (IBAction)clickCountDown:(id)sender;

@end

-- OCViewController.m :

//
//  OCViewController.m
//  UIDatePicker
//
//  Created by octopus on 15-12-19.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

NSTimer * timer;
NSInteger second;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //设置 UIDatePicker 模式为 计时器模式
    self.countDown.datePickerMode = UIDatePickerModeCountDownTimer;
}

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

- (IBAction)click:(id)sender {
    //从 UIdatePicker 中获取事件
    NSDate * date = [self.datePicker date];
    //创建 Date 格式化工具
    NSDateFormatter * formatter = [[NSDateFormatter alloc] init];
    //格式日期格式化格式
    [formatter setDateFormat:@"yyyy-MM-dd HH:mm"];
    //将日期转为格式化好的字符串
    NSString * dateString = [formatter stringFromDate:date];
    //创建 警告对话框
    NSString * message = [NSString stringWithFormat:@"UIDatePicker 被选中的时间是 %@", dateString];
    UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"时间选择" message:message delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    //显示警告对话框
    [alertView show];
}

- (IBAction)clickCountDown:(id)sender {
    NSLog(@"点击了 clickCountDown");
    //获取倒计时剩余时间
    second = self.countDown.countDownDuration;
    //设置 UIDatePicker 和 倒计时按钮 禁用状态
    self.countDown.enabled = NO;
    [sender setEnabled:NO];
    //生成当前秒数 字符串
    NSString * message = [NSString stringWithFormat:@"倒计时 剩余 %d", second];
    //创建警告框
    UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"倒计时" message:message delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    //显示警告框
    [alert show];
    //启动定时器, 每隔 1 秒调用一次
    timer = [NSTimer scheduledTimerWithTimeInterval:60 target:self selector:@selector(tick) userInfo:nil repeats:YES];
}

-(void) tick{
    //秒数 减去 60
    second = second - 60;
    //将自减后的秒数设置给 UIDatePicker
    self.countDown.countDownDuration = second;
    //如果倒计时完毕, 控件 恢复正常
    if(second <= 0){
        [timer invalidate];
        self.countDown.enabled = YES;
        self.countDownBt.enabled = YES;
    }
}
@end

-- 界面运行展示 :

技术分享

二. 选择器 (UIPickerView)

1. UIPickerView 简介

(1) UIPickerView 继承结构

UIPickerView 继承结构 :

-- 父类 : 继承 UIView, 不继承 UIControl;

-- 处理方法 : 该类不能绑定 IBAction 处理方法, 其事件处理只能交给对应的委托对象的委托方法完成;

(2) UIPickerView 属性

UIPickerView 属性 :

技术分享

-- Shows Selection Indicator 属性 : 是否高亮显示选中的选项;

(3) UIPickerView 行列属性读取方法

UIPickerView 行列属性读取方法 :

-- "numberOfComponents" 方法 : 获取 UIPickerView 中的可选的列表的选项个数;

-- "numberOfRowsInComponent" 方法 : 获取列数;

-- "rowSizeForComputer" 方法 : 获取指定列的选项个数, 返回值是 CGSize 类型;

-- "selectRow : inComponent : animated" 方法 : 选中某一列的某个选项, 并设置是否使用动画;

-- "viewForRow : forComponent" 方法 : 返回指定选项使用的控件;

(4) UIPickerViewDataSource 数据管理

UIPickerViewDataSource 数据设置方法 :

-- 设置数据 : UIPickerView 对象可以设置一个 UIPickerViewDataSource 对象, 用于数据管理;

-- "numberOfComponentsInPickerView" 方法 : 判断包含多少列;

-- "pickerView : numberOfRowsInComponent : " 方法 : 指定某一列应该包含多少个选项;

(5) UIPickerViewDelegate 管理外观和响应

UIPickerViewDelegate 简介 :

-- CGFloat 类型 : 32 位机器上是 float 类型, 64 位机器上是 double 类型;

typedef float CGFloat;// 32-bit
typedef double CGFloat;// 64-bit

struct CGPoint {
    CGFloat x;
    CGFloat y;
};

-- 主要作用 : 为 UIPickerView 设置 UIPickerViewDelegate 委托对象, 用于管理 UIPickerView 外观, 用于响应 UIPickerView 的选中事件;

-- "pickerView : rowHeightForComponent" 方法 : 返回 UIPickerView 指定选项的高度, 类型 CGFloat;

-- "pickerView : widthForComponent" 方法 : 返回 UIPickerView 指定选项的宽度, 类型 CGFloat;

-- "pickerView : tittleForRow : forComponent" 方法 : 返回指定列, 指定选项的标题, 类型 NSString;

-- "pickerView : viewForRow : forComponent : reusingView" 方法 : 返回 UIView 控件, 该控件是指定列的指定选项控件;

-- "pickerView : didSelectRow : inComponent" 方法 : 选定 UIPickerView 指定列的指定列表项会回调该方法;

2. 单行选择器示例

(1) 相关 API 简介

相关 API 简介 :

-- 为 UIPickerView 设置数据和操作委托 :

    //为 UIPickerView 设置 UIPickerViewDataSource 委托
    self.pickerView.dataSource = self;
    
    //为 UIPickerView 设置 UIPickerViewDelegate 委托
    self.pickerView.delegate = self;

-- 设置 UIPickerView 列数 : 该方法是 UIPickerViewDataSource 委托方法;

//UIPickerViewDataSource 委托中定义的方法, 返回 UIPickerView 包含多少列
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}

-- 设置 UIPickerView 某列对应选项个数 : 该方法是 UIPickerViewDataSource 委托方法;

//UIPickerViewDataSource 委托方法, 获取指定列 有多少个选项数据
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    /*
        component 是列的索引
     */
    return array.count;
}

-- 设置 UIPickerView 选项返回的字符串值 : 该方法是 UIPickerViewDelegate 委托方法;

/*
    UIPickerViewDelegate 委托方法, 该方法返回指定列的 指定 选项 的值
    row 参数 : 行 索引
    component 参数 : 列 索引, 由于 只有一列, 因此我们不必关系 该索引, 只需要关心 行 索引即可
 */
- (NSString *) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return [array objectAtIndex:row];
}

-- 设置 UIPickerView 选中选项方法 : 该方法是 UIPickerViewDelegate 委托方法;

/*
    UIPickerViewDelegate 委托方法, 当选中某个选项时 激发的方法
    row 参数 : 选中选项所在的列的索引
    component 参数 : 选中选项所在的行的索引
 */
- (void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    // 生成对话框, 在对话框中显示选中的内容
    UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"UIPickerView 提示" message:[NSString stringWithFormat : @"UIPickerView 选中选项是 : %@", [array objectAtIndex : row]] delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    //显示对话框
    [alert show];
}

(2) 单行选择器代码示例

单行选择器代码示例 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  UIPickerView
//
//  Created by octopus on 15-12-21.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>

// UIPIckerView 的 IBOutlet 引用
@property (strong, nonatomic) IBOutlet UIPickerView *pickerView;

@end

-- OCViewController.m :

//
//  OCViewController.m
//  UIPickerView
//
//  Created by octopus on 15-12-21.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

NSArray * array;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //创建 UIPickerView 列表中显示的字符串集合
    array = [NSArray arrayWithObjects:@"知春路", @"五道口", @"上地", @"西二旗", @"龙泽", @"回龙观", nil];
    
    //为 UIPickerView 设置 UIPickerViewDataSource 委托
    self.pickerView.dataSource = self;
    
    //为 UIPickerView 设置 UIPickerViewDelegate 委托
    self.pickerView.delegate = self;

}

//UIPickerViewDataSource 委托中定义的方法, 返回 UIPickerView 包含多少列
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}

//UIPickerViewDataSource 委托方法, 获取指定列 有多少个选项数据
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    /*
        component 是列的索引
     */
    return array.count;
}

/*
    UIPickerViewDelegate 委托方法, 该方法返回指定列的 指定 选项 的值
    row 参数 : 行 索引
    component 参数 : 列 索引, 由于 只有一列, 因此我们不必关系 该索引, 只需要关心 行 索引即可
 */
- (NSString *) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return [array objectAtIndex:row];
}

/*
    UIPickerViewDelegate 委托方法, 当选中某个选项时 激发的方法
    row 参数 : 选中选项所在的列的索引
    component 参数 : 选中选项所在的行的索引
 */
- (void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    // 生成对话框, 在对话框中显示选中的内容
    UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"UIPickerView 提示" message:[NSString stringWithFormat : @"UIPickerView 选中选项是 : %@", [array objectAtIndex : row]] delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    //显示对话框
    [alert show];
}

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

- (void) valueChange{
}

@end

-- 运行效果展示 :

技术分享

3. 多行列表选择器示例代码

(1) 示例代码

多行列表选择示例代码 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  MultiUIPickerView
//
//  Created by octopus on 15-12-23.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

/*
    实现 UIPickerViewDelegate 和 UIPickerViewDataSource 两个协议
 */
@interface OCViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource>
@property (strong, nonatomic) IBOutlet UIPickerView *pickerView;

@end

-- OCViewController.m :

//
//  OCViewController.m
//  MultiUIPickerView
//
//  Created by octopus on 15-12-23.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

//用于存储数据源
NSArray * line13;
NSArray * line1;

//分别存储当前数据源中的索引
NSInteger line1_row;
NSInteger line13_row;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    line13 = [NSArray arrayWithObjects:@"西直门", @"大钟寺", @"知春路", @"五道口", @"上地", @"西二旗", nil];
    line1 = [NSArray arrayWithObjects:@"八宝山", @"五棵松", @"八角游乐园", @"苹果园", @"万寿路", @"公主坟", nil];
    
    self.pickerView.dataSource = self;
    self.pickerView.delegate = self;
}

//UIPickerViewDataSource 委托方法, 设定 UIPickerView 列数
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 2;
}

//UIPickerViewDataSource 委托方法, 设置每一列的选项个数
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    NSInteger count;
    
    switch (component) {
        case 0:
            count = line13.count;
            break;
        case 1:
            count = line1.count;
            break;
        default:
            count = 0;
            break;
    }
    
    return count;
}

//UIPickerViewDelegate 委托方法, 设置每个选项的显示的字符串标题
- (NSString *) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    NSString * tittle;
    switch (component) {
        case 0:
            tittle = [line13 objectAtIndex:row];
            break;
        case 1:
            tittle = [line1 objectAtIndex:row];
            break;
        default:
            tittle = nil;
            break;
    }
    
    return tittle;
}

//UIPickerViewDelegate 委托方法, 设置选中回调方法
-(void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    
    //设置当前获取的 行列 值, 并存储到类变量中
    if(component == 0){
        line13_row = row;
    }else if(component == 1){
        line1_row = row;
    }
    
    //生成对话框中显示的字符串
    NSString * message = [NSString stringWithFormat:@"选中内容 一号线 %@, 十三号线 %@", [line1 objectAtIndex:line1_row], [line13 objectAtIndex:line13_row]];
    
    //生成
    UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"UIPickerView 多行选择" message:message delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    
    [alertView show];
}

//指定 UIPickerView 的选项宽度
- (CGFloat) pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    CGFloat width;
    switch (component) {
        case 0:
            width = 100;
            break;
        case 1:
            width = 150;
            break;
            
        default:
            break;
    }
    
    return width;
}




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

@end

-- 运行效果 :

技术分享

4. 相关联的多行列表选择器示例代码

(1) 相关 API 简介

相关 API 简介 :

-- 实现 UIPickerView 委托协议 :

@interface OCViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>

-- 设置 UIPickerView 委托 :

    //设置委托
    self.pickerView.dataSource = self;
    self.pickerView.delegate = self;

-- UIPickerView 重新加载某一列 :

        //重新加载 第二列
        [self.pickerView reloadComponent:1];

-- UIPickerView 设置默认选项 :

        //设置第二列的默认选中, 一旦切换键值, 第二列默认选中 第一个选项
        [self.pickerView selectRow:0 inComponent:1 animated:YES];

转载注明出处 : http://blog.csdn.net/shulianghan/article/details/50348982

(2) 关联多项 UIPickerView 示例代码

示例代码 :

-- 解析 : 在 API 内部是没有定义关联逻辑的, 关联逻辑是开发者自己使用逻辑实现的, 与上面的示例代码没有本质区别, 使用的还是相同的一套 API;

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  CertainMultiPickerView
//
//  Created by octopus on 15-12-23.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>
@property (strong, nonatomic) IBOutlet UIPickerView *pickerView;
@end

-- OCViewController.m :

//
//  OCViewController.m
//  CertainMultiPickerView
//
//  Created by octopus on 15-12-23.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

NSDictionary * dictionary;
NSArray * rails;
NSInteger selectedRail;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //数据源
    dictionary = [NSDictionary dictionaryWithObjectsAndKeys:[NSArray arrayWithObjects:@"知春路", @"五道口", @"西二旗", @"龙泽", nil], @"十三号线", [NSArray arrayWithObjects : @"五棵松", @"八宝山",@"八角游乐园", @"苹果园", nil], @"一号线" , nil];
    
    //获取键值集合
    rails = [dictionary allKeys];
    
    //当前显示的键值
    selectedRail = 0;
    
    //设置委托
    self.pickerView.dataSource = self;
    self.pickerView.delegate = self;
    
    
}

//UIPickerViewDataSource 委托方法, 设定 UIPickerView 每列的行数
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    //第一列 键值 就2个
    if(component == 0)
        return rails.count;
    //第二列 根据 键值的当前选中的键值  确定对应的集合, 然后返回该对应集合的个数
    return [[dictionary objectForKey:[rails objectAtIndex:selectedRail]] count];
}

//UIPickerViewDataSource 委托方法, 设定 UIPickerView 的列数
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 2;
}

//UIPickerViewDelegate 委托方法, UIPickerView 指定列表选项上显示标题
- (NSString *) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    if(component == 0){
        return [rails objectAtIndex:row];
    }
    return [[dictionary objectForKey:[rails objectAtIndex:selectedRail]] objectAtIndex:row];
}

- (void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    //UIAlertView 显示的信息
    NSString * message;
    
    if(component == 0){
        /*
            选中的 键 这一列
         */
        //将当前选中的列 设置到类变量中
        selectedRail = row;
        //重新加载 第二列
        [self.pickerView reloadComponent:1];
        
        //设置第二列的默认选中, 一旦切换键值, 第二列默认选中 第一个选项
        [self.pickerView selectRow:0 inComponent:1 animated:YES];
        
        //第一项 即 键值, 第二项 根据字典中的键值 选择 对应集合中的第一个元素
        message = [NSString stringWithFormat:@"第一列选项 : %@, 第二列选项 : %@", [rails objectAtIndex:selectedRail], [[dictionary objectForKey:[rails objectAtIndex:selectedRail]] objectAtIndex:0]];
    }else if (component == 1){
        /*
            选中的 值 这一列
         */
        message = [NSString stringWithFormat:@"第一列选项 : %@, 第二列选项 : %@", [rails objectAtIndex:selectedRail], [[dictionary objectForKey:[rails objectAtIndex:selectedRail]] objectAtIndex:row]];
    }
    
    /*
        创建并显示对话框
     */
    UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"选择内容" message:message delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil];
    [alertView show];
}

// 设置列宽
- (CGFloat) pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    if(component == 0){
        return 150;
    }
    return 150;
}


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

@end

-- 运行效果 :

技术分享

5. 老虎机示例代码

(1) 相关 API 简介

相关 API 简介 :

-- 音频文件使用流程 :

    //音频文件 位置
    NSURL * gameSoundUrl = [[NSBundle mainBundle] URLForResource:@"gaming" withExtension:@"wav"];
    
    //音频标识
    SystemSoundID soundId;
    //加载音频文件
    AudioServicesCreateSystemSoundID((__bridge CFURLRef)(gameSoundUrl), &soundId);
    //播放音频
    AudioServicesPlaySystemSound(soundId);

-- 随机数生成 :

        //生成一个 0 ~ 5 之间的随机数
        NSUInteger randomNum = arc4random() % icons.count;

-- 设置 UIPickerView 选项 :

        //将随机数设置给 UIPickerView 的 四列 中的每行选项 索引
        [self.pickerView selectRow:randomNum inComponent:i animated:YES];

(2) 老虎机代码示例

代码示例 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  TigerGame
//
//  Created by octopus on 15-12-23.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <AudioToolbox/AudioToolbox.h>
//实现 UIPickerView 的两个委托协议
@interface OCViewController : UIViewController<UIPickerViewDataSource, UIPickerViewDelegate>

//UIPickerView 引用
@property (strong, nonatomic) IBOutlet UIPickerView *pickerView;
//UIButton 开始游戏按钮 引用
@property (strong, nonatomic) IBOutlet UIButton *button;

//点击按钮回调的方法
- (IBAction)startGame:(id)sender;
@end

-- OCViewController.m :

//
//  OCViewController.m
//  TigerGame
//
//  Created by octopus on 15-12-23.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

//设置一个默认的 控件 tag
#define imageTag 1

//图标图片集合
NSArray * icons;


- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    /*
        加载 六张 图标图片
     */
    
    UIImage * ai = [UIImage imageNamed:@"ai.png"];
    UIImage * as = [UIImage imageNamed:@"as.png"];
    UIImage * br = [UIImage imageNamed:@"br.png"];
    UIImage * eclipse = [UIImage imageNamed:@"eclipse.png"];
    UIImage * ps = [UIImage imageNamed:@"ps.png"];
    UIImage * xcode = [UIImage imageNamed:@"xcode.png"];
    
    
    //将六张 图标 图片放入集合中
    icons = [NSArray arrayWithObjects:ai, as, br, eclipse, ps, xcode, nil];
    
    //设置 UIPickerView 委托
    self.pickerView.dataSource = self;
    self.pickerView.delegate = self;
}

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

//点击开始游戏按钮 回调的方法
- (IBAction)startGame:(id)sender {
    //设置按钮不可点击
    self.button.enabled = NO;
    
    //音频文件 位置
    NSURL * gameSoundUrl = [[NSBundle mainBundle] URLForResource:@"gaming" withExtension:@"wav"];
    
    //音频标识
    SystemSoundID soundId;
    //加载音频文件
    AudioServicesCreateSystemSoundID((__bridge CFURLRef)(gameSoundUrl), &soundId);
    //播放音频
    AudioServicesPlaySystemSound(soundId);
    
    for (int i = 0; i < 4; i++) {
        //生成一个 0 ~ 5 之间的随机数
        NSUInteger randomNum = arc4random() % icons.count;
        //将随机数设置给 UIPickerView 的 四列 中的每行选项 索引
        [self.pickerView selectRow:randomNum inComponent:i animated:YES];
    }
    
    //设置按钮可用
    self.button.enabled = YES;
    
}


/*
    下面是 UIPickerViewDataSource 的委托方法
 */

//UIPickerViewDataSource 委托方法, 设置 UIPickerView 的列数
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 4;
}

//UIPickerViewDataSource 委托方法, 设置 UIPickerView 每一列的行数
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return icons.count;
}

/*
    下面是 UIPickerViewDelegate 的委托方法
 */

//设置每个 UIPickerView 中每列 每行 的选项 UI 控件
- (UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
    /*
        这里注意 重用 View 的 tag, 我们将 View 的 tag 设置为1, 
        如果 View 是已经重用的 直接返回, 如果没有重用, 
        创建 View 设置其 tag 为1, 并返回
     */
    if (view.tag != imageTag) {
        //创建一个 UIImageView, 并为其设置一张图片
        view = [[UIImageView alloc] initWithImage : [icons objectAtIndex : row]];
        //UIImageView 设置 tag 标识
        view.tag = imageTag;
        //设置该组件不可响应任何事件
        view.userInteractionEnabled = NO;
        view.contentMode = UIViewContentModeScaleAspectFill;
    }
    return view;
}

//设置 UIPickerView 中每个选项的 宽度 40
- (CGFloat) pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    return 70;
}

//设置 UIPickerView 中每个选项的 高度 40
- (CGFloat) pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
    return 70;
}




@end

-- 运行效果 :

技术分享

四. 微调器 (UIStepper)

1. UIStepper 属性简介

UIStepper 属性截图 :

技术分享

(1) value 属性

value 属性 :

技术分享

-- Minimum : UIStepper 最小值, 默认 0;

-- Maximum : UIStepper 最大值, 默认 100;

-- Current : UIStepper 当前值, 在 Minimum 与 Maximum 之间;

-- Step : 每次点击 + 或 -, 增加或减小的值;

(2) Behavior 属性

Behavior 属性 :

-- AutoRepeat : 默认 YES, 此时按住 + 或 - 不放, value 值会持续增加或减小;

-- Continuous : 默认 YES, 此时交互时会立即发送 value change 事件, NO 时会等交互结束后才发送 value change 事件;

-- Wrap : 默认 NO, YES 时当值持续增加比 Maximum 还大时会变成 Minimum, 当值持续减小比 Minimum 还小时会变为 Maximum;

2. UIStepper 代码示例

代码示例 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  UIStepper
//
//  Created by octopus on 15-12-24.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController

@property (strong, nonatomic) IBOutlet UILabel *label1;
@property (strong, nonatomic) IBOutlet UILabel *label2;

//将三个 UIStepper 的 IBAction 绑定方法都绑定在一个 valueChange 方法中
- (IBAction)valueChanged:(UIStepper *)sender;

@end

-- OCViewController.m :

//
//  OCViewController.m
//  UIStepper
//
//  Created by octopus on 15-12-24.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

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

- (IBAction)valueChanged:(UIStepper *)sender {
    /*
        注意 将 double 类型转为字符串, 需要使用 NSString 的 stringWithFormat 方法进行转换
     */
    switch (sender.tag) {
        case 0:
            self.label1.text = [NSString stringWithFormat:@"%g", sender.value];
            break;
        case 1:
            self.label2.text = [NSString stringWithFormat:@"%g", sender.value];
            break;
            
        default:
            break;
    }
}
@end

-- 运行效果 :

技术分享

四. 网页控件 (UIWebView)

1. UIWebView 控件属性

UIWebView 控件属性截图 :

技术分享

(1) Scaling 属性

Scaling 属性作用 : 是否缩放网页适配 UIWebView 控件;

(2) detection 属性

detection 属性 :

技术分享

-- Links : 自动识别超链接, 点击超链接进入该页面;

-- Address : 自动识别网页上的地址;

-- Phone Numbers : 自动识别电话号码, 点击电话号码就会自动拨号;

-- Events : 自动识别网页上的日历事件;

2. UIWebView 操作

(1) UIWebView 内容加载

UIWebView 加载 :

-- "loadHTMLString : baseURL" 方法 : 加载显示 HTML 字符串;

-- "loadRequest" 方法 : 加载显示网页;

-- "stringByEvaluatingJavaScriptFromString" 方法 : 执行 JavaScript 字符串, 并返回结果;

(2) UIWebView 导航控制

UIWebView 导航控制 :

-- "goBack" 方法 : 后退回上一页;

-- "goForward" 方法 : 前进;

-- "reload" 方法 : 重新加载网页;

-- "stopLoading" 方法 : 停止加载网页;

(3) UIWebViewDelegate 协议委托

UIWebViewDelegate 协议 :

-- "webView:shouldStartLoadWithRequest:navigationType" 方法 : 加载指定 URL 网页时回调该方法;

-- "webViewDidStartLoad" 方法 : 开始加载网页时激发的方法;

-- "webViewDidFinishLoad" 方法 : 结束加载网页回调的方法;

-- "webViewDidFailLoadWithError" 方法 : 加载出现错误回调方法;

3. UIWebView 浏览器示例

(1) 相关 API

相关 API 简介 :

-- 设置网页内容自适应 :

    //设置 UIWebView 网页内容自适应
    self.webView.scalesPageToFit = YES;

-- 生成对话框显示加载错误内容 :

    //生成对话框 显示 加载失败内容
    UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"加载失败" message:[error localizedDescription] delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];

-- 根据 String 字符串获取 URL 对象 :

            //加载网页内容
            [self.textField resignFirstResponder];
            //获取网页地址
            NSString * address = self.textField.text;
            //将地址转为 url
            NSURLRequest * request = [NSURLRequest requestWithURL:[NSURL URLWithString:address]];

-- 加载网页内容 :

            //加载网页内容
            [self.webView loadRequest:request];

-- 停止加载网页 :

            //停止加载
            [self.webView stopLoading];

-- 重新加载网页 :

            //重新加载
            [self.webView reload];

-- 前进 :

            //前进
            [self.webView goForward];

-- 后退 :

            //后退
            [self.webView goBack];

(2) 代码示例

代码示例 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  UIWebView
//
//  Created by octopus on 15-12-28.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController <UIWebViewDelegate>
//地址栏输入框 引用
@property (strong, nonatomic) IBOutlet UITextField *textField;
//网页控件 引用
@property (strong, nonatomic) IBOutlet UIWebView *webView;

//五个按钮的点击方法都回调该方法, 通过 tag 属性来区分不同的按钮
- (IBAction)click:(UIButton *)sender;

@end

-- OCViewController.m :

//
//  OCViewController.m
//  UIWebView
//
//  Created by octopus on 15-12-28.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //设置 UIWebView 网页内容自适应
    self.webView.scalesPageToFit = YES;
    //设置 UIWebView 的委托
    self.webView.delegate = self;
    
}

- (void) webViewDidStartLoad:(UIWebView *)webView{
}

- (void) webViewDidFinishLoad:(UIWebView *)webView{
}

- (void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
    //生成对话框 显示 加载失败内容
    UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"加载失败" message:[error localizedDescription] delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    //显示对话框
    [alertView show];
}

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

- (IBAction)click:(UIButton *)sender {
    NSInteger tag = sender.tag;
    NSLog(@"tag : %d", tag);
    switch (tag) {
        case 0:{
            //加载网页内容
            [self.textField resignFirstResponder];
            //获取网页地址
            NSString * address = self.textField.text;
            //将地址转为 url
            NSURLRequest * request = [NSURLRequest requestWithURL:[NSURL URLWithString:address]];
            //加载网页内容
            [self.webView loadRequest:request];
        }
            break;
        case 1:
            //后退
            [self.webView goBack];
            break;
        case 2:
            //前进
            [self.webView goForward];
            break;
        case 3:
            //重新加载
            [self.webView reload];
            break;
        case 4:
            //停止加载
            [self.webView stopLoading];
            break;
            
        default:
            break;
    }
}
@end

-- 运行效果 :

技术分享

五. 工具条控件 (UIToolBar)

1. UIToolBar 控件属性

UIToolBar 属性截图 :

技术分享

(1) Style 属性

Style 属性 : 指定工具条风格;

技术分享

-- Default : 默认风格;

-- Black : 黑色背景, 白字风格;

-- Black Translucent (Deprecated) : 透明背景;

(2) items 属性

items 属性 : 该 Item 是一个 NSArray 对象, 包含多个 BarButtonItem;

技术分享

2. UIToolBar 工具条代码示例

(1) 工具条代码示例

代码示例 :

-- 界面设计文件 :

技术分享

-- OCViewController.h :

//
//  OCViewController.h
//  UItoolBar
//
//  Created by octopus on 15-12-29.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController


- (IBAction)click:(UIBarButtonItem *)sender;

@end

-- OCViewController.m :

//
//  OCViewController.m
//  UItoolBar
//
//  Created by octopus on 15-12-29.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

UIProgressView * progress;
NSTimer * timer;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //创建 UIToolBar 控件
    UIToolbar * toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 50, 320, 44)];
    [self.view addSubview:toolBar];
    
    //创建文字的 控件按钮
    UIBarButtonItem * bi1 = [[UIBarButtonItem alloc] initWithTitle:@"Left" style:UIBarButtonItemStylePlain target:self action:@selector(clickCodeItem:)];
    
    //创建 图片的 控件按钮
    UIBarButtonItem * bi2 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"xcode.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(clickCodeItem:)];
    
    //创建 一个 系统的添加 按钮
    UIBarButtonItem * bi3 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(clickCodeItem:)];
    
    //创建固定长度的空白
    UIBarButtonItem * bi4 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    
    //将进度条 封装成 UIBarButtonItem 按钮
    progress = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleBar];
    progress.frame = CGRectMake(0, 0, 80, 20);
    progress.progress = 0;
    UIBarButtonItem * bi5 = [[UIBarButtonItem alloc] initWithCustomView:progress];
    
    //将上面创建的按钮添加到工具条中
    toolBar.items = [NSArray arrayWithObjects:bi1, bi2, bi3, bi4, bi5, nil];
    
    //启动一个定时器, 更新进度条
    timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(changeProgress) userInfo:nil repeats:YES];
    
}

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

- (IBAction)click:(UIBarButtonItem *)sender {
    NSLog(@"tag : %d, tittle : %@", sender.tag, [sender title]);
}

- (void) clickCodeItem : (id)sender{
    NSLog(@"点击 %@", sender);
}

- (void) changeProgress{
    if (progress.progress >= 1.0) {
        [timer invalidate];
    }else{
        [progress setProgress:progress.progress + 0.01 animated:YES];
    }
}

@end

-- 运行效果 :

2015-12-29 15:17:55.644 UItoolBar[2331:60b] 点击 <UIBarButtonItem: 0x8c3b0d0>
2015-12-29 15:17:58.925 UItoolBar[2331:60b] 点击 <UIBarButtonItem: 0x8c3a3d0>
2015-12-29 15:18:00.669 UItoolBar[2331:60b] 点击 <UIBarButtonItem: 0x8c3c1a0>
2015-12-29 15:18:07.831 UItoolBar[2331:60b] tag : 1, tittle : Left
2015-12-29 15:18:09.446 UItoolBar[2331:60b] tag : 2, tittle : Center
2015-12-29 15:18:10.961 UItoolBar[2331:60b] tag : 3, tittle : Right

技术分享

转载注明出处 : http://blog.csdn.net/shulianghan/article/details/50348982

【IOS 开发】基本 UI 控件详解 (UIDatePicker | UIPickerView | UIStepper | UIWebView | UIToolBar )

标签：

原文地址：http://blog.csdn.net/shulianghan/article/details/50348982

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

【IOS 开发】基本 UI 控件详解 (UIDatePicker | UIPickerView | UIStepper | UIWebView | UIToolBar )

一. 日期选择器 (UIDatePicker)

1. UIDatePicker 控件属性

(1) Mode 属性

(2) Local 属性

(3) Interval 属性

(4) Constraints 属性

(5) Timer 属性

2. UIDatePicker 日期选择器 示例代码

3. UIDatePicker 计时器 示例代码

二. 选择器 (UIPickerView)

1. UIPickerView 简介

(1) UIPickerView 继承结构

(2) UIPickerView 属性

(3) UIPickerView 行列属性读取方法

(4) UIPickerViewDataSource 数据管理

(5) UIPickerViewDelegate 管理 外观 和 响应

2. 单行选择器示例

(1) 相关 API 简介

(2) 单行选择器代码示例

3. 多行列表选择器示例代码

(1) 示例代码

4. 相关联的多行列表选择器示例代码

(1) 相关 API 简介

(2) 关联多项 UIPickerView 示例代码

5. 老虎机 示例代码

(1) 相关 API 简介

(2) 老虎机 代码示例

四. 微调器 (UIStepper)

1. UIStepper 属性简介

(1) value 属性

(2) Behavior 属性

2. UIStepper 代码示例

四. 网页控件 (UIWebView)

1. UIWebView 控件属性

(1) Scaling 属性

(2) detection 属性

2. UIWebView 操作

(1) UIWebView 内容加载

(2) UIWebView 导航控制

(3) UIWebViewDelegate 协议委托

3. UIWebView 浏览器示例

(1) 相关 API

(2) 代码示例

五. 工具条控件 (UIToolBar)

1. UIToolBar 控件属性

(1) Style 属性

(2) items 属性

2. UIToolBar 工具条代码示例

(1) 工具条代码示例

2. UIDatePicker 日期选择器示例代码

3. UIDatePicker 计时器示例代码

(5) UIPickerViewDelegate 管理外观和响应

5. 老虎机示例代码

(2) 老虎机代码示例