纯代码实现图片预览

原创 2015年11月20日 22:51:54

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



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

相关文章推荐

IE9下本地图片预览JS代码修改

AlphaImageLoader 说明: 在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Gr...

IE9下本地图片预览JS代码修改

原代码已经很好,我只加了少少,控制滚动条的出现,和预览时图片过小的情况: IE下一定要加  alert("已成功选择图片!"); 才按比例缩小,奇怪@   #kk{  width:400p...

超NB的js图片预览效果代码-小图热点 大图清醒显示

Javascript Images zoom-out view sample. Brought to you by 斩梦人.天天 QQ:22062019 var dshowW=450; ...

IE9下多个file上传图片预览,HTML代码

单个处理: var sAllowExt = "jpg|gif|png|bmp"; //后缀判断 function IsExt(url, opt){ var sTemp; var b=false...

浏览器图片选择预览、旋转、批量上传的JS代码实现

// 上传回调         // resultList -> ['file1', 'file2'] 为上传成功的file name     &#...

带图片预览功能的图片上传代码

第一种方法: 带图片预览功能的图片上传代码 function viewmypic(mypic,imgfile) { if (imgfile.value){ mypic.src=...

J2ME 拼图游戏 快速开发 全过程 之代码祥解(4 )——图片操作类、图片预览后处理类

图片操作类(转自网上),代码: package cn.edu.xtu.tilepuzzle.model; import javax.microedition.lcdui.Font; im...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)