猫猫学IOS（三）UI之纯代码实现UI——图片查看器

猫猫分享，必须精品

先看效果

主要实现类似看新闻的一个界面，不用拖拽，纯代码手工写。

首先分析app可以很容易知道他这里有两个UILabel一个UIImageView还有两个UIButton

定义UIView中的东西

@property (nonatomic, strong) UILabel *noLabel;//数字标签
@property (nonatomic, strong) UIImageView *iconImage;//图片控件
@property (nonatomic, strong) UILabel *descLabel;//描述信息
@property (nonatomic, strong) UIButton *leftButton;//左边按钮
@property (nonatomic, strong) UIButton *rightButton;//右边按钮

接下来就是实例化每一个控件要做的了，开始的时候我是直接在- (void)viewDidLoad方法中写的，后来因为学习了懒加载

设计模式（感觉跟java设计模式中的懒汉差不多）优化了代码，这里就直接给出优化后的了。

懒加载

懒加载设计主要就是把UI控件放到定义好的控件的get方法中实例化，这样呢可以减少代码在viewDidLoad中的上下关系，可以有效的解耦。

UILabel： noLabel

-(UILabel *)noLabel
{
if (_noLabel == nil) {
//1,序号.
_noLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 40, self.view.bounds.size.width, 40)];
_noLabel.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:_noLabel];
}
return _noLabel;
}

[self.view addSubview:_noLabel];这个是将控件挂到view上面，画好了一定要挂上，要不没人看到。

注意：*重点，在get方法里面不能写self.noLabel；千万不要用“点”语法，这样会造成get方法死循环，因为“点”语法就是调用的get方法，所以要用下划线属性名的方法得到对象（在内存这其实是一个指针）。

UIImageView： iconImage

-(UIImageView *)iconImage
{
if(_iconImage == nil){
//2,图像
CGFloat imageW = 200;//图像控件的宽
CGFloat imageH = 200;//图像控件的高
CGFloat imageX = (self.view.bounds.size.width - imageW)*0.5;//图像控件的x坐标位置
CGFloat imageY = CGRectGetMaxY(self.noLabel.frame) + 20;//图像控件的y坐标位置
_iconImage = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)];
[self.view addSubview:_iconImage];
}
return _iconImage;
}

跟上一个差不多，我在注释里面都添加了

-(UILabel *)descLabel
{
if(_descLabel == nil){
//3，说明
CGFloat descY = CGRectGetMaxY(self.iconImage.frame);
_descLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, descY, self.view.bounds.size.width, 100)];
//自动换行
_descLabel.numberOfLines = 0;
//调整文本居中显示
_descLabel.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:_descLabel];

}
return _descLabel;
}

这个是描述的，多了一个自动换行方法 _descLabel.numberOfLines = 0;

UIButton leftButton

-(UIButton *)leftButton
{
if (_leftButton == nil) {
//4。左边的按钮
_leftButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
CGFloat centY = self.iconImage.center.y;
CGFloat centX = self.iconImage.frame.origin.x * 0.5;
_leftButton.center = CGPointMake(centX, centY);
//设置默认情况按钮显示状况
[_leftButton setBackgroundImage:[UIImage imageNamed:@"left_normal" ] forState:UIControlStateNormal];
//设置高亮 当按下按钮时候显示的样子
[_leftButton setBackgroundImage:[UIImage imageNamed:@"left_highlighted" ] forState:UIControlStateHighlighted];
_leftButton.tag = -1;//设置按钮的tag

[self.view addSubview:_leftButton];

}
return _leftButton;
}

-(UIButton *)rightButton
{
if (_rightButton == nil) {

//5。右边的按钮
CGFloat centX = self.iconImage.frame.origin.x * 0.5;
CGFloat centY = self.iconImage.center.y;
_rightButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
_rightButton.center = CGPointMake(self.view.bounds.size.width - centX,centY);
//设置默认情况下按钮
[_rightButton setBackgroundImage:[UIImage imageNamed:@"right_normal" ] forState:UIControlStateNormal];
//设置高亮
[_rightButton setBackgroundImage:[UIImage imageNamed:@"right_highlighted" ] forState:UIControlStateHighlighted];
_rightButton.tag = 1;
[self.view addSubview:_rightButton];

}
return _rightButton;//设置按钮的tag
}

这里设置了左右按钮，开始那些都不说了，看到CGFloat我们就应该能瞬间想到布局位置什么那些关键字相应的

CGRect CGSize CGPoint 以及另外三个frame bounds center

这里有个很精妙的设计，那就是tag 把tag设置成了1和-1在后面会有妙用。

图片集合

//当前显示的照片索引
@property (nonatomic, assign) int index;
//图片的集合
@property (nonatomic, strong) NSArray *imageList;

//显示图片信息
- (void) showPhotoInfo
{
//给序号添加内容 从imageList数组中拿到
self.noLabel.text = [NSString stringWithFormat:@"%d/%d",self.index+1,self.imageList.count];
//    给图片添加内容从imageList数组中拿到
self.iconImage.image = [UIImage imageNamed:self.imageList[self.index][@"name"]];
//    给描述添加内容从imageList数组中拿到
self.descLabel.text = self.imageList[self.index][@"desc"];

self.leftButton.enabled = (self.index != 0);//当索引到第一张图片的时候，让左边按钮编程不能按的状态
self.rightButton.enabled = (self.index != self.imageList.count-1);//当索引到最后图片的时候，让右边边按钮编程不能按的状态
}

- (NSArray *)imageList
{
if (_imageList == nil) {
//设置存放内容（plist）的路径
//在oc中contentsOfFile，通常需要完整的路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"imageList" ofType:@"plist"];
_imageList = [NSArray arrayWithContentsOfFile:path];
NSLog(@"%@",_imageList);
}
return _imageList;
}

这里用到了_imageList = [NSArray arrayWithContentsOfFile:path];

来从我们设置好的imageList.plist文件中得到要用的东东

点击事件以及调用

- (void)viewDidLoad
{
[super viewDidLoad];

//显示信息
[self showPhotoInfo];

//button点击事件调用
[_leftButton addTarget:self action:@selector(chickButton:) forControlEvents:UIControlEventTouchUpInside];
[_rightButton addTarget:self action:@selector(chickButton:) forControlEvents:UIControlEventTouchUpInside];
}
//点击按钮事件
- (void) chickButton:(UIButton *)button
{
self.index += button.tag;
[self showPhotoInfo];
}

这里我们用到了一个很精妙的地方，还记得前面的tag属性吧

这里我们直接 self.index += button.tag; 然后实现了button按左边index自增右边自减从而优化代码。

[_leftButton addTarget:self action:@selector(chickButton:) forControlEvents:UIControlEventTouchUpInside];

[_rightButton addTarget:self action:@selector(chickButton:) forControlEvents:UIControlEventTouchUpInside];

}

这两个方法建立监听，恩 这样就能点击调用代码了。

好了 到这里位置就算完成了。没用用前段拖拽吧。

PS1.需要学习资料的可以加我微信 znycat（标注从哪看到的，学习资料都免费，包括视频，ppt，项目，项目素材。。。。。） 。————我就是太多学不完了，想找几个人陪我一起纠结。