一、项目需求——照片浏览器
二、开发步骤
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 = [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
0821基本控件实例1 ——图片浏览器,布布扣,bubuko.com