IOS7 First Experience (3)--Image resources Images Assets

Before you begin, first review the IOS7 Experience (1)--a diagram in the first application HelloWorld, as shown below:

This article shares the experience of Images.xcassets ~_~

1. Open the previously used HelloWorld project, then click and Open the images.xcassetsin the navigation area to see what's in it:]:

2. In the picture you can see that there are two dashed boxes in the middle position, and feel that you should be able to drag files directly in. OK, first prepare the resource file as shown in:

Note : For convenience, the file names of the other icons follow the naming conventions of the previous iOS icons, in addition to icon7.png .

3. Drag [email protected] to the first dashed box and drag icon7.png to the second dashed box as shown:

Note : The size of[email protected] is 58*58 pixels, and the icon7.png size is 120*120 pixels. In addition, if you drag a picture that is not in the correct size, Xcode prompts you for a warning message.

4. Click on the right side of the utility area to show the Attributes Inspector (display property inspector) icon to see the properties of the image set, tick the iOS 6.1 and Prior Sizes See what's going to happen?

5. Drag the icon-small.png,icon.png , and [email protected] order to three blank dashed boxes respectively, as shown in the following:

6. Right-click on the left side of the AppIconand select Show in Finderfrom the pop-up menu to see what you've just dragged and dragged:

7. In addition to Contents.json This file is unfamiliar, other files are just dragged into Xcode, double-click to view the contents of the contents.json file:

[HTML]View PlainCopy

2. {
4. "Images": [
6. {
8. "Size": "29x29",
10. "Idiom": "iphone",
12. "FileName": "Icon-small.png",
14. "Scale": "1x"
16. },
18. {
20. "Size": "29x29",
22. "Idiom": "iphone",
24. "FileName": "[email protected]",
26. "Scale": "2x"
28. },
30. {
32. "Size": "57x57",
34. "Idiom": "iphone",
36. "FileName": "Icon.png",
38. "Scale": "1x"
40. },
42. {
44. "Size": "57x57",
46. "Idiom": "iphone",
48. "FileName": "[email protected]",
50. "Scale": "2x"
52. },
54. {
56. "Size": "60x60",
58. "Idiom": "iphone",
60. "FileName": "Icon7.png",
62. "Scale": "2x"
64. }
66. ],
68. "Info": {
70. "Version": 1,
72. "Author": "Xcode"
74. }
76. }

Content at a glance ah, haha, and then do not have to deliberately remember each size of the icon should be called what the name, do not know you will, anyway, I always paste copy, hehe. After that, just drag and drop and pull it off ~_~

8. The icon is done, the start picture is OK, the specific operation is not very different, after the completion of the following:

9. Look again at the content in the finder as follows:

10. In the Finder it is not difficult to find out more than two files, respectively:[email protected] and [email protected], double-click to open the corresponding contents.json file , the contents are as follows:

[HTML]View PlainCopy

2. {
4. "Images": [
6. {
8. "Orientation": "Portrait",
10. "Idiom": "iphone",
12. "Extent": "Full-screen",
14. "Minimum-system-version": "7.0",
16. "FileName": "[email protected]",
18. "Scale": "2x"
20. },
22. {
24. "Extent": "Full-screen",
26. "Idiom": "iphone",
28. "Subtype": "Retina4",
30. "FileName": "[email protected]",
32. "Minimum-system-version": "7.0",
34. "Orientation": "Portrait",
36. "Scale": "2x"
38. },
40. {
42. "Orientation": "Portrait",
44. "Idiom": "iphone",
46. "Extent": "Full-screen",
48. "FileName": "Default.png",
50. "Scale": "1x"
52. },
54. {
56. "Orientation": "Portrait",
58. "Idiom": "iphone",
60. "Extent": "Full-screen",
62. "FileName": "[email protected]",
64. "Scale": "2x"
66. },
68. {
70. "Orientation": "Portrait",
72. "Idiom": "iphone",
74. "Extent": "Full-screen",
76. "FileName": "[email protected]",
78. "Subtype": "Retina4",
80. "Scale": "2x"
82. }
84. ],
86. "Info": {
88. "Version": 1,
90. "Author": "Xcode"
92. }
94. }

11. Change the "filename": "[email protected]" and "filename": "[email protected]" to "filename": "[email Protected] " and " filename ":" [email protected] ", save and return to Xcode and see what happens?

The modified Contents.json content is as follows:

[HTML]View PlainCopy

2. {
4. "Images": [
6. {
8. "Orientation": "Portrait",
10. "Idiom": "iphone",
12. "Extent": "Full-screen",
14. "Minimum-system-version": "7.0",
16. "FileName": "[email protected]",
18. "Scale": "2x"
20. },
22. {
24. "Extent": "Full-screen",
26. "Idiom": "iphone",
28. "Subtype": "Retina4",
30. "FileName": "[email protected]",
32. "Minimum-system-version": "7.0",
34. "Orientation": "Portrait",
36. "Scale": "2x"
38. },
40. {
42. "Orientation": "Portrait",
44. "Idiom": "iphone",
46. "Extent": "Full-screen",
48. "FileName": "Default.png",
50. "Scale": "1x"
52. },
54. {
56. "Orientation": "Portrait",
58. "Idiom": "iphone",
60. "Extent": "Full-screen",
62. "FileName": "[email protected]",
64. "Scale": "2x"
66. },
68. {
70. "Orientation": "Portrait",
72. "Idiom": "iphone",
74. "Extent": "Full-screen",
76. "FileName": "[email protected]",
78. "Subtype": "Retina4",
80. "Scale": "2x"
82. }
84. ],
86. "Info": {
88. "Version": 1,
90. "Author": "Xcode"
92. }
94. }

12. Select the "[email protected]" and "[email protected]" below and delete the two files by deleting the keys, as shown in the following results:

After deletion, the contents of the Finder are as follows:

13. Next we create a new image to try how to operate, we still need to prepare the footage before we start, as shown in:

Note: in order to make it easier to see the background images of different resolutions at runtime, I added text markers to the images.

14. Drag the ready three Background directly into Xcode, as shown in the following:

15. Click Universalin the Devices on the right and select Device specific, then tick the iPhone and Retina 4-inch below and uncheck the IPad, as shown below:

16. Drag the image in the lower Unassigned directly to the upper-right corner of the R4 position to set the background image used by the retina screen as shown in:

17. Click and open main.storyboard, select View Controlleron the left, and in the right File Inspector , uncheck use The AutoLayout option, as shown in:

18. From the right-hand toolbar, drag one of the Uiimageview to the View Controller Master, at the bottom of the other controls . Also adjust the size properties of the Uiimageview , as shown in:

19. Set the image used by the Uiimageview as shown in:

20. Run the HelloWorld application on a different screen emulator, and you can see the following three icons.

Ok! The first experience of images.xcassets this is the moment, now do a simple subsection:

1. A friend with previous versions of Xcode should find out that the Icon.png and default.png are not required to remember the filenames used for different resolutions since Xcode 5.

2. Xcode 5 provides a separate support for images of 4 retina screens, which solves the previous need to write special code to load different images when compatible with quad-save screens;

3. Image.xcassets easier to manage and maintain;

4. Note : Start the image of PNG pictures do not use transparent pictures, interested friends may wish to try, very ugly, hehe.

Copyright notice: This article by http://blog.csdn.net/liufan321 or HTTP://WWW.CNBLOGS.COM/LIUFAN9 original, welcome reprint share. Please respect the author Labor, reproduced when the statement and the author of the blog link, thank you!

IOS7 First Experience (3)--Image resources Images Assets