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-  (哒哒 反正我不下载)

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

时间： 2024-12-14 23:04:06

ios教程(3)--UIImageView、UILabel、UIButton实现一个小案例的相关文章

ios开发-UI进阶-核心动画-时钟动画小案例

[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/ 今天使用CALayer的"定位点(锚点)"实现了一个时钟动画,其实就是一个小的时钟,只是实现了功能,没有做出绚丽的效果.使用UIView实现的,其实只是单纯的使用layer也可以实现.主要用到了 Quartz2D画图\ 事件处理\核心动画方面的知识. 代码不是很多,直接附上源码,注释比较详细,在源码后面再进行解释其中的一些知识点和注意点. 下图为应用截图,使用gif,没有制作

extJs学习基础5 理解mvvm的一个小案例

今天很是幸运,看到了一位大神的博客,学习了不少的东西.太感谢了.(满满的都是爱啊) 建议去学习这个大神的博客,真心不错. 博客地址:http://blog.csdn.net/column/details/extjs5.html?&page=1 首先要建立一个简单的项目,我是使用的 Sencha Architect 3自动生成的 app下面的文件 在视图文件中建立 MyViwepost.js (view文件中) 1 Ext.define('MyApp.view.MyViewport', { 2 e

oozie编写一个小案例

准备工作  拷贝原来的模板 1 mkdir oozie-apps 2 cd oozie-apps/ 3 cp -r ../examples/apps/mar-reduce . 4 mv map-reduce mr-wordcount-wf 配置文件修改 workflow.xml : 1 <!-- 2 Licensed to the Apache Software Foundation (ASF) under one 3 or more contributor license agreements

第八课学习做的一个小案例，用来去除底部导航最后一个|

全部代码如下 <style> .foot{ width: 100%;margin:0 auto; height: 80px; background: #5283ff;} #footnav{ list-style: none;display: flex;justify-content: center;} #footnav li{ font-size: 18px; padding-top:25px;} #footnav li a{ color: #fff6f2; text-decoration:

Android笔记2——开发前奏2工程目录介绍和一个小应用

转载请注明http://www.cnblogs.com/devtrees/p/4405519.html 一.创建第一个应用HelloWorld (一)创建步骤: 1.New出一个Android Application Project 三种方式 1): 2): 3): 2.会出现下图的窗口: 分别是:应用名:给用户看的 工程名:开发工具中显示的项目名 包名: 客户端中设置->应用->应用列表中显示的名字 兼容的最低版本: 兼容的最高版本: 开发基于的版本:(一般将兼容的最高版本和开发所基于的版本

[iOS基础控件 - 3.5] NSBundle, UIImageView和UIButton的区别, 模拟器和文档

1.NSBundle1> 一个NSBundle代表一个文件夹,利用NSBundle能访问对应的文件夹2> 利用mainBundle就可以访问软件资源包中的任何资源3> 模拟器应用程序的安装路径 /Users/aplle/资源库/Application Support/iPhone Simulator/7.1/Applications 2.UIImageView和UIButton1> 使用场合 * UIImageView: 如果仅仅是显示图片,不需要监听图片的点击 * UIButto

iOS开发NSBundle、UIImageView和UIButton总结

1.NSBundle 1>一个NSBundle代表一个文件夹,利用NSBundle能访问对应的文件夹 2>利用mainBundle就可以访问软件资源包中的任何资源 3>模拟器应用程序的安装路径 2.UIImageView和UIButton 1>使用场合 *UIImageView:如果仅仅是显示图片,不需要监听图片的点击 *UIButton:即要显示图片,又要监听图片的点击 2>两者的相同点:能显示图片 3>不同点: *UIButton能处理点击事件,UIImageVie

iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序

iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序 程序是为了实现特定目标或解决特定问题而用计算机语言编写的命令序列的集合.本章将以编写第一个Sprite Kit程序为主线,为开发者讲解什么是Sprite Kit.苹果账号的注册.Xcode的下载和安装.编写程序.调试等内容.选自iOS游戏框架Sprite Kit基础教程Swift版上册大学霸 1.1  Sprite Kit介绍 从iOS 7开始添加了Sprite Kit.本节将为开发者讲解什么是Sprite Ki

Xamarin iOS教程之进度条和滚动视图

Xamarin iOS教程之进度条和滚动视图 Xamarin iOS 进度条 进度条可以看到每一项任务现在的状态.例如在下载的应用程序中有进度条,用户可以很方便的看到当前程序下载了多少,还剩下多少.QQ音乐播放器中也使用到了进度条,它可以让用户看到当前音乐播放了多少,还剩多少等.在Xamarin.iOS中也提供实现进度条的类,即UIProgressView. [示例2-23]以下将实现进度条加载的效果.具体步骤如下: (1)创建一个Single View Application类型的工程,命名为