码迷,mamicode.com
首页 > 移动开发 > 详细

猫学习IOS(三)UI纯代码UI——图片浏览器

时间:2015-12-08 14:20:41      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

猫分享。必须精品

看看效果

技术分享

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


首先分析app能够非常easy知道他这里有两个UILabel一个UIImageView还有两个UIButton

定义UIView中的东西

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

接下来就是实例化每个控件要做的了,開始的时候我是直接在- (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。

左边的button _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); //设置默认情况button显示状况 [_leftButton setBackgroundImage:[UIImage imageNamed:@"left_normal" ] forState:UIControlStateNormal]; //设置高亮 当按下button时候显示的样子 [_leftButton setBackgroundImage:[UIImage imageNamed:@"left_highlighted" ] forState:UIControlStateHighlighted]; _leftButton.tag = -1;//设置button的tag [self.view addSubview:_leftButton]; } return _leftButton; } -(UIButton *)rightButton { if (_rightButton == nil) { //5。右边的button 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); //设置默认情况下button [_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;//设置button的tag }

这里设置了左右button,開始那些都不说了。看到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);//当索引到第一张图片的时候。让左边button编程不能按的状态
    self.rightButton.enabled = (self.index != self.imageList.count-1);//当索引到最后图片的时候。让右边边button编程不能按的状态
}

- (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];    
}
//点击button事件
- (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];
}
这两个方法建立监听。恩 这样就能点击调用代码了。

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

猫学习IOS(三)UI纯代码UI——图片浏览器

标签:

原文地址:http://www.cnblogs.com/lcchuguo/p/5028816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!