iOS开发基础-图片切换(1)

一、程序功能分析

　　1）点击左右箭头切换图片、序号、描述；

　　2）如果是首张图片，左边箭头失效；

　　3）如果是最后一张图片，右边箭头失效。

二、程序实现

　　定义确定图片位置、大小的常量：

//ViewController.m
CGFloat const POTOIMAGEWIDTH = 120.0;       //图片宽度
CGFloat const POTOIMAGEHEIGHT = 180.0;      //图片高度
CGFloat const POTOIMAGEX = 100;             //图片X轴坐标
CGFloat const POTOIMAGEY = 50;              //图片Y轴坐标

　　定义相关的属性：

//ViewController.m
@interface ViewController ()
@property (nonatomic, strong) UILabel *firstLabel;          //显示图片的序号
@property (nonatomic, strong) UILabel *lastLabel;           //显示图片内容描述
@property (nonatomic, strong) UIImageView *imageIcon;       //图片
@property (nonatomic, strong) UIButton *leftButton;         //左翻按钮
@property (nonatomic, strong) UIButton *rightButton;        //右翻按钮
@property (nonatomic, assign) int i;        //标记所显示图片的序号，从0开始
@end

　　重写 viewDidLoad 方法，用代码创建控件：

//ViewController.m
- (void)viewDidLoad {
    [super viewDidLoad];
    self.i = 0;
    
    //创建显示图片序号的UILabel控件
    UILabel *headLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 300, 30)];
    [headLabel setTextAlignment:NSTextAlignmentCenter];     //居中显示
    [headLabel setTextColor:[UIColor redColor]];            //设置字符颜色
    [self.view addSubview:headLabel];
    self.firstLabel = headLabel;
    
    //创建一个装载图片的控件
    UIImageView *potoImage = [[UIImageView alloc] initWithFrame:CGRectMake(POTOIMAGEX, POTOIMAGEY, POTOIMAGEWIDTH, POTOIMAGEHEIGHT)];
    UIImage *image = [UIImage imageNamed:@"beauty0"];
    potoImage.image = image;
    [self.view addSubview:potoImage];
    self.imageIcon = potoImage;
    
    //创建图片下边用来描述图片信息的UILabel控件
    UILabel *descLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 400, 300, 30)];
    [descLabel setTextAlignment:NSTextAlignmentCenter];
    [descLabel setTextColor:[UIColor blueColor]];
    [self.view addSubview:descLabel];
    self.lastLabel = descLabel;
    
    //创建两个方向键按钮
    UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
    leftButton.frame = CGRectMake(10, self.view.center.y, 30, 53);
    [leftButton setBackgroundImage:[UIImage imageNamed:@"leftRow"] forState:UIControlStateNormal];
    [self.view addSubview:leftButton];
    self.leftButton = leftButton;
    [leftButton addTarget:self action:@selector(leftClicked:) forControlEvents:UIControlEventTouchUpInside];
    
    UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
    rightButton.frame = CGRectMake(280, self.view.center.y, 30, 53);
    [rightButton setBackgroundImage:[UIImage imageNamed:@"rightRow"] forState:UIControlStateNormal];
    [self.view addSubview:rightButton];
    self.rightButton = rightButton;
    [rightButton addTarget:self action:@selector(rightClicked:) forControlEvents:UIControlEventTouchUpInside];
    
    [self change];   //初始化界面
}

　　下面实现 change 方法，每次调用该方法，将按照 self.i 的大小显示相应的图片及其他内容：

//视图内容更新与显示
- (void)change {
    [self.firstLabel setText:[NSString stringWithFormat:@"%d/5", self.i+1]];
    switch (self.i) {
        case 0:
            self.lastLabel.text = @"美女1号";
            self.imageIcon.image = [UIImage imageNamed:@"beauty0"];
            break;
        case 1:
            self.lastLabel.text = @"美女2号";
            self.imageIcon.image = [UIImage imageNamed:@"beauty1"];
            break;
        case 2:
            self.lastLabel.text = @"美女3号";
            self.imageIcon.image = [UIImage imageNamed:@"beauty2"];
            break;
        case 3:
            self.lastLabel.text = @"美女4号";
            self.imageIcon.image = [UIImage imageNamed:@"beauty3"];
            break;
        case 4:
            self.lastLabel.text = @"美女5号";
            self.imageIcon.image = [UIImage imageNamed:@"beauty4"];
            break;
    }
    self.leftButton.enabled = (self.i != 0);        //显示第1张图片时，左翻按钮失效
    self.rightButton.enabled = (self.i != 4);       //显示第5张图片时，右翻按钮失效
}

　　实现 self.leftButton 的响应事件 leftClicked: 

- (void)leftClicked:(UIButton *)button {
    self.i--;
    [self change];
}

　　实现 self.rightButton 的响应事件 rightClicked: 

- (void)rightClicked:(UIButton *)button {
    self.i++;
    [self change];
}

参考博客：iOS开发UI篇—简单的浏览器查看程序

示例代码：http://pan.baidu.com/s/1mgZwJRq