首页 > 代码库 > 0821基本控件实例1 ——图片浏览器

0821基本控件实例1 ——图片浏览器

一、项目需求——照片浏览器

image

 

 

二、开发步骤

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;

image

 

五、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