IOS: Similar to NetEase Cloud Music Refresh entry display bullet box

First, Introduction

Using refresh controls in the app or a third-party refresh library is the most common feature, and when requesting a server, the process of getting the data is invisible, and this refresh state gives the user an intuitive feel, which is a good way to enhance the user experience. I personally think that sometimes this method is still inadequate, that is, when pulled to the data, the user just know that the data has, and did not directly tell the user to pull or refresh the number of data. So, here I wrote a similar to the NetEase cloud Music "friend" module in a refresh entry to display the bullet box.

Second, the idea

1, create a Messageview, the interior contains a label, using the masonry constraint, put it behind the Navigationbar, the default state is transparent;

2, Navigationbar can be system, can also be customized, according to the requirements to apply;

3, at the end of the refresh through the UIView block animation to adapt the transparency and display, display a certain time after the automatic display hidden;

4, the created instances are placed in the base class, exposed to subclasses to call;

Third, the Code

ShowMessageView.h

////ShowMessageView.h//showmessagetest////Created by Xiahuan on 2018/3/22.//Copyright 2018 The summer is far from full. All rights reserved.//#import<UIKit/UIKit.h>@interfaceShowmessageview:uiview//Create a Display bullet box (this is created directly in the base class and exposes the instance object to the subclass, and the VC's system navigation bar is not hidden)+ (Instancetype) Createshowmessageviewinviewcontroller: (Uiviewcontroller *) VC;//Create a display box (this is created directly in the base class, and expose the instance object to the subclass, the VC's system navigation bar is hidden, incoming VC custom navigation bar Customnav)+ (Instancetype) Createshowmessageviewinviewcontroller: (Uiviewcontroller *) VC Customnav: (UIView *) Customnav;//Display message (called after refresh ends)-(void) ShowMessage: (NSString *) message;//Hide the message (you need to call the Viewwilldisappear in the base class once on the line)-(void) Hidemessage;@end

View Code

showmessageview.m

////showmessageview.m//showmessagetest////Created by Xiahuan on 2018/3/22.//Copyright 2018 The summer is far from full. All rights reserved.//#import "ShowMessageView.h"#import<Masonry.h>#defineIsiphonex_yml (Kscreenwidth = = 375.0 && kscreenheight = = 812.0)//No horizontal screen mode to judge that.#defineKstatusbarheight (isiphonex_yml? 44:20)#defineKnavigationheight 44.0#defineKnavigationandstatusbarheight (Kstatusbarheight + knavigationheight)@interfaceShowmessageview () @property (nonatomic, strong) UILabel*Messagelabel; @property (nonatomic, assign) cgfloat messsagewidth;@end@implementationShowmessageview#pragmaMark-life cycle+ (Instancetype) Createshowmessageviewinviewcontroller: (Uiviewcontroller *) vc{Showmessageview*messageview = [[Self alloc] Initwithframe:cgrectmake (0, knavigationandstatusbarheight- +, $, +)]; Messageview.backgroundcolor=[Uicolor Clearcolor]; Messageview.alpha=0; Messageview.hidden=YES; Messageview.centerx=Vc.navigationController.navigationBar.centerX;        [Messageview Setshadowforview:messageview];    [Vc.navigationController.navigationBar Addsubview:messageview];        [Vc.navigationController.navigationBar Sendsubviewtoback:messageview];        [Messageview Setup]; returnMessageview;}+ (Instancetype) Createshowmessageviewinviewcontroller: (Uiviewcontroller *) VC Customnav: (UIView *) Customnav; {Showmessageview*messageview = [[Self alloc] Initwithframe:cgrectmake (0, knavigationandstatusbarheight- +, $, +)]; Messageview.backgroundcolor=[Uicolor Clearcolor]; Messageview.alpha=0; Messageview.hidden=YES; Messageview.centerx=Customnav.centerx;        [Shadowutility Setshadowforview:messageview];        [Customnav Addsubview:messageview];        [Customnav Sendsubviewtoback:messageview];        [Messageview Setup]; returnMessageview;}-(void) setup{[self setdefalut];    [Self addsubviews]; [Self setupsubviewsconstraints];}-(void) setdefalut{}#pragmaMark-add subviews-(void) addsubviews{[self AddSubview:self.messageLabel];}#pragmaMark-layout subviews-(void) setupsubviewsconstraints{[Self.messagelabel mas_remakeconstraints:^ (Masconstraintmaker *Make )        {Make.centerX.equalTo (Self.mas_centerx);        Make.centerY.equalTo (Self.mas_centery);        Make.height.equalTo (Self.mas_height); if(Self.messsagewidth >0) {Make.width.equalTo (@ (MAX ( -, self.messsagewidth) + -)); }    }];}#pragmaMark-event response#pragmaMark-public methods-(void) ShowMessage: (NSString *) message{Self.messageLabel.text=message; if(Message.length >0) {Self.messsagewidth= [Message Boundingrectwithsize:cgsizemake (Maxfloat, +) Options:nsstringdrawinguseslinefragmentorigin Attributes:@{nsfontattributename:[uifont systemFontOfSize: -]} context:nil].size.width;    [Self setupsubviewsconstraints]; }        if(Self.alpha = =0) {Self.hidden=NO; [UIView animatewithduration:0.8animations:^{Self.alpha=1.0; Self.transform= Cgaffinetransformmaketranslation (0, ++Ten); } Completion:^(BOOL finished) {Dispatch_after (Dispatch_time (Dispatch_time_now, (int64_t) (0.5* nsec_per_sec)), Dispatch_get_main_queue (), ^{[UIView animatewithduration:0.3animations:^{Self.alpha=0; } Completion:^(BOOL finished) {Self.hidden=YES; Self.transform=cgaffinetransformidentity;                }];                    });    }]; }    }-(void) hidemessage{Self.alpha=0; Self.transform=cgaffinetransformidentity;}#pragmaMark-private methods-(void) Setshadowforview: (UIView *) view{View.layer.shadowColor= Hexcolor (0xaeaeae).    Cgcolor; View.layer.shadowOffset= Cgsizemake (0,0); View.layer.shadowRadius=4.0; View.layer.shadowOpacity=0.2; View.layer.shouldRasterize=YES; View.layer.rasterizationScale=[UIScreen Mainscreen].scale;}#pragmaMark-getters and setters-(UILabel *) messagelabel{if(!_messagelabel) {_messagelabel=[[UILabel alloc] init]; _messagelabel.layer.cornerradius= -; _messagelabel.layer.maskstobounds=YES; _messagelabel.font= [Uifont systemfontofsize: -]; _messagelabel.textalignment=Nstextalignmentcenter; _messagelabel.textcolor=[Uicolor Whitecolor]; _messagelabel.backgroundcolor= [[Uicolor blackcolor] Colorwithalphacomponent:0.7]; }    return_messagelabel;}@end

View Code

Iv. Use of

1. Create in base class

Defining instance properties in a base class

Creating an instance in a base class

2. Implement the necessary methods in the base class

-(void) viewwilldisappear: (BOOL) animated   //Call the necessary method in the base class {    [super Viewwilldisappear: Animated];    [Self.showmessageview hidemessage];}

3. Subclass Invocation

[WeakSelf.tableView.mj_header endrefreshing]; [Weakself.showmessageview showmessage: @" refreshed 20 new data "];  //End Refresh Show entry Bullet box

Five, the effect

IOS: Similar to NetEase Cloud Music Refresh entry display bullet box