IOS implementation Taobao pull into the Details page interactive effect _ios

Objective

This article is mainly to introduce the use of iOS to achieve Taobao pull into the details page interaction effect, the following words do not say more, to see the detailed implementation process.

Implementation analysis

As you can see, the page is divided into two parts, part of which is the first to see the merchandise information, and then we pull up the screen, the screen continues to scroll up, scrolling to the end of the first section can see the bottom of the "continue to drag, view the text details" line appears. Continuing to pull up to a critical point triggers the paging, at which point the second part is animated from the bottom to fill the entire screen. And the effect is that the page is moved up as a whole, that the first and second parts are moved up.

At this point, the second part is filled with the entire screen, if we drop the screen, then fade the "drop Down, return baby details" text hint at the top of the screen, and the text becomes "release, return baby Details" when it reaches a critical value, then release the finger and the page scrolls to the end of the first part.

Implementation methods

In his own demo, the first part is a tableview, showing the basic information of commodities. The second part is a webview, showing the details of the merchandise.

The first step is to load the desired view first. Mainly the first part of the TableView and the second part of the WebView, there is a second part of the top display pull back text prompts the Headlab. In order to save resources, you can actually load the second part of the view when the pull is triggered, but here's just an example, so it's not lazy to load.

-(void) Loadcontentview {//the Self.contentview AddSubview:self.tableView];

  Second view [Self.contentview AddSubview:self.webView];
  Uilabel *HV = Self.headlab;
  Headlab [Self.webview ADDSUBVIEW:HV];
[Self.headlab BringSubviewToFront:self.contentView];
    }-(Uilabel *) Headlab {if (!_headlab) {_headlab = [[Uilabel alloc] init];
    _headlab.text = @ "Pull up, return details";
    _headlab.textalignment = Nstextalignmentcenter;

  _headlab.font = font (13);
  } _headlab.frame = CGRectMake (0, 0, Pdwidth_mainscreen, 40.F);
  _headlab.alpha = 0.F;


  _headlab.textcolor = Pdcolor_button_gray;
return _headlab; }-(UITableView *) TableView {if (!_tableview) {_tableview = [[UITableView alloc] Initwithframe:cgrectmake (0, 0, P
    Dwidth_mainscreen, Self.contentView.bounds.size.height) Style:uitableviewstyleplain];
    _tableview.contentsize = Cgsizemake (Pdwidth_mainscreen, 800);
    _tableview.datasource = self;
    _tableview.delegate = self; _tableview.RowHeight = 40.F;
    Uilabel *tabfootlab = [[Uilabel alloc] Initwithframe:cgrectmake (0, 0, Pdwidth_mainscreen, 60)];
    Tabfootlab.text = @ "Continue dragging, view graphic details";
    Tabfootlab.font = font (13);
Tabfootlab.textalignment = Nstextalignmentcenter;
    Tabfootlab.backgroundcolor = Pdcolor_orange;
  _tableview.tablefooterview = Tabfootlab;
return _tableview; }-(UIWebView *) WebView {if (!_webview) {_webview = [[UIWebView alloc] Initwithframe:cgrectmake (0, _tableview.con
    Tentsize.height, Pdwidth_mainscreen, Pdheight_mainscreen)];
    _webview.delegate = self;
    _webview.scrollview.delegate = self;
  [_webview loadrequest:[nsurlrequest requestwithurl:[nsurl urlwithstring:@ "https://www.baidu.com"]];
return _webview; }

Then the uiscrollview of the scrolling view is implemented, and after the scroll reaches the critical value, the processing of the paging animation is triggered. Includes the pull over to the second page and the bottom pull back to the first two parts, that is, in this method by judging the type of ScrollView to do the corresponding treatment.

#pragma mark----ScrollView delegate

-(void) scrollviewdidenddragging: (Uiscrollview *) ScrollView willdecelerate :(BOOL) decelerate
{
  cgfloat offsetY = scrollview.contentoffset.y;

  if ([ScrollView Iskindofclass:[uitableview class]])///TableView the desired value of scrolling on the interface
    : TableView The overall height minus the screen of the province's height
    cgfloat valuenum = _tableview.contentsize.height-pdheight_mainscreen;
    if ((offsety-valuenum) > _maxcontentoffset_y)
    {
      [self gotodetailanimation];//Enter animation for graphic details
    }
  }< C13/>else//WebView page scrolling
  {
    NSLog (@ "-----webview-------");
    if (offsety<0 &&-offsety>_maxcontentoffset_y)
    {
      [self backtofirstpageanimation];// Back to the basic details interface of the animation}}}

Then look at the two-page animation, in fact, is very simple, is to move their position.

//Enter details of animation-(void) gotodetailanimation {[UIView animatewithduration:0.3 opt Ions:uiviewanimationoptionlayoutsubviews animations:^{_webview.frame = CGRectMake (0, 0, PDWidth_mainScreen, PDHeight
    _mainscreen); _tableview.frame = CGRectMake (0,-self.contentview.bounds.size.height, Pdwidth_mainscreen,
  Self.contentView.bounds.size.height);
} completion:^ (BOOL finished) {}]; //Return animation of First interface-(void) backtofirstpageanimation {[UIView animatewithduration:0.3 delay:0.0 Options:uiviewanimationop Tionlayoutsubviews animations:^{_tableview.frame = CGRectMake (0, 0, Pdwidth_mainscreen, self.contentView.bounds.size
    . height);

  _webview.frame = CGRectMake (0, _tableview.contentsize.height, Pdwidth_mainscreen, Pdheight_mainscreen);
} completion:^ (BOOL finished) {}]; }

Then there is the animation of the text hint at the top of the screen when the second page is pulled down. This is me. We monitor the offset of the WebView ScrollView by KVO, and as long as its offset changes, the KVO proxy method is executed in real time, and then we complete the animation in the method based on the change of its offset (as the offset of the large font becomes opaque and reaches a certain critical point, The font changes to red, and the text changes to "release, return Details".

Start listening for WebView scrolling offsets

  Start listening for _webview.scrollview offsets
  [_webview.scrollview addobserver:self forkeypath:@ "Contentoffset" options: nskeyvalueobservingoptionnew| Nskeyvalueobservingoptionold Context:nil];

In the Kvo proxy method, the animation of the prompt text is completed based on the offset

-(void) Observevalueforkeypath: (NSString *) KeyPath Ofobject: (ID) object change: (nsdictionary<nsstring *,id> *) Change context: (void *) context
{
  if (object = = _webview.scrollview && [keypath isequaltostring:@] Contentoffset "])
  {
    NSLog (@"----old:%@----new:%@ ", change[@" old "],change[@" new "));
    [Self headlabanimation:[change[@ ' new '] cgpointvalue].y];
  } else
  {
    [super Observevalueforkeypath:keypath Ofobject:object Change:change context:context];
  }

}

The implementation code for the animation that prompts the text:

Head hint text animation
-(void) Headlabanimation: (cgfloat) OffsetY
{
  _headlab.alpha =-offsety/60;
  _headlab.center = Cgpointmake (PDWIDTH_MAINSCREEN/2,-offsety/2.f);
  The icon is flipped, indicating that it has exceeded the critical value, and letting go will return to the previous page
  if (-offsety>_maxcontentoffset_y) {
    _headlab.textcolor = [Uicolor redcolor];
    _headlab.text = @ "release, return Details";
  } else{
    _headlab.textcolor = Pdcolor_button_gray;
    _headlab.text = @ "Pull up, return details";
  }

The final effect of the implementation:

Summarize

The above is the entire content of this article, I hope the content of this article for your iOS developers can help, if you have questions you can message exchange.