纯代码实现图片预览

1UI效果图

2.代码实现

//
//  ViewController.m
//  04-图片浏览器
//
//  Created by liuhang on 15/11/20.
//  Copyright © 2015年 liuhang. All rights reserved.
//

#import "ViewController.h"
/*
 1.查看界面元素需要哪些标签
      UIImageView 图片显示
      UIButton 按钮
      UILabel  标签
   @property  生成set和get 并生成员变量 _noLabel
 
 2.代码布局
    注意点 ：  UIImage 是图片，不是控件；他的父类为NSObject;
              UIImageView是加载图片的控件，父类为UIView
 3.设置监听，实现功能
 */

@interface ViewController ()
// 定义属性名称
// 1.序号标签
@property (nonatomic ,strong)  UILabel *noLabel;

// 2.图片按钮
@property (nonatomic , strong) UIImageView *iconImage;

// 3.文字描述标签
@property (nonatomic , strong) UILabel *descLabel;

// 4.左按钮
@property (nonatomic , strong) UIButton *leftButton;

// 5.右按钮
@property (nonatomic , strong) UIButton *rightButton;


@end

@implementation ViewController

// 初始化加载 : 在viveDidLoad创建界面
- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    // 1.添加序号标签  slef.noLabel
    _noLabel =  [[UILabel alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, 40)];
    _noLabel.text = @"1/5";  // 设置文本内容
    _noLabel.textAlignment = NSTextAlignmentCenter;
    NSLog(@"屏幕的宽度 = %f",self.view.bounds.size.width);  // 414(6s)
    [self.view addSubview:_noLabel];  // 将视图添加到父视图
    
    // 2.添加图片
    CGFloat imageW = 200;
    CGFloat imageH = 200;
    // 图片居中，(获取屏幕长度 - 图片宽度) * 0.5   乘法的效率要不除法的效率高一点
    CGFloat imageX = (self.view.bounds.size.width - imageW) * 0.5;
    // 高度比序号标签高30
    CGFloat imageY = _noLabel.bounds.size.height + 30;
    _iconImage = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)];
    // _iconButton.backgroundColor  = [UIColor redColor];  设置背景颜色检测正确性
    _iconImage.image = [UIImage imageNamed:@"biaoqingdi"];  // 设置背景图片
    [self.view addSubview:_iconImage];
    
    // 3.描述文字
    // CGRectGetMaxY是获取当前控件y坐标值 + 控件高度的值
    CGFloat descY = CGRectGetMaxY(self.iconImage.frame);
    _descLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, descY , self.view.bounds.size.width, 100)];
    _descLabel.text = @"表情帝";
    _descLabel.textColor = [UIColor redColor];  // 设置文本颜色
    _descLabel.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:_descLabel];
    
    // 4.添加左按钮
    _leftButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40, 40)];  // 初始化按钮位置
    // 动态设置按钮位置
    CGFloat centerY = self.iconImage.center.y;
    CGFloat centerX = self.iconImage.center.x * 0.3;
    _leftButton.center = CGPointMake(centerX, centerY);
    // 按钮设置背景图片只能通过set方法
    [_leftButton setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
    [_leftButton setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
    [self.view addSubview:_leftButton];
    
    // 5.设置右按钮
    _rightButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    _rightButton.center = CGPointMake(self.view.bounds.size.width - centerX, centerY);
    // 按钮设置背景图片只能通过set方法
    [_rightButton setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
    [_rightButton setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
    [self.view addSubview:_rightButton];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end