iOS similar to 9.png

Graphical user interface graphics in two ways, one is to use code to draw out, such as quartz 2D technology, a little bit of OpenGL ES, the other is the use of images.
The way the code is drawn compares the programmer's brainpower, CPU or GPU; Images consume disk space, which increases the volume of the app. General apps we tend to use images to build the user interface.
Designers typically use PS to design the interface, so there is a PSD-to-png transduction (Image slicing) process before being used directly. Here are a few points that you might want to be aware of during a cut.

I. REPEATABLE ELEMENTS

In the graphical elements of the user interface, repetition is ubiquitous, so we take advantage of the interface provided by the framework to create a user interface at a high price/performance ratio.

1.Color Pattern

Color pattern is also often encountered in web design, such as the background of the web, and even the network can find a special collection of various types of repeatable texture patterns, such as http://subtlepatterns.com. Below this is a small picture template

UIColor *circleColorPattern = [UIColor colorWithPatternImage: [UIImage imageNamed:@"circle_pattern.png"]];

This allows you to get a color template that can be used to draw or fill an area, and the template image will be tiled in the specified area. For example, setting the background color of a view to the color above will result in the following

2.resizableImage

In addition to the overall tiling, many times we want the parts of a picture to be tiled, while the rest remains the same. For example, a common button, a chat bubble background, or a shadow border of a picture. Here is an example of a button, in general, in order to facilitate the button directly cut a button background, as you can see, you will find that most of the buttons in the middle of the most pixels are horizontal duplication, so you can use the iOS image interface to use the smaller size of the picture to achieve the same effect. First, using the PS transduction tool for the graph, the transduction logic is that the left side is cut by 14 pixels (13 pixels plus 1 pixels, 1 pixels for the middle repeat part), and the right side is 13 pixels.

The next unit of the retina screen corresponds to two pixels, and here's an example of a non-retina situation, please note

Transduction will merge around to become the final desired picture

The image width is 27 pixels wide and the middle 14th pixel is the middle repeating part.

UIImage *Buttonbackgroundimage = [[UIImage Imagenamed:@"Button_bkg.png"]  resizableimagewithcapinsets:uiedgeinsetsmake ( 0,13,< Span class= "lit" >0,13)]; Span class= "p" >[button setbackgroundimage< Span class= "pun" >:buttonbackgroundimage   forstate:uicontrolstatenormal ;                

Resizableimagewithcapinsets: The parameter is a uiedgeinsets structure type, the area covered by the capinsets will remain unchanged, and the part that is not covered will be used for tiling.

There is no such method before iOS 5.0, but another way to use it

  - (uiimage * ) stretchableimagewithleftcapwidth: (nsinteger) leftcapwidthtopcapheight: (nsinteger) topcapheight;       

This method has limitations, it can only specify leftcapwidth and Topcapheight, and then only one pixel can repeat, that is, Rightcapwidth is imagewidth-leftcapwidth-1, And Bottomcapheight is imageheight-topcapheight-1, so the repetition is always the middle one pixel.

Two. Image edge aliasing and anti-aliasing issues

1. Anti-aliasing required

Sometimes need to use in the rotation of the animation to the picture, such as the rotation of the button, the rotation of the picture, in order to avoid the rotation of the edge of the jagged edges, we need to transduction at the time, at the edge of more than one pixel of transparent pixels, because iOS when processing the image of the outer edge is not anti-aliasing processing, However, antialiasing is done for edges inside the image.

2. Need to remove anti-aliasing effects

When a ImageView frame's origin.x or ORIGIN.Y is not an integer, there is an anti-aliasing effect that you do not want, and this time the edges of the picture will become blurred, and this is not what you want, so this time we are going to take the start of frame to complete.

iOS similar to 9.png