iOS picture Browser Controls zoom in, zoom out, Uiscrollview

GitHub Address Https://github.com/JerryWanXuJie/XJAlbum

Picture browser mainly through the Uiscrollview implementation in a large scollview inside set n a Scollview

Uiscrollview mainly has two properties, Contentsize and Contentoffset, Contentsize is to set the Uiscrollview of the interactive size, contentoffset offset

  Set the first layer Uiscollview is mainly set contentsize and Contentoffset, Contentsize is based on the number of pictures to set, Contentoffset set  
 Wholescoll = [[Uiscrollview alloc]initwithframe:cgrectmake (0 , , Myscreenwidth, Myscreenheight)];   Wholescoll.contentoffset  = Cgpointmake (wholescoll.frame.size.width*mcurpage , 0  ); 
   Wholescoll. Contentsize = cgsizemake (myscreenwidth*mimglocationarr. Countmyscreenheight      

The main code is to add a second layer of uiscrollview through a for loop

For (int i = 0; i<mimglocationarr. Count; i++) { 　

// set imageview

Uiimageview * Imgview = [[uiimageview alloc]initwithframe:cgrectmake(0, 0, myscreenwidth, myscreenheight)];

Imgview. Contentmode = uiviewcontentmodescaleaspectfit;

// set scrollview

Uiscrollview * Singleview = [[uiscrollview alloc]initwithframe:cgrectmake( myscreenwidth*i,0,myscreenwidth, myscreenheight)];

[wholescoll addsubview: Singleview];

[Singleview Addsubview: Imgview];

// add gestures

[self addgesturerecognizer];

}

Picture browser picture can be left and right swipe, you can double-click to zoom in, can gesture pinch zoom

There are three main gestures in the picture browser that are Singletap double-clicking Doubletap kneading pinchgesture and Uiscrollview's own sliding gestures

Singletap gesture is mainly to return to the previous page, if the trigger Singletap when the picture has been enlarged, then the first image initialization size and coordinates

Because Singletap and Doubletap are part of the same gesture class, they create a gesture conflict, so they need

[Singletap requiregesturerecognizertofail:d Oubletap]; write off Singletap when executing Doubletap

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ and then the climax came ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I'm a cute split-line ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The main operation is Doubletap and Pinchgesture, which is the two problems that cost me the most time

First of all, to talk about the doubletap of the idea, everyone notice the picture browser, Doubletap in the execution of the time will get a point in the view cgpoint tappoint = [Doubletap locationinview :d Oubletap. view];

Then double-click to enlarge the Uiimageview, and then by setting the Contentoffset offset to move the tappoint to the middle of the screen , which is the double-click Point contained in the picture, the other case, is double-click the point outside the picture, and then point in the picture and there is Top left, top right, bottom left, bottom right four kinds of situations. Zoom in on the picture then, the picture left, top right, bottom left, bottom right four in the direction of the Welt display

Then four different cases are judged according to Tappoint X, Y.

Tapx,tapy is Tappoint x, y imgy is the y value of the picture, ImgHeight is the height of the picture
If(tapy<imgy) {        //abovePointtype =Xjalbumoutimgviewpointleftup; if(tapx>myscreenwidth/2) {Pointtype=Xjalbumoutimgviewpointrightup; } Isoutimgview=YES; }    Else if(tapy>imgy+imgheight) {        //belowPointtype =Xjalbumoutimgviewpointleftdown; if(tapx>myscreenwidth/2) {Pointtype=Xjalbumoutimgviewpointrightdown; } Isoutimgview=YES; }

if(Isoutimgview) {//If the click is outside the pictureNSLog (@"Isout"); Switch(pointtype) { Casexjalbumoutimgviewpointleftup: {singlescrollview.contentoffset= Cgpointmake (0,0); }                         Break;  Casexjalbumoutimgviewpointleftdown: {singlescrollview.contentoffset= Cgpointmake (0, Imgview.frame.size.height-myscreenheight); }                         Break;  Casexjalbumoutimgviewpointrightdown: {singlescrollview.contentoffset= Cgpointmake (Imgview.frame.size.width-myscreenwidth, Imgview.frame.size.height-myscreenheight); }                         Break;  Casexjalbumoutimgviewpointrightup: {singlescrollview.contentoffset= Cgpointmake (Imgview.frame.size.width-myscreenwidth,0); }                         Break; default:                     Break; }            }            Else            {                //set the point of the double-click to the center of the screen to calculate the distance from the edge of the picture, and then find out the offsetx according to the proportions; Imgx,imgy are the x, Y coordinate values of the picture, respectivelyCGFloat OffsetX = (TAPX-IMGX) *maxscale-myscreenwidth/2; CGFloat OffsetY= (tapy-imgy) *maxscale-myscreenheight/2; //if the maximum range is exceeded, set the boundary valueOffsetY = offsety<0?0: OffsetY; OffsetY= offsety>imgview.frame.size.height-myscreenheight?imgview.frame.size.height-myscreenheight:offsety; OffsetX= offsetx<0?0: OffsetX; OffsetX= Offsetx>imgview.frame.size.width-myscreenwidth?imgview.frame.size.width-Myscreenwidth:offsetx; Singlescrollview.contentoffset=Cgpointmake (offsetx,offsety); } Isbigger= YES;

Then is the kneading gesture , the main two points of the kneading gesture is real-time according to the magnification of the scale to change the size of Uiimageview, Uiscrollview Contentsize,contentoffset

The idea of a pinch gesture pinchgesture is to get the center point of the two point at the beginning of the gesture, and then calculate the relative position of the center point in the screen, keeping the relative position unchanged when the gesture changes.

The variable offsetpinchx is the ScrollView contentoffset.x   Xinscreen is the relative position of the center point on the screen, because the point of the gesture is the relative position on the view where the gesture is located, so subtract X offset of ScrollView

If (pinchges. state = = Uigesturerecognizerstatebegan) {

oldfirstpoint = [pinchges locationoftouch: 0 InView:p inchges. View];

oldsecondpoint = [pinchges locationoftouch: 1 inview:p inchges. View];

oldlength = [self caculateLengthBetweenP1:oldfirstpoint P2: Oldsecondpoint];

// calculate the initial center point

Centrepoint = cgpointmake((oldfirstpoint. X+oldsecondpoint. x)/2, (oldsecondpoint. Y+oldfirstpoint. Y)/2);

xinscreen = Centrepoint. X - offsetpinchx;

}

MinSize is the initial size   newSize by calculating the ratio of the values between two points to obtain

Biggerscale = newlength/oldlength;

newSize = cgsizemake(oldsize. Width*biggerscale,oldsize. Height*biggerscale);

CGFloat Newscale = newsize.width/Minsize.width; //figure out the dots on the screen        if(Newsize.width < Maxsize.width && newscale>1) {Offsetpinchx= Xinscreen * (Newscale-1); }    if(offsetpinchx<0) {Offsetpinchx=0; }    if(Offsetpinchx> (Newsize.width-myscreenwidth)) {Offsetpinchx= Newsize.width-Myscreenwidth; } NSLog (@"%f------%f------%f", Offsetpinchx,centrepoint.x,newscale); if(Newsize.width = =maxsize.width) {}Else{Singlescroll.contentoffset= Cgpointmake (Offsetpinchx,0); }

iOS picture Browser Controls zoom in, zoom out, Uiscrollview