Simple use of Images. xcassets, and use of images. xcassets

Simple use of Images. xcassets, and use of images. xcassets

In summary, Images. xcassets is just a few words.
(1) The following is a simple arrangement.
Enter images. right-click xcassets ---> New Image Set or click images of XCode. there is a plus sign in the lower left corner of the xcassets interface. The New Image Set is added and a New Set name is changed. For example, user_icon is used to drag your Image to the corresponding 1X, 2X, in 3X, 1X is iP4, 2X is 5 and 6, 3X is 6 +, and then you can directly use the user_icon you defined, for example, UIImage * img = UIImage imageNamed: "user_icon"

(2) Details Analysis

Create a project as follows:

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

1. Open the previously usedHelloWorldProject, and then 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 attribute 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:

[Html]View plaincopy

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. }

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:

[Html]View plaincopy

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"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:

[Html]View plaincopy

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. Select the "Default@2x-1.png" and "Default-568h@2x-1.png" at the bottom, and press the delete key to delete the two files, as shown in:

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 viewBottom layer of other controls. AdjustUIImageViewAs shown in:

 

19. 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;

 Note:: LaunchScreen: Do not use transparent images to start PNG images. It's ugly.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.