zoukankan      html  css  js  c++  java
  • AJ学IOS(03)UI之纯代码实现UI——图片查看器

    AJ分享,必须精品

    先看效果

    这里写图片描述

    主要实现类似看新闻的一个界面,不用拖拽,纯代码手工写。
    首先分析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];
    }
    这两个方法建立监听,恩 这样就能点击调用代码了。

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

  • 相关阅读:
    linux内核中GNU C和标准C的区别
    linux内核中GNU C和标准C的区别
    Getting start with dbus in systemd (02)
    Getting start with dbus in systemd (01)
    Getting start with dbus in systemd (03)
    物理内存相关的三个数据结构
    数据类型对应字节数(32位,64位 int 占字节数)
    Linux kernel 内存
    共模电感的原理以及使用情况
    [原创]DC-DC输出端加电压会烧毁
  • 原文地址:https://www.cnblogs.com/luolianxi/p/4990397.html
Copyright © 2011-2022 走看看