首页 > 移动平台 > 详细

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

时间:2016-01-06 21:50:59      阅读:240      评论:0      收藏:0      [点我收藏+]

技术分享

一、程序功能分析

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

  2)如果是首张图片,左边箭头失效;

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

二、程序实现

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

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

  定义相关的属性:

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

  重写 viewDidLoad 方法,用代码创建控件:

 1 //ViewController.m
 2 - (void)viewDidLoad {
 3     [super viewDidLoad];
 4     self.i = 0;
 5     
 6     //创建显示图片序号的UILabel控件
 7     UILabel *headLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 300, 30)];
 8     [headLabel setTextAlignment:NSTextAlignmentCenter];     //居中显示
 9     [headLabel setTextColor:[UIColor redColor]];            //设置字符颜色
10     [self.view addSubview:headLabel];
11     self.firstLabel = headLabel;
12     
13     //创建一个装载图片的控件
14     UIImageView *potoImage = [[UIImageView alloc] initWithFrame:CGRectMake(POTOIMAGEX, POTOIMAGEY, POTOIMAGEWIDTH, POTOIMAGEHEIGHT)];
15     UIImage *image = [UIImage imageNamed:@"beauty0"];
16     potoImage.image = image;
17     [self.view addSubview:potoImage];
18     self.imageIcon = potoImage;
19     
20     //创建图片下边用来描述图片信息的UILabel控件
21     UILabel *descLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 400, 300, 30)];
22     [descLabel setTextAlignment:NSTextAlignmentCenter];
23     [descLabel setTextColor:[UIColor blueColor]];
24     [self.view addSubview:descLabel];
25     self.lastLabel = descLabel;
26     
27     //创建两个方向键按钮
28     UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
29     leftButton.frame = CGRectMake(10, self.view.center.y, 30, 53);
30     [leftButton setBackgroundImage:[UIImage imageNamed:@"leftRow"] forState:UIControlStateNormal];
31     [self.view addSubview:leftButton];
32     self.leftButton = leftButton;
33     [leftButton addTarget:self action:@selector(leftClicked:) forControlEvents:UIControlEventTouchUpInside];
34     
35     UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
36     rightButton.frame = CGRectMake(280, self.view.center.y, 30, 53);
37     [rightButton setBackgroundImage:[UIImage imageNamed:@"rightRow"] forState:UIControlStateNormal];
38     [self.view addSubview:rightButton];
39     self.rightButton = rightButton;
40     [rightButton addTarget:self action:@selector(rightClicked:) forControlEvents:UIControlEventTouchUpInside];
41     
42     [self change];   //初始化界面
43 }

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

 1 //视图内容更新与显示
 2 - (void)change {
 3     [self.firstLabel setText:[NSString stringWithFormat:@"%d/5", self.i+1]];
 4     switch (self.i) {
 5         case 0:
 6             self.lastLabel.text = @"美女1号";
 7             self.imageIcon.image = [UIImage imageNamed:@"beauty0"];
 8             break;
 9         case 1:
10             self.lastLabel.text = @"美女2号";
11             self.imageIcon.image = [UIImage imageNamed:@"beauty1"];
12             break;
13         case 2:
14             self.lastLabel.text = @"美女3号";
15             self.imageIcon.image = [UIImage imageNamed:@"beauty2"];
16             break;
17         case 3:
18             self.lastLabel.text = @"美女4号";
19             self.imageIcon.image = [UIImage imageNamed:@"beauty3"];
20             break;
21         case 4:
22             self.lastLabel.text = @"美女5号";
23             self.imageIcon.image = [UIImage imageNamed:@"beauty4"];
24             break;
25     }
26     self.leftButton.enabled = (self.i != 0);        //显示第1张图片时,左翻按钮失效
27     self.rightButton.enabled = (self.i != 4);       //显示第5张图片时,右翻按钮失效
28 }

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

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

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

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

 

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

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

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

原文:http://www.cnblogs.com/wjq-Law/p/5104115.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!