【IOS 开发】基本 UI 控件详解 (UISegmentedControl | UIImageView | UIProgressView | UISlider

本文主要是介绍【IOS 开发】基本 UI 控件详解 (UISegmentedControl | UIImageView | UIProgressView | UISlider | UIAlertView )，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转载出处：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  
 - (IBAction)segmentControl:(id)sender {  
     int index = [sender selectedSegmentIndex];  
       
     switch (index) {  
         case 0:  
             self.baseView.backgroundColor = [UIColor whiteColor];  
             break;  
         case 1:  
             self.baseView.backgroundColor = [UIColor blackColor];  
             break;  
         case 2:  
             self.view.backgroundColor = [UIColor greenColor];  
             break;  
         case 3:  
             self.view.backgroundColor = [UIColor blueColor];  
             break;  
               
         default:  
             break;  
     }  
 }  

(3) 代码示例

代码示例 :

-- OCViewController.h :

[objc]  view plain copy  
 //  
 //  OCViewController.h  
 //  UISegmentedControl  
 //  
 //  Created by octopus on 15-12-4.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController  
 //背景 UIView  
 @property (strong, nonatomic) IBOutlet UIView *baseView;  
 - (IBAction)segmentControl:(id)sender;  
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UISegmentedControl  
 //  
 //  Created by octopus on 15-12-4.  
 //  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)segmentControl:(id)sender {  
     int index = [sender selectedSegmentIndex];  
       
     switch (index) {  
         case 0:  
             self.baseView.backgroundColor = [UIColor whiteColor];  
             break;  
         case 1:  
             self.baseView.backgroundColor = [UIColor blackColor];  
             break;  
         case 2:  
             self.view.backgroundColor = [UIColor greenColor];  
             break;  
         case 3:  
             self.view.backgroundColor = [UIColor blueColor];  
             break;  
               
         default:  
             break;  
     }  
 }  
 @end  

-- 界面展示 :

3. 动态增加删除分段

(1) 主要 API 简介

插入删除分段 :

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

[objc]  view plain copy  
 [self.segmentControl insertSegmentWithTitle:tittle atIndex:count animated:YES];  

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

[objc]  view plain copy  
 [self.segmentControl removeSegmentAtIndex:count - 1 animated:YES];  

(2) 源码示例

源码示例 :

-- 界面设计文件 :

-- OCViewController.h :

[objc]  view plain copy  
 //  
 //  OCViewController.h  
 //  UISegmentedControl  
 //  
 //  Created by octopus on 15-12-4.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController  
 //背景 UIView  
 @property (strong, nonatomic) IBOutlet UIView *baseView;  
 //分段控件  
 @property (strong, nonatomic) IBOutlet UISegmentedControl *segmentControl;  
 //单行文本  
 @property (strong, nonatomic) IBOutlet UITextField *textField;  
   
 //分段控件方法  
 - (IBAction)segmentControl:(id)sender;  
 //点击背景控件方法  
 - (IBAction)clickBackGround:(id)sender;  
   
 //添加分段控件  
 - (IBAction)addSegment:(id)sender;  
 //删除分段控件  
 - (IBAction)minusSegment:(id)sender;  
   
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UISegmentedControl  
 //  
 //  Created by octopus on 15-12-4.  
 //  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)segmentControl:(id)sender {  
     int index = [sender selectedSegmentIndex];  
       
     switch (index) {  
         case 0:  
             self.baseView.backgroundColor = [UIColor whiteColor];  
             break;  
         case 1:  
             self.baseView.backgroundColor = [UIColor blackColor];  
             break;  
         case 2:  
             self.view.backgroundColor = [UIColor greenColor];  
             break;  
         case 3:  
             self.view.backgroundColor = [UIColor blueColor];  
             break;  
               
         default:  
             break;  
     }  
 }  
   
 - (IBAction)clickBackGround:(id)sender {  
     // 点击背景 取消虚拟键盘  
     [self.textField resignFirstResponder];  
 }  
   
 //添加分段控件  
 - (IBAction)addSegment:(id)sender {  
     NSUInteger count = self.segmentControl.numberOfSegments;  
       
     NSString * tittle = self.textField.text;  
     if ([tittle length] > 0) {  
         [self.segmentControl insertSegmentWithTitle:tittle atIndex:count animated:YES];  
         self.textField.text = @"";  
     }  
 }  
   
 //删除分段控件  
 - (IBAction)minusSegment:(id)sender {  
     NSUInteger count = self.segmentControl.numberOfSegments;  
     [self.segmentControl removeSegmentAtIndex:count - 1 animated:YES];  
 }  
 @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  
 //设置大图片可以相应手势点击  
 self.bigPicture.userInteractionEnabled = YES;  

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

[objc]  view plain copy  
 UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(click:)];  

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

[objc]  view plain copy  
 [self.bigPicture addGestureRecognizer:tap];  

-- 设置 UIImageView 图片 :

[objc]  view plain copy  
 self.bigPicture.image = [UIImage imageNamed:[images objectAtIndex:currentImage%images.count]];  

-- 设置透明度 :

[objc]  view plain copy  
 self.bigPicture.alpha = alpha;  

-- 获取手指触摸位置 :

[objc]  view plain copy  
 //获取手指触摸的位置  
 CGPoint point = [recognizer locationInView:self.bigPicture];  

-- 获取图片对应的 CGImageRef :

[objc]  view plain copy  
 //获取原图对应的 CGImageRef  
 CGImageRef imageRef = [srcImage CGImage];  

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

[objc]  view plain copy  
 //创建新的图片  
 CGImageRef newImageRef = CGImageCreateWithImageInRect(imageRef, CGRectMake(x, y, 140, 140));  

-- 根据 CGImageRef 创建 UIImage :

[objc]  view plain copy  
 [UIImage imageWithCGImage:newImageRef];  

(2) 代码示例

代码示例 :

-- 界面设计文件 :

-- OCViewController.h :

[objc]  view plain copy  
 //  
 //  OCViewController.h  
 //  UIImageView  
 //  
 //  Created by octopus on 15-12-7.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController  
   
 //大图片的 UIImageView  
 @property (strong, nonatomic) IBOutlet UIImageView *bigPicture;  
 //小图片的 UIImageView  
 @property (strong, nonatomic) IBOutlet UIImageView *smallPicture;  
   
 //UISegmentedControl 的方法  
 - (IBAction)segmentControl:(id)sender;  
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UIImageView  
 //  
 //  Created by octopus on 15-12-7.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import "OCViewController.h"  
   
 @interface OCViewController ()  
   
 @end  
   
 @implementation OCViewController  
   
 //图片集合  
 NSArray * images;  
 //当前显示的图片  
 int currentImage;  
 //透明度  
 CGFloat alpha;  
   
 - (void)viewDidLoad  
 {  
     [super viewDidLoad];  
     // Do any additional setup after loading the view, typically from a nib.  
       
     //初始化变量  
     currentImage = 0;  
     alpha = 1.0;  
     images = [NSArray arrayWithObjects:@"1.png" , @"2.jpg", @"3.png", nil nil];  
       
     //设置大图片可以相应手势点击  
     self.bigPicture.userInteractionEnabled = YES;  
       
     UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(click:)];  
       
     [self.bigPicture addGestureRecognizer:tap];  
       
 }  
   
 - (void)didReceiveMemoryWarning  
 {  
     [super didReceiveMemoryWarning];  
     // Dispose of any resources that can be recreated.  
 }  
   
 - (IBAction)segmentControl:(id)sender {  
     int index = [sender selectedSegmentIndex];  
     switch (index) {  
         case 0: //透明度+  
             alpha += 0.1;  
             if(alpha > 1.0){  
                 alpha = 1.0;  
             }  
             self.bigPicture.alpha = alpha;  
             break;  
         case 1: //透明度-  
             NSLog(@"1");  
             alpha -= 0.1;  
             if(alpha < 0){  
                 alpha = 0;  
             }  
             self.bigPicture.alpha = alpha;  
             break;  
         case 2: //下一张图片  
             NSLog(@"2");  
             self.bigPicture.image = [UIImage imageNamed:[images objectAtIndex:currentImage%images.count]];  
             currentImage ++;  
             break;  
               
         default:  
             break;  
     }  
 }  
   
 - (void) click : (UIGestureRecognizer * ) recognizer{  
     //获取正在显示的图片  
     UIImage * srcImage = self.bigPicture.image;  
     //获取手指触摸的位置  
     CGPoint point = [recognizer locationInView:self.bigPicture];  
     //获取原图对应的 CGImageRef  
     CGImageRef imageRef = [srcImage CGImage];  
     //获取缩放比例  
     CGFloat scale = srcImage.size.width / 320;  
     //获取图片位置  
     CGFloat x = point.x * scale;  
     CGFloat y = point.y * scale;  
     //验证 x y 坐标, 不要超出边界  
     if (x + 120 > srcImage.size.width - 140) {  
         x = srcImage.size.width - 140;  
     }  
       
     if (y + 120 > srcImage.size.height) {  
         y = srcImage.size.height - 140;  
     }  
       
     //创建新的图片  
     CGImageRef newImageRef = CGImageCreateWithImageInRect(imageRef, CGRectMake(x, y, 140, 140));  
     self.smallPicture.image = [UIImage imageWithCGImage:newImageRef];  
       
 }  
 @end  

-- 界面展示 :

3. 幻灯片放映

(1) API 简介

幻灯片播放相关 API :

-- 设置 UIImage 数组给 UIImageView :

[objc]  view plain copy  
 images = [NSArray arrayWithObjects:  
           [UIImage imageNamed:@"1.png"],  
           [UIImage imageNamed:@"2.jpg"],  
           [UIImage imageNamed:@"3.png"],  
           nil nil];  
 self.imageView.animationImages = images;  

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

[objc]  view plain copy  
 //设置 UIImageView 动画间隔  
 self.imageView.animationDuration = 5;  
 //设置动画重复次数  
 self.imageView.animationRepeatCount = 0xFFFF;  

-- 启动动画 :

[objc]  view plain copy  
 //启动动画  
 [self.imageView startAnimating];  

(2) 代码示例

代码示例 :

-- 界面设计文件 :

-- OCViewController.h :

[objc]  view plain copy  
 //  
 //  OCViewController.h  
 //  UIimageView2  
 //  
 //  Created by octopus on 15-12-9.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController  
 @property (strong, nonatomic) IBOutlet UIImageView *imageView;  
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UIimageView2  
 //  
 //  Created by octopus on 15-12-9.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import "OCViewController.h"  
   
 @interface OCViewController ()  
   
 @end  
   
 @implementation OCViewController  
   
 NSArray * images;  
   
 - (void)viewDidLoad  
 {  
     [super viewDidLoad];  
     // Do any additional setup after loading the view, typically from a nib.  
       
     //创建 UIImageView 集合  
     images = [NSArray arrayWithObjects:  
               [UIImage imageNamed:@"1.png"],  
               [UIImage imageNamed:@"2.jpg"],  
               [UIImage imageNamed:@"3.png"],  
               nil nil];  
     //设置集合给 UIImageView 的动画  
     self.imageView.animationImages = images;  
     //设置 UIImageView 动画间隔  
     self.imageView.animationDuration = 5;  
     //设置动画重复次数  
     self.imageView.animationRepeatCount = 0xFFFF;  
     //启动动画  
     [self.imageView startAnimating];  
       
 }  
   
 - (void)didReceiveMemoryWarning  
 {  
     [super didReceiveMemoryWarning];  
     // Dispose of any resources that can be recreated.  
 }  
   
 @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  
 UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  

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

[objc]  view plain copy  
 //将可拉伸图片设置给进度条  
 self.progress3.progressImage = progressImage;  
 self.progress3.trackImage = trackImage;  

-- 创建定时器 :

[objc]  view plain copy  
 //定时器  
 timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(doProgress) userInfo:nil repeats:YES];  

(2) 代码示例

代码示例 :

-- 界面设计文件 :

-- OCViewController.h :

[objc]  view plain copy  
 //  
 //  OCViewController.h  
 //  UIProgressView  
 //  
 //  Created by octopus on 15-12-10.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController  
   
 @property (strong, nonatomic) IBOutlet UIProgressView *progress1;  
 @property (strong, nonatomic) IBOutlet UIProgressView *progress2;  
 @property (strong, nonatomic) IBOutlet UIProgressView *progress3;  
 - (IBAction)click:(id)sender;  
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UIProgressView  
 //  
 //  Created by octopus on 15-12-10.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import "OCViewController.h"  
   
 @interface OCViewController ()  
   
 @end  
   
 @implementation OCViewController  
   
 //定时器  
 NSTimer * timer;  
 //进度条进度  
 CGFloat progress;  
   
 /* 
     CGFloat : 是 float 类型, 在 IOS 中定义了下面的类型  
     -- 32 位 : typedef float CGFloat;// 32-bit 
     -- 64 位 : typedef double CGFloat;// 64-bit 
   
     CGPoint : 二维坐标点; 
     -- 定义代码 :  
         struct CGPoint { 
             CGFloat x; 
             CGFloat y; 
         }; 
         typedef struct CGPoint CGPoint; 
   
     CGSize : 矩形的宽度和高度; 
     -- 定义代码 :  
         struct CGSize { 
             CGFloat width; 
             CGFloat height; 
         }; 
         typedef struct CGSize CGSize; 
   
     CGRect : 矩形的位置和大小; 
     -- 定义代码 :  
         struct CGRect { 
             CGPoint origin; 
             CGSize size; 
         }; 
         typedef struct CGRect CGRect; 
  */  
   
 - (void)viewDidLoad  
 {  
     [super viewDidLoad];  
     // Do any additional setup after loading the view, typically from a nib.  
       
     //创建 可拉伸的图片, 平铺样式  
     UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
     UIImage * progressImage = [[UIImage imageNamed:@"Snip20151210_140.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
       
     //将可拉伸图片设置给进度条  
     self.progress3.progressImage = progressImage;  
     self.progress3.trackImage = trackImage;  
       
 }  
   
 - (void)didReceiveMemoryWarning  
 {  
     [super didReceiveMemoryWarning];  
     // Dispose of any resources that can be recreated.  
 }  
   
 - (IBAction)click:(id)sender {  
     //进度条  
     progress = 0;  
       
     //定时器  
     timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(doProgress) userInfo:nil repeats:YES];  
       
 }  
   
 - (void) doProgress{  
     progress += 0.1;  
     if(progress > 1.0){  
         [timer invalidate];  
     }else{  
         [self.progress1 setProgress:progress animated:YES];  
         [self.progress2 setProgress:progress animated:YES];  
         [self.progress3 setProgress:progress animated:YES];  
     }  
       
       
 }  
   
 @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  
 //  
 //  OCViewController.h  
 //  UIProgressView  
 //  
 //  Created by octopus on 15-12-10.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController  
   
 @property (strong, nonatomic) IBOutlet UIProgressView *progress1;  
 @property (strong, nonatomic) IBOutlet UIProgressView *progress2;  
 @property (strong, nonatomic) IBOutlet UIProgressView *progress3;  
   
   
 @property (strong, nonatomic) IBOutletCollection(UIActivityIndicatorView) NSArray *IndicatorCollection;  
 - (IBAction)start:(id)sender;  
 - (IBAction)end:(id)sender;  
   
   
 - (IBAction)click:(id)sender;  
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UIProgressView  
 //  
 //  Created by octopus on 15-12-10.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import "OCViewController.h"  
   
 @interface OCViewController ()  
   
 @end  
   
 @implementation OCViewController  
   
 //定时器  
 NSTimer * timer;  
 //进度条进度  
 CGFloat progress;  
   
 /* 
     CGFloat : 是 float 类型, 在 IOS 中定义了下面的类型  
     -- 32 位 : typedef float CGFloat;// 32-bit 
     -- 64 位 : typedef double CGFloat;// 64-bit 
   
     CGPoint : 二维坐标点; 
     -- 定义代码 :  
         struct CGPoint { 
             CGFloat x; 
             CGFloat y; 
         }; 
         typedef struct CGPoint CGPoint; 
   
     CGSize : 矩形的宽度和高度; 
     -- 定义代码 :  
         struct CGSize { 
             CGFloat width; 
             CGFloat height; 
         }; 
         typedef struct CGSize CGSize; 
   
     CGRect : 矩形的位置和大小; 
     -- 定义代码 :  
         struct CGRect { 
             CGPoint origin; 
             CGSize size; 
         }; 
         typedef struct CGRect CGRect; 
  */  
   
 - (void)viewDidLoad  
 {  
     [super viewDidLoad];  
     // Do any additional setup after loading the view, typically from a nib.  
       
     //创建 可拉伸的图片, 平铺样式  
     UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
     UIImage * progressImage = [[UIImage imageNamed:@"Snip20151210_140.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];  
       
     //将可拉伸图片设置给进度条  
     self.progress3.progressImage = progressImage;  
     self.progress3.trackImage = trackImage;  
       
 }  
   
 - (void)didReceiveMemoryWarning  
 {  
     [super didReceiveMemoryWarning];  
     // Dispose of any resources that can be recreated.  
 }  
   
 - (IBAction)start:(id)sender {  
     for(int i = 0; i < 4; i ++){  
         //从集合中获取 UIActivityIndicatorView 控件并开启动画  
         [[self.IndicatorCollection objectAtIndex:i] startAnimating];  
     }  
 }  
   
 - (IBAction)end:(id)sender {  
     for(int i = 0; i < 4; i ++){  
         //从集合中获取 UIActivityIndicatorView 控件并结束动画  
         [[self.IndicatorCollection objectAtIndex:i] stopAnimating];  
     }  
 }  
   
 - (IBAction)click:(id)sender {  
     //进度条  
     progress = 0;  
       
     //定时器  
     timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(doProgress) userInfo:nil repeats:YES];  
       
 }  
   
 - (void) doProgress{  
     progress += 0.1;  
     if(progress > 1.0){  
         [timer invalidate];  
     }else{  
         [self.progress1 setProgress:progress animated:YES];  
         [self.progress2 setProgress:progress animated:YES];  
         [self.progress3 setProgress:progress animated:YES];  
     }  
       
       
 }  
   
 @end  

-- 页面展示效果 :

五. 拖动条控件 (UISlider)

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

属性截图 :

(1) UISlider 图片设置方法

UISlider 设置图片方法 :

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

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

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

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

代码示例 :

-- 界面设计文件 :

-- OCViewController.h :

[objc]  view plain copy  
 //  
 //  OCViewController.h  
 //  UISlider  
 //  
 //  Created by octopus on 15-12-14.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController  
 @property (strong, nonatomic) IBOutlet UISlider *slid;  
 @property (strong, nonatomic) IBOutlet UIImageView *image;  
 - (IBAction)valueChange:(id)sender;  
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UISlider  
 //  
 //  Created by octopus on 15-12-14.  
 //  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.  
       
     [self.image setAlpha: 0];  
 }  
   
 - (void)didReceiveMemoryWarning  
 {  
     [super didReceiveMemoryWarning];  
     // Dispose of any resources that can be recreated.  
 }  
   
 - (IBAction)valueChange:(id)sender {  
     [self.image setAlpha: self.slid.value];  
 }  
 @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  
 [[UIAlertView alloc] initWithTitle:<#(NSString *)#> message:<#(NSString *)#> delegate:<#(id)#> cancelButtonTitle:<#(NSString *)#> otherButtonTitles:<#(NSString *), ...#>, nil nil];  

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

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

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

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

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

-- 真实代码 :

[objc]  view plain copy  
 /* 
     创建 UIAlertView 控件, 传入参数 标题 内容 委托对象 取消按钮 其它按钮 
  */  
 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  
 //  
 //  OCViewController.h  
 //  UIAlertView  
 //  
 //  Created by octopus on 15-12-14.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController <UIAlertViewDelegate>  
 //按钮的 IBAction 方法  
 - (IBAction)click:(id)sender;  
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UIAlertView  
 //  
 //  Created by octopus on 15-12-14.  
 //  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.  
       
 }  
   
 //点击按钮弹出 UIAlertView 对话框  
 - (IBAction)click:(id)sender {  
     /* 
         创建 UIAlertView 控件, 传入参数 标题 内容 委托对象 取消按钮 其它按钮 
      */  
     UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"对话框标题" message:@"对话框内容" delegate:self cancelButtonTitle:@"取消显示" otherButtonTitles:@"按钮1", @"按钮2", @"按钮3", @"按钮4", nil nil];  
     //调用该方法显示 UIAlertView 控件  
     [alert show];  
 }  
   
 //实现的 UIAlertViewDelegate 协议中的方法  
 - (void) alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{  
     NSString * msg = [NSString stringWithFormat:@"点击了按钮 %d", buttonIndex];  
     UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"弹出框" message: msg delegate:nil cancelButtonTitle:@"取消" otherButtonTitles: nil nil];  
     [alert show];  
       
       
 }  
 @end  

-- 运行界面展示 :

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

(1) 相关 API 简介

相关 API 简介 :

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

[objc]  view plain copy  
 //设置提示框的风格 账号密码输入  
 alertView.alertViewStyle = UIAlertViewStyleLoginAndPasswordInput;  

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

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

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

[objc]  view plain copy  
 //获取账号输入文本框  
 UITextField * userNameField = [alertView textFieldAtIndex:0];  

-- 生成警告提示框 :

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

-- 显示警告提示框 :

[objc]  view plain copy  
 //显示警告提示框  
 [alertView show];  

(2) 示例代码

示例代码 :

-- 界面设计文件 :

-- OCViewController.h :

[objc]  view plain copy  
 //  
 //  OCViewController.h  
 //  TextFieldUIAlertView  
 //  
 //  Created by octopus on 15-12-17.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController <UIAlertViewDelegate>  
 - (IBAction)click:(id)sender;  
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  TextFieldUIAlertView  
 //  
 //  Created by octopus on 15-12-17.  
 //  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 {  
     //创建一个带 两个按钮的 提示框 确定 取消  
     UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"登录" message:@"输入用户名密码" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil nil];  
       
     //设置提示框的风格 账号密码输入  
     alertView.alertViewStyle = UIAlertViewStyleLoginAndPasswordInput;  
     //设置密码输入是数字键盘  
     [alertView textFieldAtIndex:1].keyboardType = UIKeyboardTypeNumberPad;  
     //显示警告提示框  
     [alertView show];  
 }  
   
 - (void) alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{  
     if(buttonIndex == 1){  
         //获取账号输入文本框  
         UITextField * userNameField = [alertView textFieldAtIndex:0];  
         //获取密码输入文本框  
         UITextField * passwordField = [alertView textFieldAtIndex:1];  
         //生成 一个 包含账号 密码 输入的字符串  
         NSString * content = [NSString stringWithFormat:@"用户名为 : %@, 密码为 : %@", userNameField.text, passwordField.text];  
         //生成警告提示框  
         UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"标题" message:content delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil nil];  
         //显示警告提示框  
         [alertView show];  
     }  
       
 }  
   
 - (void) willPresentAlertView:(UIAlertView *)alertView{  
     //遍历所有的 UIView 集合  
     for(UIView * view in alertView.subviews){  
         //如果类型是 UILabel  
         if([view isKindOfClass:[UILabel class]]){  
             //获取 UILabel 控件  
             UILabel * label = (UILabel *) view;  
             //设置 UILabel 控件右对齐  
             label.textAlignment = UITextAlignmentRight;  
         }  
     }  
 }  
   
 @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  
 //  
 //  OCViewController.h  
 //  UIActionSheet  
 //  
 //  Created by octopus on 15-12-17.  
 //  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
   
 @interface OCViewController : UIViewController <UIActionSheetDelegate>  
 - (IBAction)click:(id)sender;  
   
 @end  

-- OCViewController.m :

[objc]  view plain copy  
 //  
 //  OCViewController.m  
 //  UIActionSheet  
 //  
 //  Created by octopus on 15-12-17.  
 //  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 {  
     UIActionSheet * actionSheet = [[UIActionSheet alloc] initWithTitle:@"是否删除" delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:@"确定" otherButtonTitles: @"按钮一", @"按钮二", nil nil];  
     actionSheet.actionSheetStyle = UIActionSheetStyleAutomatic;  
     [actionSheet showInView:self.view];  
 }  
   
 - (void) actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{  
     UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"提示" message:[NSString stringWithFormat : @"点击了第 %d 个按钮", buttonIndex] delegate:nil cancelButtonTitle:@"取消" otherButtonTitles: nil nil];  
     [alertView show];  
 }  
 @end  

-- 运行界面展示 :

这篇关于【IOS 开发】基本 UI 控件详解 (UISegmentedControl | UIImageView | UIProgressView | UISlider | UIAlertView )的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

【IOS 开发】基本 UI 控件详解 (UISegmentedControl | UIImageView | UIProgressView | UISlider | UIAlertView )

转载出处：http://blog.csdn.net/shulianghan/article/details/50163725;

一. 分段控件 (UISegmentedControl)

1. UISegmentedControl 控件属性

(1) Style 属性

(2) State 属性

(3) Tint 属性

(4) Segments 属性

(5) Segment 属性

(6) Tittle 属性

(7) Image 属性

(8) Behavior 属性

2. 使用 UISegmentedControl 改变背景颜色

(1) 设置 UISegmentedControl 属性

(2) 设置 UISegmentedControl 响应方法

(3) 代码示例

3. 动态增加删除分段

(1) 主要 API 简介

(2) 源码示例

二. 图像控件 (UIImageView)

1. UIImageView 控件属性

(1) UIImageView 简介

(2) 图片显示属性

(3) 动画显示方法

(4) UIImageView 缩放属性

2. 图片浏览器示例

(1) API 简介

(2) 代码示例

3. 幻灯片放映

(1) API 简介

(2) 代码示例

三. 进度条控件 (UIProgressView)

1. UIProgressView 控件属性

(1) Style 属性

(2) progress 属性

(3) Progress Tint 属性

(4) Track Tint 属性

(5) progressImage 属性

(6) trackImage 属性

2. 可拉伸图片

(1) 可拉伸图片用法

(2) 可拉伸图片创建

3. 定制进度条示例

(1) 相关 API 简介

(2) 代码示例

四. 进度环控件 (UIActivityIndicatorView)

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

(1) Style 属性

(2) Color 属性

(3) Behavior 属性

(4) UIActivityIndicatorView 大小

(5) 控制方法

2. UIActivityIndicatorView 代码示例

(1) 创建 IBOutletConnection

(2) 代码示例

五. 拖动条控件 (UISlider)

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

(1) UISlider 图片设置方法

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

四. 警告框控件 (UIAlertView)

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

(1) UIAlertView 创建流程

(2) UIAlertViewDelegate 协议方法

(3) UIAlertView 输入框风格设置

2. 简单的对话框示例

(1) 创建 UIAlertView API

(2) 代码示例

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

(1) 相关 API 简介

(2) 示例代码

五. UIActionSheet 控件

1. UIActionSheet 简介

(1) UIActionSheet 作用

(2) UIActionSheet 按钮

(3) UIActionSheet 风格

2. UIActionSheet 示例代码

相关文章