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

ios教程(3)--UIImageView、UILabel、UIButton实现一个小案例

时间:2015-07-02 10:13:13      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

等一下我们就要做成这样的效果 下面看代码(代码没有优化过 基本都看动) (哒哒:刚刚看上去觉得好难啦);

//
//  ViewController.m
//  03图片浏览器(代码创建)
//
//  Created by sunda on 15/7/1.
//  Copyright (c) 2015年 sunda. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
/**
 *  序号
 */
@property (strong,nonatomic)UILabel *orderLable;
/**
 *  图片
 */
@property (nonatomic,strong)UIImageView *iconImageView;
/**
 *  图片描述
 */
@property (nonatomic,strong)UILabel *detailsLable;
/**
 *  左边箭头
 */
@property (nonatomic,strong)UIButton *leftButton;
/**
 *  右边的箭头
 */
@property (nonatomic,strong)UIButton *rightButton;

/**
 *  计数
 */
@property (nonatomic,assign)int index;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //搭建序号
    self.orderLable = [[UILabel alloc] init];
    self.orderLable.frame = CGRectMake(0, 20, self.view.frame.size.width,40);
    self.orderLable.text = @"1/5";
    //设置文字居中
    self.orderLable.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:self.orderLable];
    //搭建图片
    self.iconImageView = [[UIImageView alloc] init];
    float iconW = 200;
    float iconH = 200;
    float iconY = CGRectGetMaxY(self.orderLable.frame) + 20;
    float iconX = (self.view.frame.size.width - iconW) / 2;
    self.iconImageView.frame = CGRectMake(iconX, iconY, iconW, iconH);
    self.iconImageView.image = [UIImage imageNamed:@"biaoqingdi"];
    [self.view addSubview:self.iconImageView];
    
    //搭建图片描述
    self.detailsLable = [[UILabel alloc] init];
    CGFloat detailsY = CGRectGetMaxY(self.iconImageView.frame) + 20;
    self.detailsLable.frame = CGRectMake(0, detailsY, self.view.frame.size.width,100);
    self.detailsLable.text = @"神马表情";
    self.detailsLable.backgroundColor = [UIColor redColor];
    //设置文字居中
    self.detailsLable.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:self.detailsLable];
    
    //创建左箭头
    self.leftButton = [[UIButton alloc] init];
    self.leftButton.frame = CGRectMake(0, 0, 40, 40);
    [self.leftButton setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
    [self.leftButton setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
    self.leftButton.center = CGPointMake(self.iconImageView.frame.origin.x / 2, self.iconImageView.center.y);
    [self.view addSubview:self.leftButton];
    [self.leftButton addTarget:self action:@selector(leftClick) forControlEvents:UIControlEventTouchUpInside];
    
    //创建右箭头
    
    self.rightButton = [[UIButton alloc] init];
    self.rightButton.frame = CGRectMake(0, 0, 40, 40);
    [self.rightButton setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
    [self.rightButton setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
    self.rightButton.center = CGPointMake(self.view.frame.size.width - self.leftButton.center.x, self.iconImageView.center.y);
    [self.view addSubview:self.rightButton];
    [self.rightButton addTarget:self action:@selector(rightClick) forControlEvents:UIControlEventTouchUpInside];
    
    [self changeImage];
}

/** 修改图像数据 */
- (void)changeImage
{
    // 设置UI上面所有控件的显示内容
    // 根据self.index显示序号标签,图像,图像描述
    self.orderLable.text = [NSString stringWithFormat:@"%d/%d", self.index + 1, 5];
    switch (self.index) {
        case 0:
            self.iconImageView.image = [UIImage imageNamed:@"biaoqingdi"];
            self.detailsLable.text = @"表情";
            break;
        case 1:
            self.iconImageView.image = [UIImage imageNamed:@"bingli"];
            self.detailsLable.text = @"病例";
            break;
        case 2:
            self.iconImageView.image = [UIImage imageNamed:@"chiniupa"];
            self.detailsLable.text = @"吃牛扒";
            break;
        case 3:
            self.iconImageView.image = [UIImage imageNamed:@"danteng"];
            self.detailsLable.text = @"蛋疼";
            break;
        case 4:
            self.iconImageView.image = [UIImage imageNamed:@"wangba"];
            self.detailsLable.text = @"王八";
            break;
    }
    
   
    self.leftButton.enabled = (self.index != 0);
    self.rightButton.enabled = (self.index != 4);
   
}


/** 左边按钮点击方法 */
- (void)leftClick
{
    NSLog(@"左");
    self.index --;
    [self changeImage];
    

}

/** 右边按钮点击方法 */
- (void)rightClick
{
    NSLog(@"右");
     self.index ++;
    [self changeImage];
    

}


@end
是不是 很简单(哒哒:好难,果断去敲代码了。。。。)

代码优化一  switch 优化

重要的我在代码中 加了注释

//
//  ViewController.m
//  03图片浏览器(代码创建)
//
//  Created by sunda on 15/7/1.
//  Copyright (c) 2015年 sunda. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
/**
 *  序号
 */
@property (strong,nonatomic)UILabel *orderLable;
/**
 *  图片
 */
@property (nonatomic,strong)UIImageView *iconImageView;
/**
 *  图片描述
 */
@property (nonatomic,strong)UILabel *detailsLable;
/**
 *  左边箭头
 */
@property (nonatomic,strong)UIButton *leftButton;
/**
 *  右边的箭头
 */
@property (nonatomic,strong)UIButton *rightButton;

/**
 *  计数
 */
@property (nonatomic,assign)int index;

/**
 *  图像列表
 */
@property (nonatomic, strong) NSArray *imageList;
@end

@implementation ViewController
// 懒加载-在需要的时候,在实例化加载到内存中
- (NSArray *)imageList
{
    // 只有第一次调用getter方法时,为空,此时实例化并建立数组
    if (_imageList == nil) {
        // File表示从文件的完整路径加载文件
        // Bundle-包,只读的
        NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageData" ofType:@"plist"];
        _imageList = [NSArray arrayWithContentsOfFile:path];
    }
     return _imageList;
}


- (void)viewDidLoad {
    [super viewDidLoad];
    //搭建序号
    self.orderLable = [[UILabel alloc] init];
    self.orderLable.frame = CGRectMake(0, 20, self.view.frame.size.width,40);
    self.orderLable.text = @"1/5";
    //设置文字居中
    self.orderLable.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:self.orderLable];
    //搭建图片
    self.iconImageView = [[UIImageView alloc] init];
    float iconW = 200;
    float iconH = 200;
    float iconY = CGRectGetMaxY(self.orderLable.frame) + 20;
    float iconX = (self.view.frame.size.width - iconW) / 2;
    self.iconImageView.frame = CGRectMake(iconX, iconY, iconW, iconH);
    self.iconImageView.image = [UIImage imageNamed:@"biaoqingdi"];
    [self.view addSubview:self.iconImageView];
    
    //搭建图片描述
    self.detailsLable = [[UILabel alloc] init];
    CGFloat detailsY = CGRectGetMaxY(self.iconImageView.frame) + 20;
    self.detailsLable.frame = CGRectMake(0, detailsY, self.view.frame.size.width,100);
    self.detailsLable.text = @"神马表情";
    self.detailsLable.backgroundColor = [UIColor redColor];
    //设置文字居中
    self.detailsLable.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:self.detailsLable];
    
    //创建左箭头
    self.leftButton = [[UIButton alloc] init];
    self.leftButton.frame = CGRectMake(0, 0, 40, 40);
    [self.leftButton setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
    [self.leftButton setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
    self.leftButton.center = CGPointMake(self.iconImageView.frame.origin.x / 2, self.iconImageView.center.y);
    [self.view addSubview:self.leftButton];
    [self.leftButton addTarget:self action:@selector(leftClick) forControlEvents:UIControlEventTouchUpInside];
    
    //创建右箭头
    
    self.rightButton = [[UIButton alloc] init];
    self.rightButton.frame = CGRectMake(0, 0, 40, 40);
    [self.rightButton setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
    [self.rightButton setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
    self.rightButton.center = CGPointMake(self.view.frame.size.width - self.leftButton.center.x, self.iconImageView.center.y);
    [self.view addSubview:self.rightButton];
    [self.rightButton addTarget:self action:@selector(rightClick) forControlEvents:UIControlEventTouchUpInside];
    
    [self changeImage];
}

/** 修改图像数据 */
- (void)changeImage
{
    // 设置UI上面所有控件的显示内容
    // 根据self.index显示序号标签,图像,图像描述
    self.orderLable.text = [NSString stringWithFormat:@"%d/%d", self.index + 1, 5];
    self.iconImageView.image = [UIImage imageNamed:self.imageList[self.index][@"name"]];
    self.detailsLable.text = self.imageList[self.index][@"desc"];
    self.leftButton.enabled = (self.index != 0);
    self.rightButton.enabled = (self.index != 4);
   
}


/** 左边按钮点击方法 */
- (void)leftClick
{
    NSLog(@"左");
    self.index --;
    [self changeImage];
    

}

/** 右边按钮点击方法 */
- (void)rightClick
{
    NSLog(@"右");
     self.index ++;
    [self changeImage];
    

}


@end

代码优化二 控件的懒加载

//
//  ViewController.m
//  03图片浏览器(代码创建)
//
//  Created by sunda on 15/7/1.
//  Copyright (c) 2015年 sunda. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
/**
 *  序号
 */
@property (strong,nonatomic)UILabel *orderLable;
/**
 *  图片
 */
@property (nonatomic,strong)UIImageView *iconImageView;
/**
 *  图片描述
 */
@property (nonatomic,strong)UILabel *detailsLable;
/**
 *  左边箭头
 */
@property (nonatomic,strong)UIButton *leftButton;
/**
 *  右边的箭头
 */
@property (nonatomic,strong)UIButton *rightButton;

/**
 *  计数
 */
@property (nonatomic,assign)int index;

/**
 *  图像列表
 */
@property (nonatomic, strong) NSArray *imageList;
@end

@implementation ViewController
// 懒加载-在需要的时候,在实例化加载到内存中
- (NSArray *)imageList
{
    // 只有第一次调用getter方法时,为空,此时实例化并建立数组
    if (_imageList == nil) {
        // File表示从文件的完整路径加载文件
        // Bundle-包,只读的
        NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageData" ofType:@"plist"];
        _imageList = [NSArray arrayWithContentsOfFile:path];
    }
     return _imageList;
}
- (UILabel *)orderLable
{
    if (_orderLable == nil) {
        _orderLable = [[UILabel alloc] init];
        _orderLable.frame = CGRectMake(0, 20, self.view.frame.size.width,40);
        //设置文字居中
        _orderLable.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:_orderLable];
    }
    return _orderLable;
    
   

}
- (UIImageView *)iconImageView
{
    
    if (_iconImageView == nil) {
        _iconImageView = [[UIImageView alloc] init];
        float iconW = 200;
        float iconH = 200;
        float iconY = CGRectGetMaxY(self.orderLable.frame) + 20;
        float iconX = (self.view.frame.size.width - iconW) / 2;
        _iconImageView.frame = CGRectMake(iconX, iconY, iconW, iconH);
        [self.view addSubview:_iconImageView];
    }
    return _iconImageView;
   
}
- (UILabel *)detailsLable
{
    if (_detailsLable == nil) {
        _detailsLable = [[UILabel alloc] init];
        CGFloat detailsY = CGRectGetMaxY(self.iconImageView.frame) + 20;
       _detailsLable.frame = CGRectMake(0, detailsY, self.view.frame.size.width,100);
        //设置文字多行显示
        _detailsLable.numberOfLines = 0;
        _detailsLable.backgroundColor = [UIColor redColor];
        //设置文字居中
        _detailsLable.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:_detailsLable];

    }
    return _detailsLable;
  
}

- (UIButton *)leftButton
{
    if (_leftButton == nil) {
        _leftButton = [[UIButton alloc] init];
        _leftButton.frame = CGRectMake(0, 0, 40, 40);
        [_leftButton setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
        [_leftButton setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
        _leftButton.center = CGPointMake(self.iconImageView.frame.origin.x / 2, self.iconImageView.center.y);
        [self.view addSubview:_leftButton];
        [_leftButton addTarget:self action:@selector(leftClick) forControlEvents:UIControlEventTouchUpInside];

    }
    return _leftButton;
}
- (UIButton *)rightButton
{
    if (_rightButton == nil) {
        _rightButton = [[UIButton alloc] init];
        _rightButton.frame = CGRectMake(0, 0, 40, 40);
        [_rightButton setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
        [_rightButton setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
        _rightButton.center = CGPointMake(self.view.frame.size.width - self.leftButton.center.x, self.iconImageView.center.y);
        [self.view addSubview:_rightButton];
        [_rightButton addTarget:self action:@selector(rightClick) forControlEvents:UIControlEventTouchUpInside];
    }
    return _rightButton;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    [self changeImage];
}

/** 修改图像数据 */
- (void)changeImage
{
    // 设置UI上面所有控件的显示内容
    // 根据self.index显示序号标签,图像,图像描述
    self.orderLable.text = [NSString stringWithFormat:@"%d/%d", self.index + 1, 5];
    self.iconImageView.image = [UIImage imageNamed:self.imageList[self.index][@"name"]];
    self.detailsLable.text = self.imageList[self.index][@"desc"];
    self.leftButton.enabled = (self.index != 0);
    self.rightButton.enabled = (self.index != 4);
   
}


/** 左边按钮点击方法 */
- (void)leftClick
{
    NSLog(@"左");
    self.index --;
    [self changeImage];
    

}

/** 右边按钮点击方法 */
- (void)rightClick
{
    NSLog(@"右");
     self.index ++;
    [self changeImage];
    

}


@end

代码下载地址 https://github.com/sunda1314520/03-  (哒哒 反正我不下载)

版权声明:本文为博主原创文章,未经博主允许不得转载。

ios教程(3)--UIImageView、UILabel、UIButton实现一个小案例

标签:

原文地址:http://blog.csdn.net/sundaboke/article/details/46716677

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