iOS开发笔记——关于Assets.xcassets的学习

今天在网上找到了Assets.xcassets的相关博客,对Assets.xcassets进行比较全面的学习,现记录一下:

感谢一下网友的博客,我们之所以可以站的更高走的更远,是因为我们站在巨人的肩膀上,博客传送门:

Assets.xcassets的使用:http://www.cnblogs.com/W-Kr/p/5381750.html

iOS 我所知道的Assets.xcassets:http://www.jianshu.com/p/867d9fa85770


一、Assets.xcassets能干什么

Assets.xcassets是用来存放图像资源文件;

二、使用Assets的好处

1、自动管理图片,如@1x,@2x图片,使用的时候使用Asset 名字即可;
2、管理应用的Icon和Default图片,这个挺方便的,可以完全抛开以前规范命名如Icon.png,Icon@2x.png,Xcode会自动识别尺寸然后匹配进去;
3、个人觉得方便模块图片管理,可以针对模块建立Component1.xcassets,在这个Category中去建立新的Image set;
4、可以可视化管理图片拉伸,从而抛弃到处使用resizeImage...来获取拉伸图片;

三、使用Assets注意事项

1、在Assets中的图片不能通过imageWithContentsOfFile:加载;

2、imageName:加载的图片要么是Assets中的图片,要么是资源包中的图片,如果要用imageName:加载其他的图片,必须在文件名后面添加扩展名,如:

UIImage *image=[UIImage imageNamed:@"plus.png"];

四、如何使用Assets

1、创建Asset Catalog:

方法:使用 File - new - File - Resource - Asset Catalog,会需要输入名字和选择Target;

建立完毕后单击,文档会将整个操作区域从左到右分为三部分,SetList, Set Viewer, Set attributes inspector;

在SetList区域左下角会有新增(+)和删除(-)按钮,实际在区域内右击也会有对应选项;

New Image Set:图片夹,这个常用;

New App Icon:用于图标管理;

New Lauch Image: 启动图;

New Folder:新文件夹,支持在文件夹嵌套;

2、新建New Image Set

使用New Image Set建立一个新的图片夹,如下图中的darc_component_temp,在属性栏中可以选择设备的类型,根据设备的不同,会有多个占位图片;


添加图片的方式,可以import,也可以直接将图片拖到对应的占位符位置,如下图;


提示:你还可以将三张图片一起拖到Assets中,Assets会自动帮你生成一个New Image Set,前提是这三张图片是同一个名字的三张不同格式命名,如:myImage.png,myImage@2x.png,myImage@3x.png;

3、关于Image Set的介绍

Image Set 是图片集合,imageName:中name指的不是图片的名称,而是图片集合的名称,如:

[UIImage imageNamed:@"图片集合名称"];

点击某个Image Set,右键选择Show in Finder,可以看到有若干个文件夹,每个文件夹代表你创建的一个Image Set;

文件夹中,有一个Contents.json文件和若干张图片,我们设置好的图片都被拷贝一份添加到这些文件夹中;

关于Contents.json的内容,如下:

<span style="color:#494949;">{
  "images" : [
    {
      "idiom" : "universal",</span><span style="color: rgb(73, 73, 73); white-space: pre;">	</span><span style="color:#ff6666;">//设备类型,默认是universal</span><span style="color:#494949;">
      "filename" : "my.png",</span><span style="color: rgb(73, 73, 73); white-space: pre;">	</span><span style="color:#ff6666;">//图片名称</span><span style="color:#494949;">
      "scale" : "1x"</span><span style="color: rgb(73, 73, 73); white-space: pre;">		</span><span style="color:#ff6666;">//像素倍数</span><span style="color:#494949;">
    },
    {
      "idiom" : "universal",
      "filename" : "my@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "my@3x.png",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}</span>

图片的相关内容,以json格式的形式记录在Contents.json文件中;

4、根据sizeClass设置图片,比如6Plus在横屏的时候显示A图片,在竖屏的时候显示B图片那么久可以设置Devices下面的 Width 和 Height

5、Scale Factors 可设置矢量图(Singele Vector)和位图(Vector wiht Overrides),我们知道xcode可以放PDF格式的图片代替@2x,@3x图片,这样即使放大也不会失真

6、Render As 默认是Default还有两个分别是Oriminal Image(始终绘制图片原始状态,不使用Tint Color)Template Image(始终根据Tint Color绘制图片,忽略图片的颜色信息);

比如设置UITabBarItem中的图片的时候,默认情况下回对图片进行渲染成蓝色,(具体可以参照demo的第一个UITabBarItem),这个时候我们需要回复图片本来的颜色,这是图片的渲染为Oriminal Image就行了。
如果用代码实现的话,是这样:

<span style="font-size:14px;">[[UITabBarItem alloc] initWithTitle:tittle image:[[UIImage imageNamed:@"image"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] selectedImage:[[UIImage imageNamed:@"selectedImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];</span>

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页