Common operations for Uiimageview controls in IOS development _ios

Source: Internet
Author: User

Uiimageview, as the name suggests, is used to place pictures. When you design an interface using Interface Builder, you can of course drag the control directly in and set the related properties, which is not to say, it's about using code.

1. Create a Uiimageview:

There are five ways to create a Uiimageview object:

Copy Code code as follows:

Uiimageview *imageview1 = [[Uiimageview alloc] init]; Uiimageview *imageview2 = [[Uiimageview alloc] initWithFrame: (CGRect)]; Uiimageview *IMAGEVIEW3 = [[Uiimageview alloc] Initwithimage: (UIImage *)]; Uiimageview *imageview4 = [[Uiimageview alloc] Initwithimage: (UIImage *) Highlightedimage: (UIImage *)]; Uiimageview *imageview5 = [[Uiimageview alloc] Initwithcoder: (Nscoder *)];

More commonly used is the front three. As for the fourth, when the highlighted property of this imageview is yes, the argument highlightedimage is displayed, and the first parameter uiimage is normally displayed.

2, Frame and bounds properties:

In the above method of creating a Uiimageview, the second method is to set the location and size at the time of creation.
When you want to change the position later, you can reset the Frame property:

Copy Code code as follows:

Imageview.frame = CGRectMake (CGFloat x, cgfloat y, cgfloat width, cgfloat heigth);

Notice that Uiimageview also has a bounds property
Copy Code code as follows:

Imageview.bounds = CGRectMake (CGFloat x, cgfloat y, cgfloat width, cgfloat heigth);

So what's the difference between this property and frame?

My understanding is that frame sets its position and size, and bounds can only set its size, the X and y of its arguments do not work even if the frame property is not previously set, the control's final position is not the parameter set by the bounds. Bounds implements scaling the Uiimageview control to the center of the original center. For example, you have the following code:

Copy Code code as follows:

Imageview.frame = CGRectMake (0, 0, 320, 460); Imageview.bounds = CGRectMake (100, 100, 160, 230);

After execution, the position and size of this imageview are (80, 115, 160, 230).

3, Contentmode properties:

This property is used to set how the picture is displayed, such as centering, right, scaling, and so on, with the following constants to set:

Copy Code code as follows:

Uiviewcontentmodescaletofill Uiviewcontentmodescaleaspectfit Uiviewcontentmodescaleaspectfill Uiviewcontentmoderedraw uiviewcontentmodecenter uiviewcontentmodetop Uiviewcontentmodebottom UIViewContentModeLeft Uiviewcontentmoderight Uiviewcontentmodetopleft uiviewcontentmodetopright Uiviewcontentmodebottomleft Uiviewcontentmodebottomright

Note the above several constants, usually without scale, when the picture size exceeds imageview size, only part of the display in the ImageView. The Uiviewcontentmodescaletofill property causes the picture to become distorted. Uiviewcontentmodescaleaspectfit will ensure that the picture proportions are unchanged and all are displayed in the ImageView, which means that ImageView will be partially blank. Uiviewcontentmodescaleaspectfill will also be able to show the picture proportion unchanged, but is filled with the entire imageview, may only part of the picture displayed.

The first three effects are shown below:

Uiviewcontentmodescaletofill, Uiviewcontentmodescaleaspectfit, Uiviewcontentmodescaleaspectfill

4, change the location

To change a uiimageview position, you can

4.1 Directly modify its Frame property

4.2 Modify its center attribute:

Copy Code code as follows:

Imageview.center = Cgpointmake (CGFloat x, cgfloat y);

The center attribute refers to the middle point of this imageview.

4.3 Using the Transform property

Copy Code code as follows:

Imageview.transform = cgaffinetransformmaketranslation (cgfloat dx, cgfloat dy);

where dx and dy indicate how much they want to move in the X or Y direction, rather than how much to move.

5. Rotate the image

Copy Code code as follows:

Imageview.transform = cgaffinetransformmakerotation (cgfloat angle);

Note that it rotates in a clockwise direction, and that the center of rotation is the center of the original ImageView, which is the location represented by the center attribute.

The parameters of this method are angle in radians, not our most commonly used degrees, so you can write a macro definition:

Copy Code code as follows:

#define Degreestoradians (x) (m_pi* (x)/180.0)

Used to convert degrees to radians. The following figure is a rotation of 45 degrees:

6, Zoom image

Or use the Transform property:

Copy Code code as follows:

Imageview.transform = Cgaffinetransformmakescale (cgfloat scale_w, CGFloat scale_h);

Among them, CGFloat Scale_w and cgfloat Scale_h respectively indicate the original width and height of the zoom to how many times, the following figure is scaled to the original 0.6 times times schematic:

7. Play a series of pictures

Copy Code code as follows:

Imageview.animationimages = Imagesarray; Set all pictures to play in seconds imageview.animationduration = [Imagesarray count]; Do not repeat how many times, 0 means countless times imageview.animationrepeatcount = 0; Start playing [ImageView startanimating];

Where Imagesarray is an array of some column pictures. The following figure:

8. Add Click event for Picture:

Copy Code code as follows:

imageview.userinteractionenabled = YES; UITapGestureRecognizer *singletap = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector ( Tapimageview:)]; [ImageView Addgesturerecognizer:singletap];

Be sure to set the userinteractionenabled to Yes before you can respond to a click event.

9, Tag parameters

A view usually has only one parent view, multiple child views, which can be retrieved by using the tag of the child view. The method is Viewwithtag:

Hint point: If you want to get the corresponding control (property) through the tag parameter in Xib, do not set the tag parameter to 0, because all the objects in Xib have the default tag of 0, and the object is set to 0.

10. Add button in ImageView
(1) Comparison of ImageView and button

You can place more than one picture (4) Inside the button button, and you can only place a single picture in ImageView.

(2) Description:

ImageView can only display one picture, we know that all UI controls inherit from UIView, all views are containers, and it's easy to add something to it. So can you add a button to the ImageView?

(3) Action to add a button to the ImageView

There are usually two ways to create a control, one that is dragged directly on the storyboard or Xib interface designer, and another way is to create it by using handwritten code.
Dragging on the interface designer can't add a button to the ImageView, so let's try the handwriting code.

The code is as follows:

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@end


Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

Uiimageview does not allow user interaction by default
Uiimageview *imageview = [[Uiimageview alloc] Initwithframe:cgrectmake (0, 20, 100, 100)];
[Self.view Addsubview:imageview];
Imageview.backgroundcolor = [Uicolor Redcolor];
imageview.userinteractionenabled = YES;

UIButton *btn = [UIButton buttonwithtype:uibuttontypecontactadd];
[ImageView ADDSUBVIEW:BTN];

[Btn addtarget:self Action: @selector (click) forcontrolevents:uicontroleventtouchupinside];
}

-(void) Click
{
NSLog (@ "Touch Me");
}
@end


(4) Execution effect (add + button, click):

(5) Note points:

The effect of imageview.userinteractionenabled = YES in the above code is to set the ImageView to allow the user to interact.

ImageView The default is not to allow user interaction, which can be viewed by viewing the ImageView property sidebar in the interface designer.

Note the properties of the default state

11, other settings

Copy Code code as follows:

Imageview.hidden = yes or no;    Hide or Show picture Imageview.alpha = (cgfloat) al; Set Transparency Imageview.highlightedimage = (UIImage *) hightlightedimage; Set the picture displayed when highlighting imageview.image = (UIImage *) image;    Set a picture of the normal display [ImageView SizeToFit]; Resize the picture to be the same as the content picture

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.