UIKit基础:11.利用UISlider-UISwitch-UIStepper-UIImageView创建美女图片浏览器

在前面, 我们使用一系列的UI控件, 做过一系列的例子练习, 之后我们也将会继续, 而现在我们来做一个美女图片浏览器, 这次我们使用的是storyboard来进行开发, 下面让我们一起来看看:

PS:程序中的图片来自百度, 版权属于百度.

首先我们要搭建storyboard的界面:

这里需要注意一下, 计数器控件要把Wrap勾上:

界面搭建好了之后, 我们需要关联控件的方法以及属性:

关联好之后, 我们来看看代码, 首先我们要设定两个成员变量, 一个是用来存储图片的可变数组, 一个是用来给滑动条使用的索引值:

@interface ViewController ()
{
    // 滑动条需要索引值
    NSUInteger _photoIndex;
}

// 存放图片的数组
@property (nonatomic, strong) NSMutableArray *imagesData;

@end

现在我们重点来看看实现的代码了, 我们先来看看夜间模式的开关:

- (IBAction)nightSwitch:(UISwitch *)sender
{
    // 设定动画
    [UIView animateWithDuration:0.5f animations:^{
        if (sender.on) {   // 判断开关是否开启, 如果开启就把背景色改成灰色
            NSLog(@"夜间模式开启");
            [self.view setBackgroundColor:[UIColor grayColor]];
        } else { // 如果开关关闭, 就把背景色改成白色
            NSLog(@"夜间模式关闭");
            [self.view setBackgroundColor:[UIColor whiteColor]];
        }
    }];
}

PS: 在UISwitch控件里, 有一个属性是专门用来判断开关是on还是off.

@property(nonatomic,getter=isOn) BOOL on;

写完夜间模式的代码后, 记得运行测试一下, 没有Bug之后再去进行下一步, 设置图片数组:

<span style="font-size:12px;">- (void)imageArray
{
    // 初始化数组对象
    _imagesData = [NSMutableArray array];
    
    for (int i = 0; i < 10; i++)
    {
        NSString *fileName = [NSString stringWithFormat:@"%d.jpg", i];
        UIImage *image = [UIImage imageNamed:fileName];
        
        [_imagesData addObject:image];
    }
    [_imageView setImage:_imagesData[0]];
    _photoIndex = 0;
}
</span>

然后再调用该方法:

- (void)viewDidLoad {
    [super viewDidLoad];
    [self imageArray];
}

PS:最后一句代码是默认程序一开始就是第0张图片

现在我们来看看计数器的方法:

- (IBAction)stepperChanged:(UIStepper *)sender
{
    NSUInteger index = sender.value;
    [_imageView setImage:_imagesData[index]];
    
    [_imageSlider setValue:index];
    
    NSLog(@"计数器数值:%f", [sender value]);
}

PS: 这里需要做一个强制转换, 因为valuew是double类型, 而我们设置的数组是unsigned long类型, 所以必须得转.

滑动条的方法:

- (IBAction)sliderChanged:(UISlider *)sender
{
    NSLog(@"滑块的数值:%f", [sender value]);
    
    NSUInteger index = sender.value;
    if (index != _photoIndex) {
        [_imageView setImage:_imagesData[index]];
        _photoIndex = index;
        NSLog(@"美女换了");
        [_imageStepper setValue:_photoIndex];
    }
}

PS: 这里的value同样要转换, 否则就没法存入.

进行到这里, 我们已经完成了百分之80%的开发了, 只剩下一个问题没有解决, 那就是图片和图片的标题没有同步, 下面我们需要去解决这个问题:

首先我们要去创建一个plist文件:

然后我们编辑一下plist文件:

在这里我们将要学习一个新的东西, 就是NSBundle, 这个是一个包函数, 在我们iOS程序开发中, 我们所有的应用程序都必须打包后才能上传, 我们打的包必须得有一个文件路径, 现在我们所需要的就是运用这个NSBundle把plist文件导入到我们的应用程序包里, 下面让我们来看看:

- (void)imagePlist
{
    // 1.获取主包
    NSBundle *bundle = [NSBundle mainBundle];
    // 2.获取plist文件的文件名
    NSString *path = [bundle pathForResource:@"images" ofType:@"plist"];
    // 3.把plist文件读取到数组中
    _imagesData = [NSMutableArray arrayWithContentsOfFile:path];

    // 4.取出数组中的第一个字典
    NSDictionary *dic = _imagesData[6];
    // 4.1取出图像名
    NSString *imageFile = dic[@"icon"];
    UIImage *image = [UIImage imageNamed:imageFile];
    [_imageView setImage:image];
    
    // 4.2设置图片的描述
    NSString *title = dic[@"title"];
    [_imageTitle setText:title];
}

我们来测试一下:

现在我们思考一下, 我们有三个地方需要使用刚刚那一堆代码, 在这样子的情况下, 我们最好把那些方法抽出来, 再另外的重写一个方法来调用, 这样子的方式我们称为代码重构:

- (void)resetPhotoInfoWithIndex:(NSUInteger)index
{
    // 1.取出数组中的第一个字典
    NSDictionary *dic = _imagesData[index];
    // 1.1取出图像名
    NSString *imageFile = dic[@"icon"];
    UIImage *image = [UIImage imageNamed:imageFile];
    [_imageView setImage:image];
    
    // 1.2设置图片的描述
    NSString *title = dic[@"title"];
    [_imageTitle setText:title];
}

现在我们把所有的代码更新一下:

- (void)imagePlist
{
    // 1.获取主包
    NSBundle *bundle = [NSBundle mainBundle];
    // 2.获取plist文件的文件名
    NSString *path = [bundle pathForResource:@"images" ofType:@"plist"];
    // 3.把plist文件读取到数组中
    _imagesData = [NSMutableArray arrayWithContentsOfFile:path];
    [self resetPhotoInfoWithIndex:0];
}

- (IBAction)stepperChanged:(UIStepper *)sender
{
    NSUInteger index = sender.value;
    
    [_imageSlider setValue:index];
    
    NSLog(@"计数器数值:%f", [sender value]);
    
    [self resetPhotoInfoWithIndex:index];
}

- (IBAction)sliderChanged:(UISlider *)sender
{
    NSLog(@"滑块的数值:%f", [sender value]);
    
    NSUInteger index = sender.value;
    if (index != _photoIndex) {
        _photoIndex = index;

        [self resetPhotoInfoWithIndex:index];
        
        NSLog(@"美女换了");
        [_imageStepper setValue:_photoIndex];
    }
}

这里需要说明一下重构代码的注意事项:

 1. 相同的【代码段】不要重复出现两次；

 2. 不要为了重构而重构！！！

 3. 如果代码运行正常，同时没有新的修改需求，不要可以去重构！

 4. 如果重构的代码，重构完成之后，第一件事情就是测试！以防重构对代码结构造成破坏！

好了, 这次我们就讲到这里, 下次我们继续~~~