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

转载注明出处 : 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 OCViewControllerNSTimer * 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-bittypedef double CGFloat;// 64-bitstruct 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 OCViewControllerNSArray * 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 OCViewControllerNSDictionary * 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 OCViewControllerUIProgressView * 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 : Left2015-12-29 15:18:09.446 UItoolBar[2331:60b] tag : 2, tittle : Center2015-12-29 15:18:10.961 UItoolBar[2331:60b] tag : 3, tittle : Right

 

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