纯代码实现图片预览

原创 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



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

猫猫学IOS(三)UI之纯代码实现UI——图片查看器

猫猫分享,必须精品先看效果主要实现类似看新闻的一个界面,不用拖拽,纯代码手工写。 首先分析app可以很容易知道他这里有两个UILabel一个UIImageView还有两个UIButton定义UIVi...
  • u013357243
  • u013357243
  • 2015年03月19日 12:43
  • 2429

纯CSS实现图片轮播

原文:http://www.aichengxu.com/view/4182590 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花...
  • kencaber
  • kencaber
  • 2016年10月09日 10:33
  • 2121

JS----纯JS可视化的文件上传

纯JS可视化的文件上传
  • damys
  • damys
  • 2015年12月31日 10:32
  • 1443

纯代码实现自定义UITableView的cell

代码实现自定义UITableView的cell 新建一个继承自UITableViewCell的类 重写initWithStyle:reuseIdentifier:方法,在里面实现:添加所有需要显示的子...
  • u010545519
  • u010545519
  • 2016年05月04日 17:03
  • 3398

IOS开发之纯代码界面----基本控件使用篇4

第三课:
  • niejing654092427
  • niejing654092427
  • 2015年04月21日 18:13
  • 514

ajaxFileUpload实现图片的上传并预览

先来个最简单的  单图上传并预览 html: 引入js文件 头像 一个显示图片的标签,一个是文件上传的input标签(设置隐藏) js: ...
  • qq_31858333
  • qq_31858333
  • 2016年03月09日 09:40
  • 149

纯JS写的一个轮播图

最近学习了一下JavaScript,按照其他代码的思路,我写了一个JS的轮播图。代码如下: *{ padding:0px; margin: 0px; } ...
  • Hallin_Me
  • Hallin_Me
  • 2016年04月20日 15:17
  • 6716

IOS-UITableView上的纯代码实现

以前在练习这些常用控件的时候 都是或多或少的 使用storyboard做一些 配置, 这次大胆的尝试一下纯代码. 还好,顺利完成了.   做的东西很简单是一个丑到爆的QQ好友列表 ...   ===...
  • xtianshi00
  • xtianshi00
  • 2015年11月01日 13:54
  • 533

UIScrollView原理、属性、代理方法及有关功能实现(用纯代码方式)

一、UIScrollView实现原理 滚动原理:通过修改scrollview的bounds.origin。可以通过以下代码验证 - (void)scrollViewDidScroll:(UIS...
  • yuanjilai
  • yuanjilai
  • 2016年08月22日 01:42
  • 732

IOS 页面跳转方法(采用Storyboard或者纯代码)

IOS页面跳转主要分为两种方式:  1,采用XCode最新的storyboard模板,通过segue 的方式,基本不用写代码,非常的方便,适合个人开发者,做项目不大的开发简直是利器。但是由于story...
  • xzafei
  • xzafei
  • 2014年02月23日 14:51
  • 4128
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯代码实现图片预览
举报原因:
原因补充:

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