1倍图 ios_ios 系统一倍图到三倍图尺寸 - CSDN
  • 一直做移动端app(不包括ios和ipad),所以对一些手机端的比较熟悉,但没做过ipad端的,今天工作中正好有碰到个ipad设计(效果+切图),刚开始以为和手机端一样,但做的过程中发现还是有不一样的地方,比如常识...

    工作中,一直做移动端app(不包括ios和ipad),所以对一些手机端的比较熟悉,但没做过ipad端的,今天工作中正好有碰到一个ipad设计(效果图+切图),刚开始以为和手机端一样,但做的过程中发现还是有不一样的地方,比如常识性的切图(一倍图,@2x,@3x),我开始以为只要图片够大,就不用整什么两倍图,三倍图的,只要图片能自适应各种屏幕就行了吧,但后来发现还是必须要有的,ios系统必须要这个bg@2x.png和bg@3x.png,加上一倍图bg.png就是这三张图必须要有,不管你的原图多大,多高清,你设置的多自适应,这三张图你必须提供!呜呜呜..........常识性的东东.......

    这过程中找了一些资料,搜集整合,分享给一些有需要的伙伴们!

     

    一,ios开发为什么要弄@2x和@3x两套图 ?

    1.对不同size的屏幕会自动匹配不同的图片。代码中只要写前面的图片名就好了,系统会自动找到对应图片的。

    2.@2x 和 @3x 名字是一样的,系统会自动判断添加哪套图的

    3.@2x给Retina屏幕用的,@3x是给6plus用的

    例如:

    一个是30px*30px的PNG图片,用原名来命名即可,例如sample.png。

    一个是60px*60px的PNG图片,这个要用原名@2x来命名,例如sample@2x.png

    一个是90px*90px的PNG图片,这个要用原强调内容名@3x来命名,例如sample@3x.png

    这样把这三张图片导入进工程,你会神奇地发现,这三个文件居然会被iOS统一识别为sample.png

     

    二,应用场景

    (1) 1x的图标用于1:1的屏幕,非视网膜屏,例如iPhone 3GS、(/20140414DEL/ //早期iPhone 4)

    非视网膜屏的众多iPad等。

    (2) 2x的图标用于1:2的屏幕,大部分视网膜屏,机型如(/20140414ADD/ iPhone 4、)iPhone 4S

    、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。

    (3) 3x的图标目前应用于1:3的屏幕,即iPhone 6Plus

     

    展开全文
  • 例:图片为400X400的,在ios上打开canvas程序,然后绘画在400X400的canvas画板上 然后导出下载图片,下载出来的图片是800X800的 这个愿意是因为ios的分辨率大,我查到了,但是我想要的是,让他下载出来保持和...
  • iOS 一套启动

    2020-07-28 23:32:33
    一套 iOS7 iOS8的启动图片,测试用。
  • iOS图片拉伸技巧

    2013-03-02 18:24:22
    纵观移动市场,款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能、极强的用户体验、华丽简洁的外观。华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设计...

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能、极强的用户体验、华丽简洁的外观。华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设计好的图片,将会糟蹋了这些设计,功亏一篑。

    比如下面张图片,本来是设计来做按钮背景的:

    button.png,尺寸为:24x60

    现在我们把它用作为按钮背景,按钮尺寸是150x50:

    // 得到view的尺寸
    CGSize viewSize = self.view.bounds.size;
    
    // 初始化按钮
    UIButton *button = [[UIButton alloc] init];
    // 设置尺寸
    button.bounds = CGRectMake(0, 0, 150, 50);
    // 设置位置
    button.center = CGPointMake(viewSize.width * 0.5f, viewSize.height * 0.5f);
    
    // 加载图片
    UIImage *image = [UIImage imageNamed:@"button"];
    // 设置背景图片
    [button setBackgroundImage:image forState:UIControlStateNormal];
    
    // 添加按钮
    [self.view addSubview:button];

    运行效果图:

    可以看到,效果非常地差。原因很简单,因为原图大小为24x60,现在整张图片被全方位拉伸为150x50,比较严重的是图片的4个角。

    有些人可能马上想到一个解决方案,你叫美工把图片做大一点不就好了么,怎么拉伸都没事。没错,这是一种解决方案,不过不建议采取。原因很简单:1.图片大,导致安装包也大,加载到内存中也大;2.有更好的解决方案。

    细看一下图片,其实图片会变得难看,完全是因为4个角被拉伸了,中间的拉伸并没有明显地丑化外观。因此要想小图片被拉伸后不会变得难看,在图片拉伸的时候,我们只需拉伸图片的中间一块矩形区域即可,不要拉伸边缘部分。

    比如只拉伸下图的矩形区域,上下左右的边缘都不拉伸:

    iOS中提供很好用的API帮我们实现上述功能。到iOS 6.0为止,iOS提供了3种图片拉伸的解决方案,接下来分别详细介绍这些方案。

    一、iOS 5.0之前

    iOS中有个叫端盖(end cap)的概念,用来指定图片中的哪一部分不用拉伸。比如下图中,黑色代表需要被拉伸的矩形区域,上下左右不需要被拉伸的边缘就称为端盖。

    使用UIImage的这个方法,可以通过设置端盖宽度返回一个经过拉伸处理的UIImage对象

     - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;

    这个方法只有2个参数,leftCapWidth代表左端盖宽度,topCapHeight代表顶端盖高度。系统会自动计算出右端盖宽度(rightCapWidth)和底端盖高度(bottomCapHeight),算法如下:

    // width为图片宽度
    rightCapWidth = width - leftCapWidth - 1;
    
    // height为图片高度
    bottomCapHeight = height - topCapHeight - 1

    经过计算,你会发现中间的可拉伸区域只有1x1

    // stretchWidth为中间可拉伸区域的宽度
    stretchWidth = width - leftCapWidth - rightCapWidth = 1;
        
    // stretchHeight为中间可拉伸区域的高度
    stretchHeight = height - topCapHeight - bottomCapHeight = 1;

    因此,使用这个方法只会拉伸图片中间1x1的区域,并不会影响到边缘和角落。

    下面演示下方法的使用:

    // 左端盖宽度
    NSInteger leftCapWidth = image.size.width * 0.5f;
    // 顶端盖高度
    NSInteger topCapHeight = image.size.height * 0.5f;
    // 重新赋值
    image = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];

    调用这个方法后,原来的image并不会发生改变,会产生一个新的经过拉伸的UIImage,所以第6行中需要将返回值赋值回给image变

    运行效果:

    可以发现,图片非常美观地显示出来了

    注意:

    1.这个方法在iOS 5.0出来后就过期了

    2.这个方法只能拉伸1x1的区域

     

    二、iOS 5.0

    在iOS 5.0中,UIImage又有一个新方法可以处理图片的拉伸问题

    - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

    这个方法只接收一个UIEdgeInsets类型的参数,可以通过设置UIEdgeInsets的left、right、top、bottom来分别指定左端盖宽度、右端盖宽度、顶端盖高度、底端盖高度

    CGFloat top = 25; // 顶端盖高度
    CGFloat bottom = 25 ; // 底端盖高度
    CGFloat left = 10; // 左端盖宽度
    CGFloat right = 10; // 右端盖宽度
    UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
    // 伸缩后重新赋值
    image = [image resizableImageWithCapInsets:insets];

    运行效果:

     

    三、iOS 6.0

    在iOS6.0中,UIImage又提供了一个方法处理图片拉伸

    - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

    对比iOS5.0中的方法,只多了一个UIImageResizingMode参数,用来指定拉伸的模式:

    • UIImageResizingModeStretch:拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片
    • UIImageResizingModeTile:平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片

    CGFloat top = 25; // 顶端盖高度
    CGFloat bottom = 25 ; // 底端盖高度
    CGFloat left = 10; // 左端盖宽度
    CGFloat right = 10; // 右端盖宽度
    UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
    // 指定为拉伸模式,伸缩后重新赋值
    image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];

    运行效果:

    展开全文
  • iOS个文件夹下的所有3倍图自动转成2倍图程序源码, Mac OS端的命令程序源码

    如果开发iOS的话,有的时候来不及将所有的三倍图转成2倍图,可以写一个Mac版本的命令行小工具,自动将一个文件夹下的所有三倍尺寸的图片转成2倍图片,并且将hello@3x.com命令为hello@2x.png。当然还是有设计一张一张切出来也是可以的,这里只是提供了一个快捷的方法

    也可以自己修改里面的比例,自动裁剪出更多尺寸的图片或者支持更多的功能

    值得注意的是,Mac版本的裁剪也需要考虑屏幕是否是高清屏幕, 下面是一些主要部分的代码:

    <pre name="code" class="objc">CGFloat scale = [NSScreen mainScreen].backingScaleFactor;
    NSLog(@"scale: %f", scale);
    CGFloat scaleFactor = 1.0 / scale;
    // 下面是裁剪的时候,需要转换图片的尺寸。
    NSSize newSize = NSMakeSize(image.pixelsWide * scaleFactor * 2.0 / 3.0, image.pixelsHigh * scaleFactor * 2.0 / 3.0);
        
    NSImage *newImage = [self resizeImage:image size:newSize];
        
    NSData *outputData= [newImage TIFFRepresentation];
    NSBitmapImageRep *imageRep = [NSBitmapImageRep imageRepWithData:outputData];
    NSDictionary *imageProps = [NSDictionary dictionaryWithObject:[NSNumber numberWithFloat:0.9] forKey:NSImageCompressionFactor];
    NSData *data = [imageRep representationUsingType:NSPNGFileType properties:imageProps];
        
    BOOL ok = [data writeToFile:newPath atomically:YES];
    NSLog(@"save %@ ok:%@", newPath, ok ? @"YES" : @"NO");
    
    

    代码中新图片使用的PNG格式,如果需要使用JPEG格式的话,可以自己下载代码进行修改。

    代码下载地址:

    http://download.csdn.net/detail/liyan223/8327709

    代码运行方式:

    clang++ -o imageResizer main.mm -framework Foundation -framework Cocoa -framework QuartzCore
    ./imageResizer imageFolderPath
    当然上面只是其中的一种方式,也可以利用上面的代码,自己简单地加一个图形界面



    展开全文
  • 公司有个工程在iOS7下的图片icon

    如果对icon的后缀@2x或@3x理解不够,在iOS7和iOS8下图片会出现显示异常(尺寸减半)

    三张图片 red.png(50x30)      red@2x.png(100x60)        red@3x.png(150x90)

    测试代码:


    UIImage *image1 = [UIImage imageNamed:@"red"];

    NSLog(@“%f,%f",image1.size.width,image1.size.height);

    UIImageView *imageView1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, image1.size.width, image1.size.height)];

    [imageView1 setImage:image1];

    [self.view addSubview:imageView1];

        

    UIImage *image2 = [UIImage imageNamed:@"red@2x"];

    NSLog(@"%f,%f",image2.size.width,image2.size.height);

    UIImageView *imageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 100, image2.size.width, image2.size.height)];

    [imageView2 setImage:image2];

    [self.view addSubview:imageView2];


    UIImage *image3 = [UIImage imageNamed:@"red@3x"];

    NSLog(@"%f,%f",image3.size.width,image3.size.height);

    UIImageView *imageView3 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 200, image3.size.width, image3.size.height)];

    [imageView3 setImage:image3];

    [self.view addSubview:imageView3];


    在iOS7下面显示的效果:



    在iOS8下显示的效果:


    好了,那么问题来了:为什么会造成在iOS7和iOS8下出现这种图片显示的差异呢?

    答案来了:

    我们取本地图片有两种方法

    1、UIImage *image = [UIImage imageNamed:imageName];

    2、NSString *path = [[NSBundle mainBundle]pathForResource:imageName];

       UIImage *image = [[UIImage alloc] initWithContentsOfFile:path];

    先说说第一种方法。根据上面运行的差异,我们可以得到这样的结论,iOS8对后缀@2x或者@3x是敏感的,系统会根据设备而去使用染@2x还是@3x进行渲染。

    而size都是取一倍的图片大小(视网膜效果)。而iOS7对文件后缀@2x或@3x是不敏感的,他直接取red@2x或@3x这个文件的size,使用red@2x或@3x的图片。

    而iOS8会取red文件这个size,不过使用的图片是red@2x或@3x,因为要保证像素的效果。其实图片名后缀@2x或@3x是系统根据不同的设备去使用相应的图片(plus使用的是@3x)。

    所以我们使用第一种方法(imageNamed:)去渲染图片是不应该加后缀@2x或@3x的,后缀是系统自己判断的使用的,我们写图片名只要写如red.png这样就行了,然后系统会根据不同设备

    使用相应的图片。这样不管是对后缀敏感的iOS8还是不敏感的iOS7都能正确的得到相应的图片。再说说第二种方法,这种方法渲染图片是直接取图片文件的路径,如果方法后面写的图片文件

    名是red.png的话就直接使用这张图片(指哪就用哪),如果没用red.png这个文件image就位nil了,而使用第一种方法image就不会。第二种方法一般用来渲染比较大的本地图片,一般尺寸

    是固定的。




    展开全文
  • IOS 本地图片加载

    2019-06-29 16:43:57
    iOS开发中生成个UIImage对象的方法通常有两种 1.利用imageNamed方法 2.使用imageWithContentsOfFile 下面介绍这两中方法的区别: imageNamed,从应用bundle中寻找图片加载到缓存中,适用于图片较小或经常使用。...


    在iOS开发中生成一个UIImage对象的方法通常有两种
    1.利用imageNamed方法
    2.使用imageWithContentsOfFile
    下面介绍这两中方法的区别:
    imageNamed,从应用bundle中寻找图片加载到缓存中,适用于图片较小或经常使用。加载图片太大容易产生内存泄漏
    imageWithContentsOfFile:

    NSString *filePath = [[NSBundle mainBundle] pathForResource:fileName ofType:extension];
    UIImage *image = [UIImage imageWithContentsOfFile:filePath];

    使用时稍微麻烦一点,以文件数据形式被加载。返回的对象不会保存在缓存中,一旦对象销毁就会释放内存。

    然后,项目中图片资源存放一般会有两种形式:存放在Assets目录下 和 存放在项目根目录下自行管理,都是打包在mainBundle文件中,其中

    Assets.xcassets在app打包后,以Assets.car文件的形式出现在bundle中。其作用在于:

    • 自动识别@2x,@3x图片,对内容相同但分辨率不同的图片统一管理。
    • 可以对图片进行剪裁和拉伸处理。

    imageWithName既可以加载Assets目录下的资源也可以加载项目自定义的图片文件路径,区别是 :

    1.加载Assets目录下的图片对格式有要求,必须是png格式

    2.加载自定义图片路径时不能简写图片名,需要带上图片的扩展名:如:

        // pic.jpg处于根目录下  
        [UIImage imageNamed:@"pic"]; // 错误,图片未能正确加载  
        [UIImage imageNamed:@"pic.jpg"]; // 正确  

    然而 imageWithContentsOfFile 只能加载到自定义的图片管理路径中的图片资源,加载不到Assets目录下的图片

    展开全文
  • 在移动端开发中,有的时候可能遇到这样的问题,我从别人网站上下载下来的图片,然后做出H5页面,但是在浏览器中和android中都显示正常,可是ios图片就不显示了,这个时候就需要注意了,可能是图片的格式问题...
  • 1. 第步 点击 Assets.xcassets 进入图片管理,然后点击“+”号如,选择"New iOS Launch Image" 2. 第二步 如,右侧的勾选可以让你选择是否要对ipad,横屏,竖屏,以及低版本的ios系统做支持.这边我...
  • ios图片旋转,并得到旋转后的图片
  • ios显示图片的方法

    2016-09-13 14:16:00
    ios显示和加载图片的方法
  • iOS 改变图片颜色

    2019-09-24 18:23:47
    在做项目的时候碰到了个需求,把app的主题颜色改变成另外种颜色,由于没有给出新的素材图片,需要把现有图片的颜色改变一下。下面是改变图片颜色的方法(一般对于单一颜色的图片) imageWithRenderingMode: ...
  • iOS图片点击点击放大

    2015-05-20 17:24:37
    完美封装,个类句代码即可调用.IOS完美实现 创建了个专门用于放大图片的类,以下为.h文件 ? 1 2 3 4 5 6 7 8 9 10 11 #import "">  ...
  • ios 封装framework内部加载图片
  • JAVA后台,处理Android和IOS上传的图片。安卓可以直接用输入输出流将图片写入文件,但是IOS不行, 直接使用输入输出流上传的图片会出现图片大小和原图片大小不一致的问题,导致图片打不开, 我现在是将IOS图片转为...
  • 本课程主要介绍了开发iOS app的一些基本情况。例如,需要的硬件和软件条件,如何申请开发者账号,XCode的常用功能介绍。后给出iOS App的案例来演示开发App的过程。
  • 最近闲来无事, 突然想到个有趣的技能,我们看别人高仿一些项目,奇怪图片资源和其他资源文件是怎么拿到的,今天,我就一步一步教大家拿到iOS应用里面的所有资源.说到这里,就会提到个常识: Images....
  • iOS 上传图片到阿里云的oss 之前项目图片语音等资源文件都是直接上传数据流给服务器,然后服务器跟阿里对接,传递路径都是:客户端—&gt;后台—&gt;阿里。近来这个项目绕开后台 直接将图片上传到阿里云的...
  • 本文提供的方法可以只需要一套@3x的图片兼容所有iOS设备和系统(当然了,这里指大于4.0的系统,4.0的系统还有人用么),本方法采用替换UIImage的个类方法和UIImageNibPlaceholder的个实例方法来实现的(其实就是...
  • IOS开发中,经常有限制图片文件大小的,有的用户图片很大,导致上传时间慢,造成问题。 如:微信分享中,如果图片的大小好像大于50kbytes,就分享失败,而且没有任何提示。 所以,我添加了两个函数: 、修改...
1 2 3 4 5 ... 20
收藏数 873,887
精华内容 349,554
关键字:

1倍图 ios