Uiscrollview controls are used in IOS application development to achieve picture scaling _ios

A brief introduction of Knowledge point

What is a 1.UIScrollView control?

(1) Mobile device screen ⼤ large ⼩ Small is extremely limited, so direct ⽰ show in the ⽤ user's immediate content is also very limited

(2) When the exhibition ⽰ show more content, than ⼀ a screen, ⽤ users can scroll ⼿ gestures to see outside the screen content

(3) The ordinary UIView does not have the scrolling function, cannot display ⽰ to show excessively the content

(4) Uiscrollview is a scrolling view control that can be ⽤ to show ⽰ ⼤ a large amount of content, and can be scrolled to see all the content

(5) Example: "Settings" on the phone, other ⽰ sample programs

2.UIScrollView Simple to use

(1) Add the ⽰ content to the Uiscrollview

(2) Set the Contentsize property of Uiscrollview, tell Uiscrollview all the contents of the ruler ⼨ Inch, that is, tell it the range of scrolling (how far to roll, where to roll to the end of ⾥)

3. Property

(1) Common properties:

1) @property (nonatomic) Cgpointcontentoffset; This property is used to ⽤ the table ⽰ uiscrollview scrolling position

2) @property (nonatomic) cgsizecontentsize; This property ⽤ the ruler Uiscrollview inch of the table ⽰ ⼨ content, scrolling range (how far can roll)

3) @property (nonatomic) Uiedgeinsetscontentinset; This property allows additional scrolling areas to be added to the 4-week Uiscrollview

(2) Other properties:

1) @property (nonatomic) BOOL bounces; Set whether the spring effect is required for Uiscrollview

2) @property (nonatomic,getter=isscrollenabled) boolscrollenabled; Set whether Uiscrollview can scroll

3) @property (nonatomic) BOOL showshorizontalscrollindicator; Whether to display ⽰ ⽔ horizontal scroll bar

4) @property (nonatomic) BOOL showsverticalscrollindicator; Display ⽰ Vertical scroll bar

4. Note the point

• If Uiscrollview⽆ cannot scroll, this may be the following:

(1) No set contentsize

(2) scrollenabled = NO

(3) No Touch event Received: userinteractionenabled = no

(4) Do not cancel the AutoLayout function (to ScrollView scrolling, you must cancel AutoLayout)

Ii. some notes on common properties of Uiscrollview

1. Code examples used by attributes

Copy Code code as follows:

#import "MJViewController.h"

@interface Mjviewcontroller ()
{
Create a property in a private extension
Uiscrollview *_scrollview;
}
@end

Copy Code code as follows:

@implementation Mjviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

1. Create Uiscrollview
Uiscrollview *scrollview = [[Uiscrollview alloc] init];
Scrollview.frame = CGRectMake (0, 0, 250, 250); Size in frame refers to the visible range of Uiscrollview
Scrollview.backgroundcolor = [Uicolor Graycolor];
[Self.view Addsubview:scrollview];

2. Create Uiimageview (picture)
Uiimageview *imageview = [[Uiimageview alloc] init];
Imageview.image = [UIImage imagenamed:@ "big.jpg"];
CGFloat IMGW = imageView.image.size.width; The width of the picture
CGFloat imgh = imageView.image.size.height; The height of the picture
Imageview.frame = CGRectMake (0, 0, IMGW, IMGH);
[ScrollView Addsubview:imageview];

3. Set the ScrollView properties

Set Uiscrollview scrolling range (content size)
Scrollview.contentsize = imageView.image.size;

Hide Horizontal scroll bar
Scrollview.showshorizontalscrollindicator = NO;
Scrollview.showsverticalscrollindicator = NO;

Used to record the position of ScrollView scrolling
Scrollview.contentoffset =;

Remove the Spring effect
Scrollview.bounces = NO;

Add extra scrolling Area (counterclockwise, top, left, bottom, right)
Top left bottom Right
Scrollview.contentinset = Uiedgeinsetsmake (20, 20, 20, 20);

_scrollview = ScrollView;
}

-(Ibaction) Down: (UIButton *) Sender {
[UIView animatewithduration:1.0 animations:^{
Three steps
Cgpoint offset = _scrollview.contentoffset;
Offset.y + 150;
_scrollview.contentoffset = offset;

_scrollview.contentoffset = cgpointmake (0, 0);
}];
}
@end

2. Several attribute coordinates schematic diagram

3. Important note

(1) The distinction between the frame of a uiscrollview and the Contentsize property: The Uiscrollview frame refers to the visible range of the ScrollView (visible area), and the contentsize is its scrolling range.

(2) Contentinset (not with the * is generally not a struct is an enumeration), add additional scrolling area for Uiscrollview. (Top, left, bottom, right) counterclockwise. Contentinset can be set using code or a view controller, but there is a difference between the two (note the distinction).

(3) The Contentsize property can only use code settings.

(4) Contentoffset is a cgpoint type structure that records the scrolling position of the ScrollView, which records where the box has gone. Knowing this property, you know where it is, and you can control the movement of the box by setting this property.

(5) It is not allowed to directly modify the members of an object's internal structure properties, three steps (get the value first, modify it, then assign the modified value back).

(6) After adding additional areas, where is the origin of the Contentoffset?

4. Several screenshots to help understand

Model Diagram:

Contrast chart:

Coordinate diagram:

three, the Uiscrollview control realizes the picture scaling function
1. Brief description:

Sometimes, we might want to zoom in on something, as shown in the following figure

Uiscrollview can not only scroll through a lot of content, but also zoom in on its contents. That is, to complete the scaling function, you simply add the content that needs to be scaled to the Uiscrollview

2. Zoom principle

When the user uses a kneading gesture on the Uiscrollview, Uiscrollview sends a message to the agent asking the agent exactly which child control to scale inside itself (which piece of content)

When a user uses kneading gestures on Uiscrollview, Uiscrollview invokes the proxy's Viewforzoominginscrollview: method, the control that the method returns is the control that needs to be scaled.

3. Realize Zoom function

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller () <UIScrollViewDelegate>
{
Uiscrollview *_scrollview;
Uiimageview *_imageview;
}
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

1 Add Uiscrollview
Set Uiscrollview in the same location as the screen size
_scrollview=[[uiscrollview Alloc]initwithframe:self.view.bounds];
[Self.view Addsubview:_scrollview];

2 Add pictures
There are two different ways
(1) General method
Uiimageview *imageview=[[uiimageview Alloc]init];
UIImage *image=[uiimage imagenamed:@ "Minion"];
Imageview.image=image;
Imageview.frame=cgrectmake (0, 0, image.size.width, image.size.height);

(2) using the construction method
UIImage *image=[uiimage imagenamed:@ "Minion"];
_imageview=[[uiimageview Alloc]initwithimage:image];
Call Initwithimage: Method, which creates a imageview of the width and height of the picture.
[_scrollview Addsubview:_imageview];

Set the scrolling range of the Uiscrollview consistent with the true dimensions of the picture
_scrollview.contentsize=image.size;


Setting implementation Scaling
Set proxy object for Agent ScrollView
_scrollview.delegate=self;
Set maximum scaling scale
_scrollview.maximumzoomscale=2.0;
Set minimum scaling scale
_scrollview.minimumzoomscale=0.5;

}

Tell ScrollView which child control to scale
-(UIView *) Viewforzoominginscrollview: (Uiscrollview *) ScrollView
{
return _imageview;
}

@end

Code description

4 steps to achieve scaling functionality

(1) Set the agent for ScrollView (self)

(2) Let the controller comply with the ScrollView Agent agreement

(3) Calling the Proxy method, returning the child controls that need to implement the scaling feature

(4) Set the zoom range (maximum and minimum proportions)

Ideas:

A. You need to tell ScrollView which child control to zoom in, here for the ImageView control inside the ScrollView

B. Who tells ScrollView which control to scale? Agent

4. Supplementary knowledge

Two ways to instantiate Uiimageview:

First type:

Copy Code code as follows:

Uiimageview *imageview=[[uiimageview Alloc]init];

UIImage *image=[uiimage imagenamed:@ "Minion"];

Imageview.image=image;

Imageview.frame=cgrectmake (0, 0, image.size.width, image.size.height);

The second type:

Copy Code code as follows:

UIImage *image=[uiimage imagenamed:@ "Minion"];

_imageview=[[uiimageviewalloc]initwithimage:image];

Call Initwithimage: Method, which creates a imageview of the width and height of the picture.

Copy Code code as follows:

[_scrollviewaddsubview:_imageview];

Other proxy methods associated with scaling:

Called when the zoom is complete

Copy Code code as follows:

-(void) scrollviewwillbeginzooming: (Uiscrollview *) ScrollView Withview: (UIView *) view

Called when scaling

Copy Code code as follows:

-(void) Scrollviewdidzoom: (Uiscrollview *) ScrollView