首页 > 代码库 > 0821基本控件实例1 ——图片浏览器
0821基本控件实例1 ——图片浏览器
一、项目需求——照片浏览器
二、开发步骤
1. 新建项目
2. 搭建UI界面
3. 建立IBOutlet,以便代码能够处理界面元素
4. 建立IBAction,以便界面上某些事件发生时执行方法
5. 代码实现
提示:为了便于理解,开发过程分两个步骤完成
三、演练说明
1、本节使用到的控件包括:UILabel,UIImageView,UISwitch,UIStepper和UISlider五个基本控件,除了第一个UILabel大家已经接触过之外,其他的四个控件都是第一次接触
2、开发过程中首先通过两张图片的交替,演示控件的基本使用
3、待基本控件的使用基本熟悉之后,再引入新的话题:数据模型
四、UIImageView——图像视图
作用:专门用来显示图片的控件
1. 设置图像
[self.imageView setImage:[UIImage imageNamed:@"abc.png"]];
2. 设置显示模式
–设置图片居中显示,并且保持原来宽高比
imageView.contentMode = UIViewContentModeScaleAspectFit;
五、UISlider——滑块控件1
作用:用来显示进度值,并且可以手动修改进度值
1. 基本设置
// 设置滑块最大值
[slider setMaximumValue:15];
// 设置滑块最小值
[slider setMinimumValue:0];
// 设置滑块当前数值
[slider setValue:5];
2. 事件监听
监听UISlider的进度值改变,应该用Value Changed事件
通过代码为UISlider添加监听器:
[slider addTarget:self action:@selector(sliderChange:) forControlEvents:UIControlEventValueChanged];
当UISlider的进度值发生改变时,会自动调用self的sliderChange:方法,并且将UISlider作为第一个参数传入
- (void) sliderChange:(UISlider *)slider
{
}
六、UISwitch——开关控件
作用:开关
1. 设置On或者Off
[mySwitch setOn:YES];
2. 判断当前状态
BOOL state = [mySwitch isOn];
3. 事件监听
–监听UISwitch的状态改变,应该用Value Changed事件(参照UISlider的使用)
七、UIStepper——计数器控件
作用:计数
1. 基本设置与滑块控件类似
2. 与滑块控件的区别:
–每按一次减号,value就会自动减去一定的数值(数值大小由stepValue决定)
–每按一次加号,value就会自动增加一定的数值(数值大小由stepValue决定)
–
3. 事件监听
–监听UISwitch的状态改变,应该用Value Changed事件(参照UISlider的使用)
八、UISegmentControl——选项卡控件
作用:同一时刻只能选中一个标签
1. 基本设置
NSArray *items = @[@"2列", @"3列", @"4列"];
UISegmentedControl *control = [[UISegmentedControl alloc] initWithItems:items];
2. 获得当前被选中的标签位置
int index = control.selectedSegmentIndex;
3. 事件监听
–监听UISegmentControl的状态改变,应该用Value Changed事件(参照UISlider的使用)
九、扩充:UIImageView的序列帧动画
UIImageView可以让一系列的图片在特定的时间内按顺序显示
属性说明:
–animationImages:要显示的一组图片序列
–animationDuration:完整地显示所有图片所需的时间
–animationRepeatCount:动画的执行次数(默认为0,代表无限循环)
相关方法:
- (void)startAnimating; 开始动画
- (void)stopAnimating; 停止动画
- (BOOL)isAnimating; 是否正在运行动画
代码段1:
// // ViewController.m // -照片查看器 // // Created by apple on 13-8-22. // Copyright (c) 2013年 apple. All rights reserved. // #import "ViewController.h" // 在.m文件中定义的属性、成员变量、以及方法,只能在当前类中访问,不开放出去 // 面向对象程序设计的原则:开放封闭原则,开闭原则,对内部开放,对外部封闭 @interface ViewController () { // NS后面没有Mutable字样的类型,是不可变类型,创建之后不能修改 // 相反,有Mutable字样的类型,是可变类型,创建之后仍然可以修改 // NSArray => 数组 // NSMutableArray => 可变数组 // NSString => 字符串 // NSMutableString => 可变字符串 // NSDictionary => 字典 // NSMutableDictionary => 可变字典 // NSSet => 数据集 // NSMutableSet => 可变数据集 // 当前显示的照片索引 NSInteger _photoIndex; } // 图像数组 @property (strong, nonatomic) NSMutableArray *imageData; @end @implementation ViewController /** 用数据字典、数组的方式来同步信息 */ - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 需求:我们需要一个连续的“图像序列”,以保证界面上的控件能够在图像之间切换 // 图像序列=>定义成员变量的数组 // 实例化图像数组 _imageData =http://www.mamicode.com/ [NSMutableArray array]; // 设置图像视图的图像 for (int i = 0; i < 16; i++) { NSString *fileName = [NSString stringWithFormat:@"%d.png", i]; UIImage *image = [UIImage imageNamed:fileName]; // 向图像数组添加内容 [_imageData addObject:image]; } [_imageView setImage:_imageData[0]]; _photoIndex = 0; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } #pragma mark - Actions #pragma mark 夜间模式 - (IBAction)nightMode:(id)sender { UISwitch *mySwitch = (UISwitch *)sender; // 开启夜间模式 if ([mySwitch isOn]) { [self.view setBackgroundColor:[UIColor grayColor]]; } else { // 关闭夜间模式 [self.view setBackgroundColor:[UIColor whiteColor]]; } } #pragma mark 计数器数值变化 - (IBAction)stepperChanged:(id)sender { UIStepper *myStepper = (UIStepper *)sender; NSLog(@"计数器数值 %f", [myStepper value]); NSInteger index = myStepper.value - 1; [_imageView setImage:_imageData[index]]; [_imageSlider setValue:(index + 1)]; } #pragma mark 滑块数值变化 - (IBAction)sliderChanged:(id)sender { // 注意:滑块控件是没有类似step之类的属性的!!! UISlider *mySlider = (UISlider *)sender; NSLog(@"滑块数值 %f", [mySlider value]); // 通过NSLog发现,在拖拽滑块的时候,图片会被重复设置 // 使用一个成员变量,记录当前显示的图像的索引数值,如果sender传过来得数值变化,再去修改图像 NSInteger index = mySlider.value - 1; if (index != _photoIndex) { [_imageView setImage:_imageData[index]]; _photoIndex = index; NSLog(@"设置照片了"); // 同步计数器控件数值 [_imageStepper setValue:(_photoIndex + 1)]; } // 滑块和计数器没有同步 } @end
代码段2:
// // ViewController.m // 序列帧动画 // // Created by apple on 13-8-22. // Copyright (c) 2013年 apple. All rights reserved. // #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self setDonghua:11 andButton:_zhaoyunImage]; } - (void)setDonghua:(NSInteger)count andButton:(UIImageView *)imageView { NSMutableArray *imagesList = [NSMutableArray array]; for (NSInteger i = 1; i < count; i++) { // 生成图像文件名 NSString *fileName = [NSString stringWithFormat:@"%d.png", i]; UIImage *image = [UIImage imageNamed:fileName]; // 把图像添加到数组 [imagesList addObject:image]; } [imageView setAnimationImages:imagesList]; // 2.2 设置动画播放的时长 [imageView setAnimationDuration:1.0]; // 2.4 设置动画播放次数 [imageView setAnimationRepeatCount:1]; // 2.3 开始动画 [imageView startAnimating]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end