Anatomy of iOS Development "secret" app content page effect

Source: Internet
Author: User

Recently playing "secret", found that clicking on the main interface of the cell into the page after the effect is good, wrote a demo to demonstrate under.

Its main effect: the drop-down head view zooms in, the pull-up view is blurred and fixed to a certain position, and the other cells can continue to move up.

the main effect class in the @ package: mtheadeffect.m (. h file omitted, very simple)

#import "MTHeadEffect.h" #import <QuartzCore/QuartzCore.h> #import the physical width of the <accelerate/accelerate.h>//screen # Define ScreenWidth [UIScreen mainscreen].bounds.size.width#define headviewh 40CGFloat const Kimageoriginhight = 200.f;@ Implementation mtheadeffect+ (void) Viewdidscroll: (Uiscrollview *) TableView Withheadview: (Uiimageview *) HeadView    Withblur: (cgfloat) blur{NSLog (@ "y =%f", tableview.contentoffset.y); if (Tableview.contentoffset.y > Kimageoriginhight-headviewh) {headview.frame = CGRectMake (0,-(kImage        ORIGINHIGHT-HEADVIEWH), ScreenWidth, kimageoriginhight);            [[UIApplication Sharedapplication].keywindow Addsubview:headview];                }else if ((Tableview.contentoffset.y < KIMAGEORIGINHIGHT-HEADVIEWH) && tableview.contentoffset.y > 0) {        Blur = (TABLEVIEW.CONTENTOFFSET.Y)/500.0 + 0.45;        Headview.image = [[UIImage imagenamed:@ "2"] boxblurimagewithblur:blur]; Headview.frame = CGRectMake (0, 0, Screenwidth, kimageoriginhight);            [TableView Addsubview:headview]; }else if (tableview.contentoffset.y <= 0) {//magnification effect---the increment and width of x, y coordinates, the increment of the height remains consistent cgfloat offset =-tab        Leview.contentoffset.y;        Headview.frame = CGRectMake (-offset,-offset, screenwidth+ offset * 2, kimageoriginhight + offset);    Headview.image = [[UIImage imagenamed:@ "2"] boxblurimagewithblur:0.01]; }} @end @implementation UIImage (blureffect)//A category that is encapsulated by the Gaussian Blur effect-(UIImage *) Boxblurimagewithblur: (CGFloat) Blur {NSD ATA *imagedata = UIImageJPEGRepresentation (self, 1);            Convert to jpeg uiimage* destimage = [UIImage imagewithdata:imagedata];    if (Blur < 0.F | | Blur > 1.F) {blur = 0.5f;    } int boxsize = (int) (blur * 40);        Boxsize = boxsize-(boxsize% 2) + 1;        Cgimageref img = destimage.cgimage;        Vimage_buffer Inbuffer, Outbuffer;        Vimage_error Error;            void *pixelbuffer; Create Vimage_buffer with data fromCgimageref cgdataproviderref inprovider = Cgimagegetdataprovider (IMG);            Cfdataref inbitmapdata = Cgdataprovidercopydata (Inprovider);    Inbuffer.width = Cgimagegetwidth (IMG);    Inbuffer.height = Cgimagegetheight (IMG);        inbuffer.rowbytes = Cgimagegetbytesperrow (IMG);        Inbuffer.data = (void*) cfdatagetbyteptr (inbitmapdata);        Create vimage_buffer for Output Pixelbuffer = malloc (Cgimagegetbytesperrow (IMG) * Cgimagegetheight (IMG));        if (Pixelbuffer = = NULL) NSLog (@ "No pixelbuffer");    Outbuffer.data = Pixelbuffer;    Outbuffer.width = Cgimagegetwidth (IMG);    Outbuffer.height = Cgimagegetheight (IMG);        outbuffer.rowbytes = Cgimagegetbytesperrow (IMG); Create a third buffer for intermediate processing void *pixelbuffer2 = malloc (Cgimagegetbytesperrow (IMG) * Cgimagege    Theight (IMG));    Vimage_buffer OutBuffer2;    Outbuffer2.data = PixelBuffer2;    Outbuffer2.width = Cgimagegetwidth (IMG); Outbuffer2.height = CgimagegetheiGht (IMG);        outbuffer2.rowbytes = Cgimagegetbytesperrow (IMG); Perform convolution error = vimageboxconvolve_argb8888 (&inbuffer, &outbuffer2, NULL, 0, 0, boxsize, Boxsize,    NULL, Kvimageedgeextend);    if (Error) {NSLog (@ "error from convolution%ld", error); Error = vimageboxconvolve_argb8888 (&outbuffer2, &inbuffer, NULL, 0, 0, boxsize, boxsize, NULL, Kvimageedgeext    End);    if (Error) {NSLog (@ "error from convolution%ld", error); Error = vimageboxconvolve_argb8888 (&inbuffer, &outbuffer, NULL, 0, 0, boxsize, boxsize, NULL, Kvimageedgeexte    nd);    if (Error) {NSLog (@ "error from convolution%ld", error);    } cgcolorspaceref ColorSpace = Cgcolorspacecreatedevicergb ();                                             Cgcontextref CTX = cgbitmapcontextcreate (Outbuffer.data, Outbuffer.width,                Outbuffer.height, 8,                             Outbuffer.rowbytes, ColorSpace,    (cgbitmapinfo) kcgimagealphanoneskiplast);    Cgimageref imageref = Cgbitmapcontextcreateimage (CTX);        UIImage *returnimage = [UIImage imagewithcgimage:imageref];    Clean up cgcontextrelease (CTX);        Cgcolorspacerelease (ColorSpace);    Free (pixelbuffer);    Free (PIXELBUFFER2);        Cfrelease (Inbitmapdata);        Cgimagerelease (IMAGEREF); return returnimage;} @end

@main. M

-(void) viewdidload{[Super Viewdidload];    Do any additional setup after loading the view. TableView Self.testtableview = [[UITableView alloc] Initwithframe:cgrectmake (0, 0, +, 568) Style:uitableviewstylep    Lain];    Self.testTableView.delegate = self;    Self.testTableView.dataSource = self;        [Self.view Addsubview:_testtableview]; /** * Hide Status bar effects * 1. The system provides 2 animations, one is offset, the other is fade * 2. Set "View controller-based status bar appearance" to "No" in the plist file        "*/[[uiapplication sharedapplication] Setstatusbarhidden:yes Withanimation:uistatusbaranimationnone]; Headview does not act as a tableheadview, but instead covers on the first cell self.headview = [[Uiimageview alloc] Initwithframe:cgrectmake (0, 0, 320, 200)    ];    Self.headView.image = [[UIImage imagenamed:@ "2"] boxblurimagewithblur:0.01];  Self.headView.contentMode = Uiviewcontentmodescaleaspectfill;    Picture Show full height self.headView.clipsToBounds = YES;    [Self.testtableview AddSubview:self.headView]; } #pragma mark-scroll delEgate Head View effect Method-(void) Scrollviewdidscroll: (Uiscrollview *) scrollview{[mtheadeffect Viewdidscroll:scrollview WithHea DView:self.headView withblur:0.01];} -(Nsinteger) Numberofsectionsintableview: (UITableView *) tableview{return 1;} -(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (Nsinteger) section{return 25;} -(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) indexpath{if (Indexpath.row = = 0    ) {return 200; } return 40;} -(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) indexpath{static NSSt    Ring *cellidentf = @ "Cell";    UITableViewCell *cell = [TableView dequeuereusableheaderfooterviewwithidentifier:cellidentf];     if (!cell) {cell = [[UITableViewCell alloc] Initwithstyle:uitableviewcellstyledefault reuseidentifier:cellidentf];    } cell.textLabel.text = [nsstring stringwithformat:@ "section =%ld row =%ld", Indexpath.section,indexpath.row]; REturn Cell;} 

@: Well, will not make GIF animation, so not very good demo, anyway the key code has been given, we can try it yourself.




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.