Let's take a look at the effect first.
Talk about the idea of realization:
1. To create a head view and TableView, it is important to note that the TableView to set the top of the contentinset,contentinsent is the same height as the background of the head view, otherwise there will be gaps (or occlusion).
myTableView.contentInset = UIEdgeInsetsMake(headRect.size.height-navHeight-navHeight, 0, 0, 0);
2. The size of the background image of the head view is processed, of course, you can also directly find a suitable size of the picture, you do not have to deal with the picture, in order to increase the extension of the program, I randomly selected a picture, and the image size processing.
UIImage * image = [UIImage imageNamed:name]; UIImage * newImg = [self image:image byScalingToSize:self.bounds.size]; backgroundView.image = newImg; backgroundView.clipsToBounds = YES;//切掉图片多余的部分
Process Picture Method-(UIImage *) Image: (uiimage*) Image byscalingtosize: (Cgsize) Targetsize {uiimage *sourceimage = image; uiimage *newimage = NIL; uigraphicsbeginimagecontext (targetsize); cgrect thumbnailrect = cgrectzero; ThumbnailRect.origin = cgpointzero; Thumbnailrect.width = Targetsize.width; ThumbnailRect.size.height = Targetsize.height; [Sourceimage Drawinrect:thumbnailrect]; NewImage = uigraphicsgetimagefromcurrentimagecontext (); uigraphicsendimagecontext (); return newimage;}
3. When this is done, the preparation is complete, and next, a way to achieve our pull-down amplification, push-down function, of course, the focus and difficulty is logic, the technology is easy. We all know that UITableView is inherited Uiscrollview, using Uiscrollview Proxy method - (void)scrollViewDidScroll:(UIScrollView *)scrollView;
to achieve.
drop-down magnification
In this method, we will be divided into two parts, one is the next zoom, this is relatively easy, that is, the head view of the background map to zoom in, adjust frame, you need to pay attention to the need to adjust the display of the picture, because the drop-down and push-up in the picture display is different, Otherwise, if you adjust the frame, it will not be displayed as a frame.
_myView.backgroundView.contentMode = UIViewContentModeScaleToFill; _myView.backgroundView.frame = CGRectMake(offset_Y*0.5 , -navHeight, VCWidth - offset_Y, headRect.size.height - offset_Y);
Push-up Move Zoom Out
This is more difficult to understand, of course, I am talking about the middle of the frame algorithm, we will three views separately said.
Background: Toggle the display mode, then move y along with the TableView offset to 0, and the height is offset with the tableview, eventually moving to the desired height (demo left is 44)
_myView.backgroundView.contentMode = UIViewContentModeTop;_myView.backgroundView.frame = CGRectMake(0 ,navHeight* offset_Y/(headRect.size.height-navHeight-navHeight)-navHeight; , VCWidth , headRect.size.height -(navHeight + navHeight* offset_Y/(headRect.size.height-navHeight-navHeight)-navHeight;) - offset_Y);
- Avatar: The Avatar needs to move its position as the tableview shifts, and also to zoom out. This is the relationship of a linear equation, which is the same as the background image above.
cgfloat width = offset_y* (40-(Vcwidth/4)/(Headrect.size.height-navheight-navheight) + (Vcwidth/4); _ MyView.headView.frame =cgrectmake (0, 0, width,width); _ MyView.headView.layer.cornerRadius =width*0.5;_myview.headview.center = _ MyView.backgroundView.center;
Signature: The signature is relatively simple, just follow the avatar and then adjust your own transparency according to the offset.
_myView.signLabel.frame =CGRectMake(0, CGRectGetMaxY(_myView.headView.frame), VCWidth, 40);_myView.signLabel.alpha = 1 - (offset_Y*3 / (headRect.size.height-navHeight-navHeight) /2);
Original link: http://www.jianshu.com/p/eae68e8e0838
Pull zoom under iOS, push to zoom out, one way to get it done