UIControl类控件（三）

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

一. 分段控件 (UISegmentedControl)

控件展示 : 

1. UISegmentedControl 控件属性

(1) Style 属性

Style 属性 : 

     

-- Plain : 分段控件使用最普通的风格;

-- Bordered : 在最普通风格上添加一圈边框;

-- Bar : 分段控件使用工具条风格;

(2) State 属性

State 属性 : 

-- Momentary 复选框 : 勾选复选框后, 分段控件不保存控件状态, 如果勾选后, 点击时高亮, 点击后恢复原样;

(3) Tint 属性

Tint 属性 : 

-- 作用 : 设置分段控件被选中的高亮颜色;

-- 效果展示 : 

(4) Segments 属性

Segments 属性 : 

-- 作用 : 控制分成几段;

-- 展示效果 : 

(5) Segment 属性

Segment 属性 : 

      

-- 作用 : 为不同的分段设置对应的 标题, 图片 等内容;

(6) Tittle 属性

Tittle 属性 : 每个 Segment 都有一个 Tittle 属性, 就是分段按钮每个按钮的标题;

(7) Image 属性

Image 属性 : 为不同的 分段 Segment 设置图片;

(8) Behavior 属性

Behavior 属性 : 

-- Enable 复选框 : 用于设置 Segment 是否可用;

-- Selected 复选框 : 用于设置 Segment 是否被选中;

2. 使用 UISegmentedControl 改变背景颜色

(1) 设置 UISegmentedControl 属性

UISegmentedControl 属性 : 

-- 属性截图 : 

(2) 设置 UISegmentedControl 响应方法

创建 UISegmentedControl 的 IBAction : 

-- 按住 control 键将 UISegmentedControl 拖动到 OCViewController.h 中 : 

-- 设置 IBAction 属性 : 

-- 方法代码 : 

[objc]  view plain copy

1. - (IBAction)segmentControl:(id)sender {  
2.     int index = [sender selectedSegmentIndex];  
3.       
4.     switch (index) {  
5.         case 0:  
6.             self.baseView.backgroundColor = [UIColor whiteColor];  
7.             break;  
8.         case 1:  
9.             self.baseView.backgroundColor = [UIColor blackColor];  
10.             break;  
11.         case 2:  
12.             self.view.backgroundColor = [UIColor greenColor];  
13.             break;  
14.         case 3:  
15.             self.view.backgroundColor = [UIColor blueColor];  
16.             break;  
17.               
18.         default:  
19.             break;  
20.     }  
21. }  

(3) 代码示例

代码示例 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UISegmentedControl  
4. //  
5. //  Created by octopus on 15-12-4.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController  
12. //背景 UIView  
13. @property (strong, nonatomic) IBOutlet UIView *baseView;  
14. - (IBAction)segmentControl:(id)sender;  
15.   
16. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UISegmentedControl  
4. //  
5. //  Created by octopus on 15-12-4.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. - (void)viewDidLoad  
18. {  
19.     [super viewDidLoad];  
20.     // Do any additional setup after loading the view, typically from a nib.  
21. }  
22.   
23. - (void)didReceiveMemoryWarning  
24. {  
25.     [super didReceiveMemoryWarning];  
26.     // Dispose of any resources that can be recreated.  
27. }  
28.   
29. - (IBAction)segmentControl:(id)sender {  
30.     int index = [sender selectedSegmentIndex];  
31.       
32.     switch (index) {  
33.         case 0:  
34.             self.baseView.backgroundColor = [UIColor whiteColor];  
35.             break;  
36.         case 1:  
37.             self.baseView.backgroundColor = [UIColor blackColor];  
38.             break;  
39.         case 2:  
40.             self.view.backgroundColor = [UIColor greenColor];  
41.             break;  
42.         case 3:  
43.             self.view.backgroundColor = [UIColor blueColor];  
44.             break;  
45.               
46.         default:  
47.             break;  
48.     }  
49. }  
50. @end  

-- 界面展示 : 

3. 动态增加删除分段

(1) 主要 API 简介

插入 删除分段 : 

-- 插入分段 : 调用 segmentControl 的 insertSegmentWithTittle 方法, 参数一 标题, 参数二 插入索引;

[objc]  view plain copy

1. [self.segmentControl insertSegmentWithTitle:tittle atIndex:count animated:YES];  

-- 删除分段 : 删除只需注明 索引值 即可;

[objc]  view plain copy

1. [self.segmentControl removeSegmentAtIndex:count - 1 animated:YES];  

(2) 源码示例

源码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UISegmentedControl  
4. //  
5. //  Created by octopus on 15-12-4.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController  
12. //背景 UIView  
13. @property (strong, nonatomic) IBOutlet UIView *baseView;  
14. //分段控件  
15. @property (strong, nonatomic) IBOutlet UISegmentedControl *segmentControl;  
16. //单行文本  
17. @property (strong, nonatomic) IBOutlet UITextField *textField;  
18.   
19. //分段控件方法  
20. - (IBAction)segmentControl:(id)sender;  
21. //点击背景控件方法  
22. - (IBAction)clickBackGround:(id)sender;  
23.   
24. //添加分段控件  
25. - (IBAction)addSegment:(id)sender;  
26. //删除分段控件  
27. - (IBAction)minusSegment:(id)sender;  
28.   
29.   
30. @end  

--  OCViewController.m  : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UISegmentedControl  
4. //  
5. //  Created by octopus on 15-12-4.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. - (void)viewDidLoad  
18. {  
19.     [super viewDidLoad];  
20.     // Do any additional setup after loading the view, typically from a nib.  
21. }  
22.   
23. - (void)didReceiveMemoryWarning  
24. {  
25.     [super didReceiveMemoryWarning];  
26.     // Dispose of any resources that can be recreated.  
27. }  
28.   
29. //分段控件响应方法  
30. - (IBAction)segmentControl:(id)sender {  
31.     int index = [sender selectedSegmentIndex];  
32.       
33.     switch (index) {  
34.         case 0:  
35.             self.baseView.backgroundColor = [UIColor whiteColor];  
36.             break;  
37.         case 1:  
38.             self.baseView.backgroundColor = [UIColor blackColor];  
39.             break;  
40.         case 2:  
41.             self.view.backgroundColor = [UIColor greenColor];  
42.             break;  
43.         case 3:  
44.             self.view.backgroundColor = [UIColor blueColor];  
45.             break;  
46.               
47.         default:  
48.             break;  
49.     }  
50. }  
51.   
52. - (IBAction)clickBackGround:(id)sender {  
53.     // 点击背景 取消虚拟键盘  
54.     [self.textField resignFirstResponder];  
55. }  
56.   
57. //添加分段控件  
58. - (IBAction)addSegment:(id)sender {  
59.     NSUInteger count = self.segmentControl.numberOfSegments;  
60.       
61.     NSString * tittle = self.textField.text;  
62.     if ([tittle length] > 0) {  
63.         [self.segmentControl insertSegmentWithTitle:tittle atIndex:count animated:YES];  
64.         self.textField.text = @"";  
65.     }  
66. }  
67.   
68. //删除分段控件  
69. - (IBAction)minusSegment:(id)sender {  
70.     NSUInteger count = self.segmentControl.numberOfSegments;  
71.     [self.segmentControl removeSegmentAtIndex:count - 1 animated:YES];  
72. }  
73. @end  

-- 界面展示 : 

二. 图像控件 (UIImageView)

1. UIImageView 控件属性

(1) UIImageView 简介

UIImageView 简介 : 

-- 继承结构 : UIImageView 继承 UIView, 该类不能响应用户操作, 是静态控件, (活动控件 静态控件 被动控件);

(2) 图片显示属性

设置图片显示的属性 : 

-- image (普通) : 访问或设置该控件显示的图片;

-- HighlightedImage (高亮) : 设置图片处于 高亮状态 时显示的图片;

(3) 动画显示方法

UIImageView 动画显示方法 : 

-- animationImages : 设置一个 NSArray 对象, 需要显示多张图片;

-- highlightedAnimationImages : 设置 高亮状态 显示的多张图片;

-- animationDuration : 设置 UIImageView 动画持续时间;

-- animationRepeatCount : 设置 UIImageView 动画重复次数;

-- startAnimating : 开始播放动画;

-- stopAnimating : 停止播放动画;

-- isAnimating : 判断 UIImageView 是否正在播放动画;

(4) UIImageView 缩放属性

UIImageView 缩放属性 : 

     

-- Scale To Fill : 不保持 纵横缩放比, 图片完全自适应 UIImageView 控件;

-- Aspect Fit : 保持纵横比缩放, 保证图片长边完全显示出来, 完整显示图片;

-- Aspect Fill : 保持纵横比缩放, 保证图片短边能显示出来, 只在水平或垂直方向某一个方向是完整的, 另一个方向截取;

-- Center : 不缩放图片, 显示图片的中间区域;

-- Top : 不缩放图片, 显示图片的顶部区域;

-- Bottom : 不缩放图片, 显示图片底部区域;

-- Left : 不缩放图片, 显示图片左边区域;

-- Right : 不缩放图片, 显示图片右边区域;

-- Top Left : 不缩放图片, 显示图片左上区域;

-- Top Right : 不缩放图片, 显示图片右上区域;

-- Bottom Left : 不缩放图片, 显示图片左下区域;

-- Bottom Right : 不缩放图片, 显示图片右下区域;

2. 图片浏览器示例

(1) API 简介

手势事件 : 

-- 设置手势点击响应 : 每个 UIView 都有一个 userInteractionEnabled 属性为 YES;

[objc]  view plain copy

1. //设置大图片可以相应手势点击  
2. self.bigPicture.userInteractionEnabled = YES;  

-- 创建手势识别器 : 创建 UITapGestureRecognizer 手势识别器, initWithTarget 表示手势响应方法的类, action 对应方法的 selector 方法;

[objc]  view plain copy

1. UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(click:)];  

--  为 UIView 添加手势识别器  : 调用 UIView 的 addGestureRecognizer 方法;

[objc]  view plain copy

1. [self.bigPicture addGestureRecognizer:tap];  

--  设置 UIImageView 图片  : 

[objc]  view plain copy

1. self.bigPicture.image = [UIImage imageNamed:[images objectAtIndex:currentImage%images.count]];  

--  设置透明度  : 

[objc]  view plain copy

1. self.bigPicture.alpha = alpha;  

--  获取手指触摸位置  : 

[objc]  view plain copy

1. //获取手指触摸的位置  
2. CGPoint point = [recognizer locationInView:self.bigPicture];  

--  获取图片对应的 CGImageRef  : 

[objc]  view plain copy

1. //获取原图对应的 CGImageRef  
2. CGImageRef imageRef = [srcImage CGImage];  

--  根据一个图片创建新的 CGImageRef  : 

[objc]  view plain copy

1. //创建新的图片  
2. CGImageRef newImageRef = CGImageCreateWithImageInRect(imageRef, CGRectMake(x, y, 140, 140));  

--  根据 CGImageRef 创建 UIImage  : 

[objc]  view plain copy

1. [UIImage imageWithCGImage:newImageRef];  

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UIImageView  
4. //  
5. //  Created by octopus on 15-12-7.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController  
12.   
13. //大图片的 UIImageView  
14. @property (strong, nonatomic) IBOutlet UIImageView *bigPicture;  
15. //小图片的 UIImageView  
16. @property (strong, nonatomic) IBOutlet UIImageView *smallPicture;  
17.   
18. //UISegmentedControl 的方法  
19. - (IBAction)segmentControl:(id)sender;  
20.   
21. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UIImageView  
4. //  
5. //  Created by octopus on 15-12-7.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. //图片集合  
18. NSArray * images;  
19. //当前显示的图片  
20. int currentImage;  
21. //透明度  
22. CGFloat alpha;  
23.   
24. - (void)viewDidLoad  
25. {  
26.     [super viewDidLoad];  
27.     // Do any additional setup after loading the view, typically from a nib.  
28.       
29.     //初始化变量  
30.     currentImage = 0;  
31.     alpha = 1.0;  
32.     images = [NSArray arrayWithObjects:@"1.png" , @"2.jpg", @"3.png", nil nil];  
33.       
34.     //设置大图片可以相应手势点击  
35.     self.bigPicture.userInteractionEnabled = YES;  
36.       
37.     UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(click:)];  
38.       
39.     [self.bigPicture addGestureRecognizer:tap];  
40.       
41. }  
42.   
43. - (void)didReceiveMemoryWarning  
44. {  
45.     [super didReceiveMemoryWarning];  
46.     // Dispose of any resources that can be recreated.  
47. }  
48.   
49. - (IBAction)segmentControl:(id)sender {  
50.     int index = [sender selectedSegmentIndex];  
51.     switch (index) {  
52.         case 0: //透明度+  
53.             alpha += 0.1;  
54.             if(alpha > 1.0){  
55.                 alpha = 1.0;  
56.             }  
57.             self.bigPicture.alpha = alpha;  
58.             break;  
59.         case 1: //透明度-  
60.             NSLog(@"1");  
61.             alpha -= 0.1;  
62.             if(alpha < 0){  
63.                 alpha = 0;  
64.             }  
65.             self.bigPicture.alpha = alpha;  
66.             break;  
67.         case 2: //下一张图片  
68.             NSLog(@"2");  
69.             self.bigPicture.image = [UIImage imageNamed:[images objectAtIndex:currentImage%images.count]];  
70.             currentImage ++;  
71.             break;  
72.               
73.         default:  
74.             break;  
75.     }  
76. }  
77.   
78. - (void) click : (UIGestureRecognizer * ) recognizer{  
79.     //获取正在显示的图片  
80.     UIImage * srcImage = self.bigPicture.image;  
81.     //获取手指触摸的位置  
82.     CGPoint point = [recognizer locationInView:self.bigPicture];  
83.     //获取原图对应的 CGImageRef  
84.     CGImageRef imageRef = [srcImage CGImage];  
85.     //获取缩放比例  
86.     CGFloat scale = srcImage.size.width / 320;  
87.     //获取图片位置  
88.     CGFloat x = point.x * scale;  
89.     CGFloat y = point.y * scale;  
90.     //验证 x y 坐标, 不要超出边界  
91.     if (x + 120 > srcImage.size.width - 140) {  
92.         x = srcImage.size.width - 140;  
93.     }  
94.       
95.     if (y + 120 > srcImage.size.height) {  
96.         y = srcImage.size.height - 140;  
97.     }  
98.       
99.     //创建新的图片  
100.     CGImageRef newImageRef = CGImageCreateWithImageInRect(imageRef, CGRectMake(x, y, 140, 140));  
101.     self.smallPicture.image = [UIImage imageWithCGImage:newImageRef];  
102.       
103. }  
104. @end  

-- 界面展示 : 

3. 幻灯片放映

(1) API 简介

幻灯片播放相关 API : 

-- 设置 UIImage 数组给 UIImageView : 

[objc]  view plain copy

1. images = [NSArray arrayWithObjects:  
2.           [UIImage imageNamed:@"1.png"],  
3.           [UIImage imageNamed:@"2.jpg"],  
4.           [UIImage imageNamed:@"3.png"],  
5.           nil nil];  
6. self.imageView.animationImages = images;  

--  设置动画的间隔 和 次数  : 

[objc]  view plain copy

1. //设置 UIImageView 动画间隔  
2. self.imageView.animationDuration = 5;  
3. //设置动画重复次数  
4. self.imageView.animationRepeatCount = 0xFFFF;  

--  启动动画  : 

[objc]  view plain copy

1. //启动动画  
2. [self.imageView startAnimating];  

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UIimageView2  
4. //  
5. //  Created by octopus on 15-12-9.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController  
12. @property (strong, nonatomic) IBOutlet UIImageView *imageView;  
13.   
14. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UIimageView2  
4. //  
5. //  Created by octopus on 15-12-9.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. NSArray * images;  
18.   
19. - (void)viewDidLoad  
20. {  
21.     [super viewDidLoad];  
22.     // Do any additional setup after loading the view, typically from a nib.  
23.       
24.     //创建 UIImageView 集合  
25.     images = [NSArray arrayWithObjects:  
26.               [UIImage imageNamed:@"1.png"],  
27.               [UIImage imageNamed:@"2.jpg"],  
28.               [UIImage imageNamed:@"3.png"],  
29.               nil nil];  
30.     //设置集合给 UIImageView 的动画  
31.     self.imageView.animationImages = images;  
32.     //设置 UIImageView 动画间隔  
33.     self.imageView.animationDuration = 5;  
34.     //设置动画重复次数  
35.     self.imageView.animationRepeatCount = 0xFFFF;  
36.     //启动动画  
37.     [self.imageView startAnimating];  
38.       
39. }  
40.   
41. - (void)didReceiveMemoryWarning  
42. {  
43.     [super didReceiveMemoryWarning];  
44.     // Dispose of any resources that can be recreated.  
45. }  
46.   
47. @end  

-- 界面展示 : 

三. 进度条控件 (UIProgressView)

1. UIProgressView 控件属性

UIProgressView 属性截图 : 

(1) Style 属性

Style 属性 : 

-- Default : 使用默认风格的进度条;

-- Bar : 工具条风格;

(2) progress 属性

Progress 属性 : 设置已进行的进度的比例值, 取值范围 0.0 ~ 1.0;

(3) Progress Tint 属性

Progress Tint 属性 : 已完成的颜色;

(4) Track Tint 属性

Track Tint 属性 : 进度条轨道颜色;

(5) progressImage 属性

ProgressImage 属性 : 设置进度条完成的图片;

-- 注意 : 该属性在 Interface Builder 中没有体现出来;

(6) trackImage 属性

trackImage 属性 : 设置进度条轨道图片;

-- 注意 : 代码中设置, 界面设计文件中无该属性;

2. 可拉伸图片

(1) 可拉伸图片用法

可拉伸图片作用 : 在上述进度条中, 设置的 progressImage 和 trackImage 必须是可拉伸图片;

(2) 可拉伸图片创建

创建可拉伸图片 : 使用 UIImage 创建 可拉伸图片, 通过 UIEdgeInsets 结构体定义图片拉伸区域;

-- UIEdgeInsets 结构体 : 包括 left, top, right, bottom 四个值;

-- 缩放主体 : 图片缩放只在 UIEdgeInsets 定义的 四个属性值 区域缩放, 图片的中心部分是不进行缩放的;

3. 定制进度条示例

(1) 相关 API 简介 

相关 API 简介 : 

-- 创建可拉伸的 UIImage : 

[objc]  view plain copy

1. UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  

-- 为进度条设置可拉伸图片 : 

[objc]  view plain copy

1. //将可拉伸图片设置给进度条  
2. self.progress3.progressImage = progressImage;  
3. self.progress3.trackImage = trackImage;  

--  创建定时器  : 

[objc]  view plain copy

1. //定时器  
2. timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(doProgress) userInfo:nil repeats:YES];  

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UIProgressView  
4. //  
5. //  Created by octopus on 15-12-10.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController  
12.   
13. @property (strong, nonatomic) IBOutlet UIProgressView *progress1;  
14. @property (strong, nonatomic) IBOutlet UIProgressView *progress2;  
15. @property (strong, nonatomic) IBOutlet UIProgressView *progress3;  
16. - (IBAction)click:(id)sender;  
17. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UIProgressView  
4. //  
5. //  Created by octopus on 15-12-10.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. //定时器  
18. NSTimer * timer;  
19. //进度条进度  
20. CGFloat progress;  
21.   
22. /* 
23.     CGFloat : 是 float 类型, 在 IOS 中定义了下面的类型  
24.     -- 32 位 : typedef float CGFloat;// 32-bit 
25.     -- 64 位 : typedef double CGFloat;// 64-bit 
26.   
27.     CGPoint : 二维坐标点; 
28.     -- 定义代码 :  
29.         struct CGPoint { 
30.             CGFloat x; 
31.             CGFloat y; 
32.         }; 
33.         typedef struct CGPoint CGPoint; 
34.   
35.     CGSize : 矩形的宽度和高度; 
36.     -- 定义代码 :  
37.         struct CGSize { 
38.             CGFloat width; 
39.             CGFloat height; 
40.         }; 
41.         typedef struct CGSize CGSize; 
42.   
43.     CGRect : 矩形的位置和大小; 
44.     -- 定义代码 :  
45.         struct CGRect { 
46.             CGPoint origin; 
47.             CGSize size; 
48.         }; 
49.         typedef struct CGRect CGRect; 
50.  */  
51.   
52. - (void)viewDidLoad  
53. {  
54.     [super viewDidLoad];  
55.     // Do any additional setup after loading the view, typically from a nib.  
56.       
57.     //创建 可拉伸的图片, 平铺样式  
58.     UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
59.     UIImage * progressImage = [[UIImage imageNamed:@"Snip20151210_140.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
60.       
61.     //将可拉伸图片设置给进度条  
62.     self.progress3.progressImage = progressImage;  
63.     self.progress3.trackImage = trackImage;  
64.       
65. }  
66.   
67. - (void)didReceiveMemoryWarning  
68. {  
69.     [super didReceiveMemoryWarning];  
70.     // Dispose of any resources that can be recreated.  
71. }  
72.   
73. - (IBAction)click:(id)sender {  
74.     //进度条  
75.     progress = 0;  
76.       
77.     //定时器  
78.     timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(doProgress) userInfo:nil repeats:YES];  
79.       
80. }  
81.   
82. - (void) doProgress{  
83.     progress += 0.1;  
84.     if(progress > 1.0){  
85.         [timer invalidate];  
86.     }else{  
87.         [self.progress1 setProgress:progress animated:YES];  
88.         [self.progress2 setProgress:progress animated:YES];  
89.         [self.progress3 setProgress:progress animated:YES];  
90.     }  
91.       
92.       
93. }  
94.   
95. @end  

-- 运行展示 : 可拉伸图片效果没有出现, 待调试;

四. 进度环控件 (UIActivityIndicatorView)

1. 进度环控件 (UIActivityIndicatorView) 属性

UIActivityIndicatorView 属性截图 : 

(1) Style 属性

Style 属性 : 

-- Large White : 大的 白色 风格;

-- White : 白色风格;

-- Gray : 灰色风格;

(2) Color 属性

Color 属性 : 

-- 作用 : 设置进度条的颜色, 设置该属性会覆盖之前选中的风格中的颜色;

(3) Behavior 属性

Behavior 属性 : 

-- Animating : 显示出来后立即转动;

-- Hides When Stopped : 停止时自动隐藏;

(4) UIActivityIndicatorView 大小

两种大小 : 

-- 标准风格 : 像素值 20 x 20;

-- 大风格 : 像素值 37 x 37;

(5) 控制方法

UIActivityIndicatorView 控制方法 : 

-- 开始转动 : startAnimating 方法;

-- 停止转动 : stopAnimating 方法;

2. UIActivityIndicatorView 代码示例

(1) 创建 IBOutletConnection

创建 IBOutletConnection : 

-- 按住 Option 键 将一个元素拖动到 OCViewController.h 中 : 其中的 Connection 属性, 不要选择 IBOutlet 属性, 选择 IBOutletConnection 属性;

-- 将想要添加到 IBOutletConnection 中的控件拖动到 OCViewController.h 中的 IBOutletConnection 属性变量上 : 

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UIProgressView  
4. //  
5. //  Created by octopus on 15-12-10.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController  
12.   
13. @property (strong, nonatomic) IBOutlet UIProgressView *progress1;  
14. @property (strong, nonatomic) IBOutlet UIProgressView *progress2;  
15. @property (strong, nonatomic) IBOutlet UIProgressView *progress3;  
16.   
17.   
18. @property (strong, nonatomic) IBOutletCollection(UIActivityIndicatorView) NSArray *IndicatorCollection;  
19. - (IBAction)start:(id)sender;  
20. - (IBAction)end:(id)sender;  
21.   
22.   
23. - (IBAction)click:(id)sender;  
24. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UIProgressView  
4. //  
5. //  Created by octopus on 15-12-10.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. //定时器  
18. NSTimer * timer;  
19. //进度条进度  
20. CGFloat progress;  
21.   
22. /* 
23.     CGFloat : 是 float 类型, 在 IOS 中定义了下面的类型  
24.     -- 32 位 : typedef float CGFloat;// 32-bit 
25.     -- 64 位 : typedef double CGFloat;// 64-bit 
26.   
27.     CGPoint : 二维坐标点; 
28.     -- 定义代码 :  
29.         struct CGPoint { 
30.             CGFloat x; 
31.             CGFloat y; 
32.         }; 
33.         typedef struct CGPoint CGPoint; 
34.   
35.     CGSize : 矩形的宽度和高度; 
36.     -- 定义代码 :  
37.         struct CGSize { 
38.             CGFloat width; 
39.             CGFloat height; 
40.         }; 
41.         typedef struct CGSize CGSize; 
42.   
43.     CGRect : 矩形的位置和大小; 
44.     -- 定义代码 :  
45.         struct CGRect { 
46.             CGPoint origin; 
47.             CGSize size; 
48.         }; 
49.         typedef struct CGRect CGRect; 
50.  */  
51.   
52. - (void)viewDidLoad  
53. {  
54.     [super viewDidLoad];  
55.     // Do any additional setup after loading the view, typically from a nib.  
56.       
57.     //创建 可拉伸的图片, 平铺样式  
58.     UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
59.     UIImage * progressImage = [[UIImage imageNamed:@"Snip20151210_140.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
60.       
61.     //将可拉伸图片设置给进度条  
62.     self.progress3.progressImage = progressImage;  
63.     self.progress3.trackImage = trackImage;  
64.       
65. }  
66.   
67. - (void)didReceiveMemoryWarning  
68. {  
69.     [super didReceiveMemoryWarning];  
70.     // Dispose of any resources that can be recreated.  
71. }  
72.   
73. - (IBAction)start:(id)sender {  
74.     for(int i = 0; i < 4; i ++){  
75.         //从集合中获取 UIActivityIndicatorView 控件并开启动画  
76.         [[self.IndicatorCollection objectAtIndex:i] startAnimating];  
77.     }  
78. }  
79.   
80. - (IBAction)end:(id)sender {  
81.     for(int i = 0; i < 4; i ++){  
82.         //从集合中获取 UIActivityIndicatorView 控件并结束动画  
83.         [[self.IndicatorCollection objectAtIndex:i] stopAnimating];  
84.     }  
85. }  
86.   
87. - (IBAction)click:(id)sender {  
88.     //进度条  
89.     progress = 0;  
90.       
91.     //定时器  
92.     timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(doProgress) userInfo:nil repeats:YES];  
93.       
94. }  
95.   
96. - (void) doProgress{  
97.     progress += 0.1;  
98.     if(progress > 1.0){  
99.         [timer invalidate];  
100.     }else{  
101.         [self.progress1 setProgress:progress animated:YES];  
102.         [self.progress2 setProgress:progress animated:YES];  
103.         [self.progress3 setProgress:progress animated:YES];  
104.     }  
105.       
106.       
107. }  
108.   
109. @end  

-- 页面展示效果 : 

五. 拖动条控件 (UISlider)

1. 拖动条控件 (UISlider) 简介

属性截图 : 

(1) UISlider 图片设置方法

UISlider 设置图片方法 : 

-- 已完成进度轨道图片 : "setMinimumTrackingImage : forState :";

-- 未完成进度轨道图片 : "setMaximumTrackingImage : forState :";

-- 设置滑块的图片 : "setThumbImage : forState :";

2. 拖动条改变透明度示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UISlider  
4. //  
5. //  Created by octopus on 15-12-14.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController  
12. @property (strong, nonatomic) IBOutlet UISlider *slid;  
13. @property (strong, nonatomic) IBOutlet UIImageView *image;  
14. - (IBAction)valueChange:(id)sender;  
15.   
16. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UISlider  
4. //  
5. //  Created by octopus on 15-12-14.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. - (void)viewDidLoad  
18. {  
19.     [super viewDidLoad];  
20.     // Do any additional setup after loading the view, typically from a nib.  
21.       
22.     [self.image setAlpha: 0];  
23. }  
24.   
25. - (void)didReceiveMemoryWarning  
26. {  
27.     [super didReceiveMemoryWarning];  
28.     // Dispose of any resources that can be recreated.  
29. }  
30.   
31. - (IBAction)valueChange:(id)sender {  
32.     [self.image setAlpha: self.slid.value];  
33. }  
34. @end  

-- 运行展示 : 

四. 警告框控件 (UIAlertView)

1. 警告框控件 (UIAlertView) 简介

(1) UIAlertView 创建流程

UIAlertView 创建流程  : 

-- 创建 UIAlertView : 创建时指定 标题, 内容, 按钮等信息, 按钮监听需要创建 UIAlertView 的 UIAlertViewDelegate 委托对象;

-- 显示 UIAlertView : 调用显示 UIAlertView 的显示方法;

-- 监听按钮 : 为委托对象实现 UIAlertViewDelegate 协议中的方法即可;

(2) UIAlertViewDelegate 协议方法

UIAlertViewDelegate 协议方法简介 : 

-- "- (void) alertView : (UIAlertView *) alertView clickedButtonAtIndex : (NSInteger) buttonIndex :" 方法 : 用户单击对话框中的按钮激发的方法, buttonIndex 是点击的按钮的索引;

-- "- (void) willPresentAlertView : (UIAlertView *) alertView" 方法 : 对话框将要显示时激发该方法;

-- "- (void) didPresentAlertView : (UIAlertView *) alertView" 方法 : 对话框完全显示出来后激发该方法;

-- "- (BOOL) alertViewShouldEnableFirstOtherButton : (UIAlertView *) alertView" 方法 : 对话框中除 cancel 按钮之后的第一个按钮被启用回调该方法;

-- "- (void) alertView : (UIAlertView *) alertView willDissmissWithButtonIndex : (NSInteger) buttonIndex" 方法 : 单击某按钮将要隐藏警告框时激发该方法;

-- "- (void) alertView : (UIAlertView *) alertView didDissmissWithButtonIndex : (NSInteger) buttonIndex" 方法: 单击某个按钮已经隐藏警告框后激发该方法;

-- "- (void) alertViewCancel : (UIAlertView * ) alertView " 方法 : 对话框被取消时激发的方法;

(3) UIAlertView 输入框风格设置

UIAlertView 的 actionSheetStyle 属性 : 

-- 主要作用 : 设置 UIAlertView 的风格, 取值是 枚举值;

-- UIAlertViewStyleDefault 枚举值 : 默认警告框风格;

-- UIAlertViewStyleSecureTextInput 枚举值 : 警告框中有一个密码输入框;

-- UIAlertViewStylePlainTextInput 枚举值 : 警告框中包含普通输入框;

-- UIAlertViewStyleLoginAndPasswordInput 枚举值 : 警告框中包含 用户名 密码输入;

访问输入框方法 : 

-- "- (UITextField *) textFieldAtIndex : (NSInteger) textFieldIndex" : 获取 索引值 为 textFieldIndex 的文本输入框;

.

.

2. 简单的对话框示例

(1) 创建 UIAlertView API

创建方法 : 

[objc]  view plain copy

1. [[UIAlertView alloc] initWithTitle:<#(NSString *)#> message:<#(NSString *)#> delegate:<#(id)#> cancelButtonTitle:<#(NSString *)#> otherButtonTitles:<#(NSString *), ...#>, nil nil];  

-- 参数一 : initWithTittle 对话框名称;

-- 参数二 : message 对话框内容;

-- 参数三 : delegate 委托对象;

-- 参数四 : cancelButtonTittle 取消按钮文字内容;

-- 参数五 : otherButtonTittles 其它按钮文字内容;

-- 真实代码 : 

[objc]  view plain copy

1. /* 
2.     创建 UIAlertView 控件, 传入参数 标题 内容 委托对象 取消按钮 其它按钮 
3.  */  
4. UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"对话框标题" message:@"对话框内容" delegate:self cancelButtonTitle:@"取消显示" otherButtonTitles:@"按钮1", @"按钮2", @"按钮3", @"按钮4", nil nil];  

显示对话框 : [UIAlertView show];

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UIAlertView  
4. //  
5. //  Created by octopus on 15-12-14.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController <UIAlertViewDelegate>  
12. //按钮的 IBAction 方法  
13. - (IBAction)click:(id)sender;  
14.   
15. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UIAlertView  
4. //  
5. //  Created by octopus on 15-12-14.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. - (void)viewDidLoad  
18. {  
19.     [super viewDidLoad];  
20.     // Do any additional setup after loading the view, typically from a nib.  
21.       
22. }  
23.   
24. - (void)didReceiveMemoryWarning  
25. {  
26.     [super didReceiveMemoryWarning];  
27.     // Dispose of any resources that can be recreated.  
28.       
29. }  
30.   
31. //点击按钮弹出 UIAlertView 对话框  
32. - (IBAction)click:(id)sender {  
33.     /* 
34.         创建 UIAlertView 控件, 传入参数 标题 内容 委托对象 取消按钮 其它按钮 
35.      */  
36.     UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"对话框标题" message:@"对话框内容" delegate:self cancelButtonTitle:@"取消显示" otherButtonTitles:@"按钮1", @"按钮2", @"按钮3", @"按钮4", nil nil];  
37.     //调用该方法显示 UIAlertView 控件  
38.     [alert show];  
39. }  
40.   
41. //实现的 UIAlertViewDelegate 协议中的方法  
42. - (void) alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{  
43.     NSString * msg = [NSString stringWithFormat:@"点击了按钮 %d", buttonIndex];  
44.     UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"弹出框" message: msg delegate:nil cancelButtonTitle:@"取消" otherButtonTitles: nil nil];  
45.     [alert show];  
46.       
47.       
48. }  
49. @end  

-- 运行界面展示 : 

3. 警告框控件 (UIAlertView) 示例代码

(1) 相关 API 简介 

相关 API 简介 : 

-- 设置 警告提示框 风格 : 

[objc]  view plain copy

1. //设置提示框的风格 账号密码输入  
2. alertView.alertViewStyle = UIAlertViewStyleLoginAndPasswordInput;  

-- 设置输入框键盘输入类型 : 

[objc]  view plain copy

1. //设置密码输入是数字键盘  
2. [alertView textFieldAtIndex:1].keyboardType = UIKeyboardTypeNumberPad;  

-- 获取指定索引的输入框 : 

[objc]  view plain copy

1. //获取账号输入文本框  
2. UITextField * userNameField = [alertView textFieldAtIndex:0];  

-- 生成警告提示框 : 

[objc]  view plain copy

1. //创建一个带 两个按钮的 提示框 确定 取消  
2. UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"登录" message:@"输入用户名密码" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil nil];  

-- 显示警告提示框 : 

[objc]  view plain copy

1. //显示警告提示框  
2. [alertView show];  

(2) 示例代码

示例代码 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  TextFieldUIAlertView  
4. //  
5. //  Created by octopus on 15-12-17.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController <UIAlertViewDelegate>  
12. - (IBAction)click:(id)sender;  
13.   
14. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  TextFieldUIAlertView  
4. //  
5. //  Created by octopus on 15-12-17.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. - (void)viewDidLoad  
18. {  
19.     [super viewDidLoad];  
20.     // Do any additional setup after loading the view, typically from a nib.  
21. }  
22.   
23. - (void)didReceiveMemoryWarning  
24. {  
25.     [super didReceiveMemoryWarning];  
26.     // Dispose of any resources that can be recreated.  
27. }  
28.   
29. - (IBAction)click:(id)sender {  
30.     //创建一个带 两个按钮的 提示框 确定 取消  
31.     UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"登录" message:@"输入用户名密码" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil nil];  
32.       
33.     //设置提示框的风格 账号密码输入  
34.     alertView.alertViewStyle = UIAlertViewStyleLoginAndPasswordInput;  
35.     //设置密码输入是数字键盘  
36.     [alertView textFieldAtIndex:1].keyboardType = UIKeyboardTypeNumberPad;  
37.     //显示警告提示框  
38.     [alertView show];  
39. }  
40.   
41. - (void) alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{  
42.     if(buttonIndex == 1){  
43.         //获取账号输入文本框  
44.         UITextField * userNameField = [alertView textFieldAtIndex:0];  
45.         //获取密码输入文本框  
46.         UITextField * passwordField = [alertView textFieldAtIndex:1];  
47.         //生成 一个 包含账号 密码 输入的字符串  
48.         NSString * content = [NSString stringWithFormat:@"用户名为 : %@, 密码为 : %@", userNameField.text, passwordField.text];  
49.         //生成警告提示框  
50.         UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"标题" message:content delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil nil];  
51.         //显示警告提示框  
52.         [alertView show];  
53.     }  
54.       
55. }  
56.   
57. - (void) willPresentAlertView:(UIAlertView *)alertView{  
58.     //遍历所有的 UIView 集合  
59.     for(UIView * view in alertView.subviews){  
60.         //如果类型是 UILabel  
61.         if([view isKindOfClass:[UILabel class]]){  
62.             //获取 UILabel 控件  
63.             UILabel * label = (UILabel *) view;  
64.             //设置 UILabel 控件右对齐  
65.             label.textAlignment = UITextAlignmentRight;  
66.         }  
67.     }  
68. }  
69.   
70. @end  

-- 界面展示效果 : 

五. UIActionSheet 控件

1. UIActionSheet 简介

(1) UIActionSheet 作用

UIActionSheet 作用 : 该控件是显示在界面底部的按钮列表, 该控件 有 一个标题 和 多个按钮;

(2) UIActionSheet 按钮

UIActionSheet 固定按钮 : 

-- 取消按钮 : 灰色背景, 主要用于取消该 UIActionSheet 控件显示;

-- 销毁按钮 : 红色背景, 用于删除某记录时, 使用该按钮确认销毁;

(3) UIActionSheet 风格

UIActionSheet 支持风格 : 

-- UIActionSheetStyleDefault : 灰色背景上显示白色文字;

-- UIActionSheetStyleBlackTranselucent : 透明黑色背景上显示白色文字;

-- UIActionSheetBlackOpaque : 纯黑的背景上显示白色文字;

2. UIActionSheet 示例代码

UIActionSheet 示例代码 : 

-- 界面设计文件 : 

-- OCViewController.h : 

[objc]  view plain copy

1. //  
2. //  OCViewController.h  
3. //  UIActionSheet  
4. //  
5. //  Created by octopus on 15-12-17.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10.   
11. @interface OCViewController : UIViewController <UIActionSheetDelegate>  
12. - (IBAction)click:(id)sender;  
13.   
14. @end  

-- OCViewController.m : 

[objc]  view plain copy

1. //  
2. //  OCViewController.m  
3. //  UIActionSheet  
4. //  
5. //  Created by octopus on 15-12-17.  
6. //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
7. //  
8.   
9. #import "OCViewController.h"  
10.   
11. @interface OCViewController ()  
12.   
13. @end  
14.   
15. @implementation OCViewController  
16.   
17. - (void)viewDidLoad  
18. {  
19.     [super viewDidLoad];  
20.     // Do any additional setup after loading the view, typically from a nib.  
21. }  
22.   
23. - (void)didReceiveMemoryWarning  
24. {  
25.     [super didReceiveMemoryWarning];  
26.     // Dispose of any resources that can be recreated.  
27. }  
28.   
29. - (IBAction)click:(id)sender {  
30.     UIActionSheet * actionSheet = [[UIActionSheet alloc] initWithTitle:@"是否删除" delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:@"确定" otherButtonTitles: @"按钮一", @"按钮二", nil nil];  
31.     actionSheet.actionSheetStyle = UIActionSheetStyleAutomatic;  
32.     [actionSheet showInView:self.view];  
33. }  
34.   
35. - (void) actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{  
36.     UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"提示" message:[NSString stringWithFormat : @"点击了第 %d 个按钮", buttonIndex] delegate:nil cancelButtonTitle:@"取消" otherButtonTitles: nil nil];  
37.     [alertView show];  
38. }  
39. @end  

-- 运行界面展示 : 

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