开始之前,首先回顾一下iOS7初体验(1)——第一个应用程序HelloWorld中的一张图,如下所示:

本文分享一下Images.xcassets的体验~_~

1. 打开此前使用过的HelloWorld项目,然后单击并打开导航区域中的Images.xcassets,看看都有些什么东东:]:

2. 在图中可以看到中间位置有两个虚线框,感觉应该可以直接拖文件进来。OK,那就先准备一下资源文件,如下图所示:

说明:为方便起见,除Icon7.png之外,其他图标的文件名均沿袭了以往iOS图标的命名规则。

3. 将Icon-Small@2x.png拖拽到第一个虚线框中,将Icon7.png拖拽到第二个虚线框中,如下图所示:

说明Icon-Small@2x.png的尺寸是58*58像素的,而Icon7.png的尺寸是120*120像素的。另外,如果拖入的图片尺寸不正确,Xcode会提示警告信息。

4. 上图中单击实用工具区域的最右侧Show the Attributes inspector(显示属性检查器)图标,能够看到图像集的属性,勾选一下iOS 6.1 and Prior Sizes看看会发生什么变化?

5. 分别将Icon-Small.pngIcon.pngIcon@2x.png顺序拖拽到三个空白的虚线框中,完成之后的效果如下图所示:

6. 右击左侧的AppIcon,在弹出的辅助菜单中选择Show in Finder,看看刚才拖拽都做了哪些工作:

7. 图中除了Contents.json这个文件陌生之外,其他文件都是刚刚拖拽进Xcode的,双击查看一下Contents.json文件内容:

  1. {
  2. "images" : [
  3. {
  4. "size" : "29x29",
  5. "idiom" : "iphone",
  6. "filename" : "Icon-Small.png",
  7. "scale" : "1x"
  8. },
  9. {
  10. "size" : "29x29",
  11. "idiom" : "iphone",
  12. "filename" : "Icon-Small@2x.png",
  13. "scale" : "2x"
  14. },
  15. {
  16. "size" : "57x57",
  17. "idiom" : "iphone",
  18. "filename" : "Icon.png",
  19. "scale" : "1x"
  20. },
  21. {
  22. "size" : "57x57",
  23. "idiom" : "iphone",
  24. "filename" : "Icon@2x.png",
  25. "scale" : "2x"
  26. },
  27. {
  28. "size" : "60x60",
  29. "idiom" : "iphone",
  30. "filename" : "Icon7.png",
  31. "scale" : "2x"
  32. }
  33. ],
  34. "info" : {
  35. "version" : 1,
  36. "author" : "xcode"
  37. }
  38. }

内容一目了然啊,哈哈,以后再也不用去特意记住每个尺寸的图标分别应该叫什么名字了,不知道您会不会,反正我每次都是粘贴复制的,呵呵。以后,只要通过拖拖拽拽就搞定了~_~

8. 图标搞定了,启动图片照做就OK了,具体操作差别不大,完成之后的示意图如下:

9. 再看一下Finder中的内容,如下所示:

10. 在Finder中不难发现多出了两个文件,分别是:Default@2x-1.pngDefault-568h@2x-1.png,双击打开对应的Contents.json文件,内容如下:

  1. {
  2. "images" : [
  3. {
  4. "orientation" : "portrait",
  5. "idiom" : "iphone",
  6. "extent" : "full-screen",
  7. "minimum-system-version" : "7.0",
  8. "filename" : "Default@2x.png",
  9. "scale" : "2x"
  10. },
  11. {
  12. "extent" : "full-screen",
  13. "idiom" : "iphone",
  14. "subtype" : "retina4",
  15. "filename" : "Default-568h@2x.png",
  16. "minimum-system-version" : "7.0",
  17. "orientation" : "portrait",
  18. "scale" : "2x"
  19. },
  20. {
  21. "orientation" : "portrait",
  22. "idiom" : "iphone",
  23. "extent" : "full-screen",
  24. "filename" : "Default.png",
  25. "scale" : "1x"
  26. },
  27. {
  28. "orientation" : "portrait",
  29. "idiom" : "iphone",
  30. "extent" : "full-screen",
  31. "filename" : "Default@2x-1.png",
  32. "scale" : "2x"
  33. },
  34. {
  35. "orientation" : "portrait",
  36. "idiom" : "iphone",
  37. "extent" : "full-screen",
  38. "filename" : "Default-568h@2x-1.png",
  39. "subtype" : "retina4",
  40. "scale" : "2x"
  41. }
  42. ],
  43. "info" : {
  44. "version" : 1,
  45. "author" : "xcode"
  46. }
  47. }

11. 将其中的"filename": "Default@2x-1.png""filename" : "Default-568h@2x-1.png"分别改为"filename": "Default@2x.png""filename" : "Default-568h@2x.png",保存并返回Xcode看看会发生什么?

修改后的Contents.json内容如下:

  1. {
  2. "images" : [
  3. {
  4. "orientation" : "portrait",
  5. "idiom" : "iphone",
  6. "extent" : "full-screen",
  7. "minimum-system-version" : "7.0",
  8. "filename" : "Default@2x.png",
  9. "scale" : "2x"
  10. },
  11. {
  12. "extent" : "full-screen",
  13. "idiom" : "iphone",
  14. "subtype" : "retina4",
  15. "filename" : "Default-568h@2x.png",
  16. "minimum-system-version" : "7.0",
  17. "orientation" : "portrait",
  18. "scale" : "2x"
  19. },
  20. {
  21. "orientation" : "portrait",
  22. "idiom" : "iphone",
  23. "extent" : "full-screen",
  24. "filename" : "Default.png",
  25. "scale" : "1x"
  26. },
  27. {
  28. "orientation" : "portrait",
  29. "idiom" : "iphone",
  30. "extent" : "full-screen",
  31. "filename" : "Default@2x.png",
  32. "scale" : "2x"
  33. },
  34. {
  35. "orientation" : "portrait",
  36. "idiom" : "iphone",
  37. "extent" : "full-screen",
  38. "filename" : "Default-568h@2x.png",
  39. "subtype" : "retina4",
  40. "scale" : "2x"
  41. }
  42. ],
  43. "info" : {
  44. "version" : 1,
  45. "author" : "xcode"
  46. }
  47. }

12. 分别选中下方的"Default@2x-1.png"和"Default-568h@2x-1.png",按删除键删除这两个文件,删除之后的效果如下图所示:

删除之后Finder中的内容如下所示:

13. 接下来我们新建一个图像试试看如何操作,开始之前我们仍然需要准备一下素材,如下图所示:

说明:为了方便在运行时看出不同分辨率的设备使用的背景图片不同,我在素材图片中增加了文字标示。

14. 将准备好的三个Background直接拖拽到Xcode中,完成之后如下图所示:

15. 单击右侧Devices中的Universal,并选择Device Specific,然后在下方勾选iPhoneRetina 4-inch,同时取消勾选iPad,完成之后如下图所示:

16. 将下方Unassigned中的图片直接拖拽到右上角R4位置,设置视网膜屏使用的背景图片,如下图所示:

17. 单击并打开Main.storyboard,选中左侧的View Controller,然后在右侧File Inspector中,取消勾选Use Autolayout选项,如下图所示:

18. 从右侧工具栏中拖拽一个UIImageViewView Controller主视图中,处于其他控件的最底层。同时调整该UIImageView的尺寸属性,如下图所示:

19. 设置该UIImageView使用的图像,如下图所示:

20. 在不同屏幕的模拟器上运行HelloWorld应用,可以看到如下三张图示。

OK!Images.xcassets的初体验一文至此算是告一段落,现做一下简单的小节:

1. 有过Xcode以前版本使用经验的朋友应该会发现,从Xcode 5开始已经无需再去记住Icon.png和Default.png针对不同分辨率使用的文件名了;

2. Xcode 5针对4存视网膜屏的图像提供了单独的支持,解决了以往在兼容四存屏时,有时不得不需要编写专门的代码加载不同的图片;

3. Image.xcassets更加便于管理和维护;

4. 注意:启动图片的PNG图片不要使用透明图片,有兴趣的朋友不妨可以试试看,很丑的,呵呵。

著作权声明:本文由http://blog.csdn.net/liufan321或者http://www.cnblogs.com/liufan9原创,欢迎转载分享。请尊重作者劳动,转载时保留该声明和作者博客链接,谢谢!

Assets.xcassets的详细使用方法的更多相关文章

  1. UIImage加载图片的方式以及Images.xcassets对于加载方法的影响

    UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageName ...

  2. iOS程序两中启动图方式和一些坑LaunchImage 和 Assets.xcassets(Images.xcassets)

    一.通过LaunchScreen.storyboard 作启动图 1>在LaunchScreen.storyboard中拖拽一个imageView放上启动图片 注意:记得勾选右边的 User a ...

  3. PL/SQL Developer 连接Oracle数据库详细配置方法

    PL/SQL Developer 连接Oracle数据库详细配置方法 近段时间很多网友提出监听配置相关问题,客户终端(Client)无法连接服务器端(Server).本文现对监听配置作一简单介绍,给出 ...

  4. NUnit详细使用方法

    http://www.ltesting.net/ceshi/open/kydycsgj/nunit/ http://nunit.org/index.php?p=download NUnit详细使用方法 ...

  5. Html Mailto标签详细使用方法

    http://www.360doc.com/content/09/0805/14/16915_4684377.shtml Html Mailto标签详细使用方法 Html中mailto标签是一个非常实 ...

  6. Xamarin中 ios 修改Assets.xcassets 文件后 无法调试和编译

    根本问题是因为 vs项目里面 没有包含 如果提示找不到对应png 请检查 iOS 项目卸载后 编辑 并找到对应文件检查 <ImageAsset Include="Assets.xcas ...

  7. Assets.xcassets 应用

    1.应用 Assets.xcassets :用来存放图像资源文件 给项目添加 AppIcon 时图标要用 png 格式的,不要用其他格式.当是其它图片格式时 ,不要仅仅修改其后缀名,若仅仅修改后缀名, ...

  8. 使用phpExcelReader操作excel提示The filename *.xls is not readable的详细解决方法

    使用phpExcelReader操作excel提示The filename *.xls is not readable的详细解决方法 是xls文件有问题,另存为新的xls文件,然后导入就不会有这个问题

  9. [Xcode 实际操作]一、博主领进门-(3)使用资源文件夹(Assets.xcassets)导入并管理图片素材

    目录:[Swift]Xcode实际操作 本文将演示如何使用资源文件夹(Assets.xcassets)导入并管理图片素材. [Assets.xcassets]资源文件夹可以方便的进行图片的管理, 在读 ...

随机推荐

  1. Zookeeper(二)数据模型

    Zookeeper数据模型ZNode 问题 ZK的数据模型ZNodes是什么样的: 树形结构,每个叶子节点都存储着数据,且可挂载子节点: 路径作为叶子节点名称,数据作为叶子节点内的数据: Znode可 ...

  2. 20175215 2018-2019-2 第五周java课程学习总结

    第六章学习内容 1.接口 使用interface来定义一个接口. 接口体中包含常量的声明(没有变量)和抽象方法两部分.接口体中只有抽象方法,没有普通的方法,而且接口体中所有的常量的访问权限一定都是pu ...

  3. DS博客作业08—课程总结

    1.当初你是如何做出选择计算机专业的决定的? 开始时我选择的专业就是网络/物联网,计算机专业是一个充满创造性的专业 2.对比开篇博客,哪些方面还存在哪些不足? 这个人就像戏台上的老将军,全身插满fla ...

  4. LeetCode 46. 全排列(Permutations)

    题目描述 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [ ...

  5. 展示组件(Presentational component)和容器组件(Container component)之间有何不同

    展示组件关心组件看起来是什么.展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态.(子组件)容器组件则更关心组件 ...

  6. synchronized与Lock区别简单总结

    类别 synchronized Lock 存在层次 Java的关键字,在jvm层面上 是一个类 锁的释放 1.以获取锁的线程执行完同步代码,释放锁 2.线程执行发生异常,jvm会让线程释放锁 在fin ...

  7. 三步解决IDEA系列开发工具 RubyMine、IntelliJ IDEA 卡顿问题

    近日有小伙伴跟我反映说自己的开发工具很卡,有没有什么解决方案?答案是当然有啦!接下来看看怎么设置! 1.打开RubyMine,或IDEA,上边工具栏选择Help,下拉选择Edit Custom VM ...

  8. web开发(九) 使用javamail进行发送邮件,(使用QQ,163,新浪邮箱服务器)

    在网上看见一篇不错的文章,写的详细. 以下内容引用那篇博文.转载于<http://www.cnblogs.com/whgk/p/6506027.html>,在此仅供学习参考之用. 一.发送 ...

  9. Install the Flash plug-in

    Flash is a plug-in for your web browser that allows you to watch videos and use interactive web page ...

  10. 使用var提升变量声明

    使用var 定义变量还会提升变量声明,即使用var定义:function hh(){ console.log(a); var a = 'hello world';}hh() //undefined 不 ...