IOS Study Notes 18-uiimageview

Source: Internet
Author: User

Previously, we used uiimage to load images, while uiimageview is a control for displaying images on the interface. To display images in uiimageview, we should first load the images to uiimage, then use the uiimage in other ways. The following describes four common methods for loading a uiimage:

Imagenamed: creates images using a file in the application bundle. Image extensions can be omitted in Versions later than ios4;

Imagewithcgimage: Use the quartz 2D Object to create a uiimage, which is equivalent to initwithcgimage;

Imagewithcontentsoffile: Create a uiimage Based on the specified path, which is equivalent to initwithcontentoffile;

Imagewithdata: created using nsdata, which is equivalent to initwithdata;

During loading, uiimage will automatically match the image to be loaded. If there is no HD version of the image, uiimage will load the standard image file and enlarge it to a suitable high-resolution display.


You can create a uiimageview by using the following methods:

Uiimage * image = [uiimageimagenamed: @ "picture"];

Uiimageview * imageview = [[uiimageviewalloc] initwithimage: Image];


The other is to use initwithframe: to load the image, and then manually modify the properties of the uiimageview.

Animationduration: Specifies the animation duration;

Animationimages: attribute, which is an nsarray that contains the image to be loaded into uiimageview;

Animationrepeatcount: specifies the number of playback times of an animation. It is not specified as an infinite loop;

Image: attribute, which specifies the image to be loaded;

Startanimating: Method to start playing the animation;

Stopanimating: Method to stop playing an animation;


Next we will build a slide application:

First, take a look at the overall project directory after completion:


First, prepare three images, drag them to the project, open the viewcontroller. M file, and modify the code:

- (void)viewDidLoad{    [superviewDidLoad];// Do any additional setup after loading the view, typically from a nib.    UIImage *img1 = [UIImage imageNamed:@"img"];    UIImage *img2 = [UIImage imageNamed:@"img1"];    UIImage *img3 = [UIImage imageNamed:@"img2"];    UIImageView *imageView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen]  bounds]];    imageView.animationImages = [NSArray arrayWithObjects:img1,img2,img3, nil];    imageView.animationDuration = 5;    [imageView startAnimating];    [self.viewaddSubview:imageView];    [imageView release];}

After compilation and running, you can see that the three images on the screen are constantly switching back and forth:

Let's take a look at using core graphics to draw simple images. Through uiimage, you cannot access the entire core graphics library, but you also provide five methods to work like core graphics:

Drawaspatterninrect: draws an image in a rectangle. The image is not scaled and tiled if necessary.

Drawatpoint: in the upper left corner, at the specified position of cgpoint, the image is drawn.

Complex version of drawatpoint: blendmode: Alpha: drawatpoint. You can specify the image transparency.

Drawinrect: draws an image in cgrect and scales it accordingly.

Complex version of drawinrect: blendmode: Alpha: drawinrect

One problem is that you cannot use these methods in viewdidload: or other methods that normally load objects, because they depend on the graphic context. The graphic context is the painting destination, such as a window. In iPhone and iPad, uiview automatically creates a graphical context in calayer. calayer is the core animation layer associated with each uiview. to access it, you can create a subclass of uiview and override drawrect: method.

Create customuiimageview and inherit uiview, And Then override the drawrect method. The Code is as follows:

# Import "customuiimageview. H "@ implementation customuiimageview-(ID) initwithframe :( cgrect) frame {self = [superinitwithframe: frame]; If (Self) {// initialization code [self drawrect: frame];} returnself;} // only override drawrect: If you perform custom drawing. // an empty implementation adversely affects performance during animation. -(void) drawrect :( cgrect) rect {uiimage * img1 = [uiimage imagenamed: @ "IMG"]; uiimage * img2 = [uiimage imagenamed: @ "img1"]; uiimage * img3 = [uiimage imagenamed: @ "img2"]; // The hybrid mode is used here. The normal mode and transparency are 50% [img1 drawatpoint: cgpointmake (0, 0) blendmode: kcgblendmodenormalalpha :. 5]; [img2 drawinrect: cgrectmake (50, 50,150,150)]; [img3 drawinrect: cgrectmake (140,140,150,150)];} @ end

Add the following code to the viewcontroller. M file:

CustomUIImageView *customImageView = [[CustomUIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];[self.view addSubview:customImageView];

The compilation and running results are as follows:

This method can be used to construct more complex functions, such as mixed images, similar to PS functions, such as deepening colors and glare, and making images partially transparent. Compared with the previous creation of multiple uiimageview objects, using a single drawrect is easier and easier.

To join our QQ group or public account, see: Ryan's
Zone public account and QQ Group


Welcome to my Sina Weibo chat: @ Tang Ren _ Ryan

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.