ios教程(3)--UIImageView、UILabel、UIButton實現一個小案例

標籤：

等一下我們就要做成這樣的效果 下面看代碼(代碼沒有最佳化過 基本都看動) (噠噠：剛剛看上去覺得好難啦)；

////  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實現一個小案例