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

一、程序功能分析

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

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

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

二、程序实现

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

 //ViewController.m
 CGFloat const POTOIMAGEWIDTH = 120.0;       //图片宽度
 CGFloat const POTOIMAGEHEIGHT = 180.0;      //图片高度
 CGFloat const POTOIMAGEX = ;             //图片X轴坐标
 CGFloat const POTOIMAGEY = ;              //图片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 = ;

     //创建显示图片序号的UILabel控件
     UILabel *headLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
     [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(, , , )];
     [descLabel setTextAlignment:NSTextAlignmentCenter];
     [descLabel setTextColor:[UIColor blueColor]];
     [self.view addSubview:descLabel];
     self.lastLabel = descLabel;

     //创建两个方向键按钮
     UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
     leftButton.frame = CGRectMake(, self.view.center.y, , );
     [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(, self.view.center.y, , );
     [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+]];
     switch (self.i) {
         case :
             self.lastLabel.text = @"美女1号";
             self.imageIcon.image = [UIImage imageNamed:@"beauty0"];
             break;
         case :
             self.lastLabel.text = @"美女2号";
             self.imageIcon.image = [UIImage imageNamed:@"beauty1"];
             break;
         case :
             self.lastLabel.text = @"美女3号";
             self.imageIcon.image = [UIImage imageNamed:@"beauty2"];
             break;
         case :
             self.lastLabel.text = @"美女4号";
             self.imageIcon.image = [UIImage imageNamed:@"beauty3"];
             break;
         case :
             self.lastLabel.text = @"美女5号";
             self.imageIcon.image = [UIImage imageNamed:@"beauty4"];
             break;
     }
     self.leftButton.enabled = (self.i != );        //显示第1张图片时，左翻按钮失效
     self.rightButton.enabled = (self.i != );       //显示第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