UI基础-图片浏览器

　　本篇使用UIImageView\UILabel\UIButton实现一个综合的小案例.

　　功能分析:

• • 点击箭头切换序号\图片\描述
  • 如果是首张图片,左边箭头不能点击
  • 如果是尾张图片,右边箭头不能点击

　　步骤分析:

• • 搭建UI界面:两个UILabel,一个UIImageView,两个UIButton
  • 监听按钮点击
  • 切换序号\图片\描述

附上storyboard拖线的图片:

附上源代码:

ViewController.m

  1 //
  2 //  ViewController.m
  3 //  01-图片浏览器1
  4 //
  5 //  Created by hukezhu on 15/5/12.
  6 //
  7 //
  8
  9 #import "ViewController.h"
 10
 11 @interface ViewController ()
 12 /**  界面上最上面显示索引的label*/
 13 @property (weak, nonatomic) IBOutlet UILabel *noLabel;
 14 /**  显示图片的控件*/
 15 @property (weak, nonatomic) IBOutlet UIImageView *iconView;
 16 /**  描述图片内容的label*/
 17 @property (weak, nonatomic) IBOutlet UILabel *descLabel;
 18 /**
 19  *  左边按钮的属性,用来控制按钮的不可用状态
 20  */
 21 @property (weak, nonatomic) IBOutlet UIButton *left;
 22 /**
 23  *  右边按钮的属性,用来控制按钮的不可用状态
 24  */
 25 @property (weak, nonatomic) IBOutlet UIButton *right;
 26 /**
 27  *  索引,记录位置
 28  */
 29 @property (nonatomic ,assign)int index;
 30 /**
 31  *  上一张的点击响应方法
 32  */
 33 - (IBAction)previous;
 34 /**
 35  *  下一张的点击响应方法
 36  */
 37 - (IBAction)next;
 38 @end
 39
 40 @implementation ViewController
 41
 42 - (void)viewDidLoad {
 43     [super viewDidLoad];
 44
 45     //首先将当前计数器设置为-1,然后再调用next方法,即可显示首页面.
 46     self.index = -1;
 47     [self next];
 48 }
 49
 50 - (IBAction)previous{
 51
 52     //计数器减一
 53     self.index--;
 54     switch (self.index) {
 55         case 0:
 56             self.noLabel.text = @"1/5";
 57             self.iconView.image = [UIImage imageNamed:@"biaoqingdi"];
 58             self.descLabel.text = @"哥牛逼啊";
 59             break;
 60         case 1:
 61             self.noLabel.text = @"2/5";
 62             self.iconView.image = [UIImage imageNamed:@"bingli"];
 63             self.descLabel.text = @"亮瞎眼啊";
 64             break;
 65         case 2:
 66             self.noLabel.text = @"3/5";
 67             self.iconView.image = [UIImage imageNamed:@"chiniupa"];
 68             self.descLabel.text = @"小姑娘吃牛排比杀牛还费劲";
 69             break;
 70         case 3:
 71             self.noLabel.text = @"4/5";
 72             self.iconView.image = [UIImage imageNamed:@"danteng"];
 73             self.descLabel.text = @"蛋疼";
 74             break;
 75         case 4:
 76             self.noLabel.text = @"5/5";
 77             self.iconView.image = [UIImage imageNamed:@"wangba"];
 78             self.descLabel.text = @"王八";
 79             break;
 80
 81     }
 82     //设置按钮的不可用状态,当计数器为0时,左边的按钮为不可用状态
 83     self.left.enabled = self.index != 0;
 84     //当计数器为4时,右边的按钮为不可用状态
 85     self.right.enabled = self.index != 4;
 86
 87 }
 88 - (IBAction)next{
 89
 90     self.index++;
 91     switch (self.index) {
 92         case 0:
 93             self.noLabel.text = @"1/5";
 94             self.iconView.image = [UIImage imageNamed:@"biaoqingdi"];
 95             self.descLabel.text = @"哥牛逼啊";
 96             break;
 97         case 1:
 98             self.noLabel.text = @"2/5";
 99             self.iconView.image = [UIImage imageNamed:@"bingli"];
100             self.descLabel.text = @"亮瞎眼啊";
101             break;
102         case 2:
103             self.noLabel.text = @"3/5";
104             self.iconView.image = [UIImage imageNamed:@"chiniupa"];
105             self.descLabel.text = @"小姑娘吃牛排比杀牛还费劲";
106             break;
107         case 3:
108             self.noLabel.text = @"4/5";
109             self.iconView.image = [UIImage imageNamed:@"danteng"];
110             self.descLabel.text = @"蛋疼";
111             break;
112         case 4:
113             self.noLabel.text = @"5/5";
114             self.iconView.image = [UIImage imageNamed:@"wangba"];
115             self.descLabel.text = @"王八";
116             break;
117     }
118     self.left.enabled = self.index != 0;
119     self.right.enabled = self.index != 4;
120 }
121
122 @end

　　这里定义了一个索引index,记录当前的序号.

　　这里使用最原始的方法,当用户点击按钮时,首先计算index的值,使用switch结构,选择响应的数据段,将数据加载到相应位置.

　　分析代码,发现代码有重复的部分,可以将重复的代码提取出来,封装成一个方法,需要的适合直接调用这个方法.改进方法见下一篇文章.

　　此处,我分析一下,最开始程序所提到的功能:首张图片,左侧按钮不能点击;尾张图片,右侧按钮不能点击.想要实现这个功能,我们最容易想到的办法是if-else结构

 1     //判断按钮能不能点击
 2     if (self.index == 0) {
 3         self.previousBtn.enabled = NO;
 4     }else{
 5
 6         self.previousBtn.enabled = YES;
 7     }
 8     if (self.index == 4) {
 9         self.nextBtn.enabled = NO;
10     }else{
11
12         self.nextBtn.enabled = YES;
13     }

　　经过分析,发现上面的两个判断语句,可以使用三目运算符来搞定,如下:

self.previousBtn.enabled = (self.index ==0)?NO:YES;
self.nextBtn.enabled = (self.index == 4)?NO:YES;

　　本身觉着这样优化之后已经很好了,一行代码就能实现了,但是仔细一看,还是可以优化,如下:

self.previousBtn.enabled = (self.index != 0);
self.nextBtn.enabled = (self.index !=4);

　　下一篇文章,我会改进这个代码,将重复性的代码进行封装.