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. 如果重构的代码，重构完成之后，第一件事情就是测试！以防重构对代码结构造成破坏！
好了, 这次我们就讲到这里, 下次我们继续~~~
