IOS image resources Images Assets, iosassets

IOS image resources Images Assets, iosassets

1. Click and openImages. xcassetsTo see what is happening:]:

 

2. In the figure, we can see that there are two dashed boxes in the middle. We feel that we can drag the file in directly. OK, prepare the resource file first, as shown in:

Description: For convenience,Icon7.pngThe names of other icons follow the naming rules of previous iOS icons.

3. SetIcon-Small@2x.pngDrag to the first dotted lineIcon7.pngDrag to the second dotted line, as shown in:

 

Description:Icon-Small@2x.pngThe dimension is58*58Pixel, whileIcon7.pngThe dimension is120*120Pixel. In addition, if the size of the dragged image is incorrect, Xcode will prompt a warning message.

4. Click the rightmost of the utility areaShow the Attributes inspector(Display property checker)Icon to view the attributes of the image set. CheckIOS 6.1 and Prior SizesWhat changes will happen?

 

5. SeparateIcon-Small.png,Icon.pngAndIcon@2x.pngDrag them to the three blank dotted boxes in sequence. The following figure shows the effect:

6. Right-clickAppIconIn the pop-up menu, selectShow in FinderTo see what the drag and drop operations have done:

7. In additionContents. jsonIn addition to this file, other files are just dragged into Xcode. Double-click to view it.Contents. jsonFile Content:

{  "images" : [    {      "size" : "29x29",      "idiom" : "iphone",      "filename" : "Icon-Small.png",      "scale" : "1x"    },    {      "size" : "29x29",      "idiom" : "iphone",      "filename" : "Icon-Small@2x.png",      "scale" : "2x"    },    {      "size" : "57x57",      "idiom" : "iphone",      "filename" : "Icon.png",      "scale" : "1x"    },    {      "size" : "57x57",      "idiom" : "iphone",      "filename" : "Icon@2x.png",      "scale" : "2x"    },    {      "size" : "60x60",      "idiom" : "iphone",      "filename" : "Icon7.png",      "scale" : "2x"    }  ],  "info" : {    "version" : 1,    "author" : "xcode"  }}

The content is clear at a glance. Haha, you no longer need to remember the name of the icon of each size. I don't know if it will happen. I copy and paste it every time. In the future, you only need to drag and drop to get it done ~ _~

8. After the icon is completed, it is OK to start the image. The specific operation is not much different. The following is the result after the operation:

 

9. Let's take a look at the content in the Finder, as shown below:

 

10. It is not difficult to find two more files in the Finder:Default@2x-1.pngAndDefault-568h@2x-1.png, Double-click to open the correspondingContents. jsonFile, the content is as follows:

{  "images" : [    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "minimum-system-version" : "7.0",      "filename" : "Default@2x.png",      "scale" : "2x"    },    {      "extent" : "full-screen",      "idiom" : "iphone",      "subtype" : "retina4",      "filename" : "Default-568h@2x.png",      "minimum-system-version" : "7.0",      "orientation" : "portrait",      "scale" : "2x"    },    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "filename" : "Default.png",      "scale" : "1x"    },    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "filename" : "Default@2x-1.png",      "scale" : "2x"    },    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "filename" : "Default-568h@2x-1.png",      "subtype" : "retina4",      "scale" : "2x"    }  ],  "info" : {    "version" : 1,    "author" : "xcode"  }}

11."Filename": "Default@2x-1.png"And"Filename": "Default-568h@2x-1.png"Change"Filename": "Default@2x.png"And"Filename": "Default-568h@2x.png", Save and return to Xcode to see what will happen?

The modified Contents. json content is as follows:

{  "images" : [    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "minimum-system-version" : "7.0",      "filename" : "Default@2x.png",      "scale" : "2x"    },    {      "extent" : "full-screen",      "idiom" : "iphone",      "subtype" : "retina4",      "filename" : "Default-568h@2x.png",      "minimum-system-version" : "7.0",      "orientation" : "portrait",      "scale" : "2x"    },    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "filename" : "Default.png",      "scale" : "1x"    },    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "filename" : "Default@2x.png",      "scale" : "2x"    },    {      "orientation" : "portrait",      "idiom" : "iphone",      "extent" : "full-screen",      "filename" : "Default-568h@2x.png",      "subtype" : "retina4",      "scale" : "2x"    }  ],  "info" : {    "version" : 1,    "author" : "xcode"  }} 

12. SelectDefault@2x-1.png"AndDefault-568h@2x-1.png", PressDelete keyTo delete these two files, see the following figure:

After deletion, the content in the Finder is as follows:

13. Next, create a new image and try to operate it. We still need to prepare the materials before starting, as shown in:

Note:To help you see different background images used by devices with different resolutions during operation, I added text marks to the clip image.

14. Prepare threeBackgroundDrag it to Xcode, as shown in:

 

15. ClickDevicesInUniversalAnd selectDevice SpecificAnd then selectIPhoneAndRetina 4-inchAnd deselect the check box.IPad, As shown in:

 

16. ClickUnassignedDrag the image in to the upper right cornerR4Position. Set the background image used by the Retina screen, as shown in:

17. Click and openMain. storyboard, SelectView ControllerAnd then on the right sideFile Inspector, UncheckUse AutolayoutOptions, as shown in:

18. DragUIImageViewToView ControllerIn the main view, andAt the bottom of other controlsAnd adjustUIImageViewAs shown in:

 

29. Set thisUIImageViewShows the image used:

20. Run the HelloWorld application on different screen simulators. The following three diagrams are displayed.

 

OK! The first experience of Images. xcassets has come to an end. Here is a simple section:

1. If you have experience using Xcode versions earlier, you may find that you have no need to initialize icon.pngand default.png for different resolutions;

2. Xcode 5 provides independent support for images with 4-saved retina screens. In the past, when it was compatible with four-saved screens, it sometimes had to write special code to load different images;

3. Image. xcassets facilitate management and maintenance;

4.Note:: Do not use transparent images for PNG images of starting images. If you are interested, try it. It's ugly.