Open-source Chinese IOS client learning-(2) pull-down refresh special effect egotableviewpullrefresh

Source: Internet
Author: User

The first step to open an open-source Chinese IOS client application is to load data. when we open the application for the second time, our interface displays the last updated data, now we want to see the latest content, we need to refresh the data and load the content. Loading requires a waiting process. How can we make the user wait for the process to complete without being anxious, this requires the user to be comforted and let the user know that the software is working very hard to execute their own commands, which requires us to add some special effects for our own applications;


Many special effects have been applied to open-source Chinese IOS clients. These special effects are popular in many applications. Basically, these special effects belong to third-party class libraries. What I want to talk about this is pull-down refresh special effects, egotableviewpullrefresh was initially used in Twitter, and finally made open source. Then many applications add this special effect, which is often used as an animation for loading data and changing the wait time;

Refresh the egotableviewpullrefresh resource file from the drop-down list:

Https://github.com/enormego/EGOTableViewPullRefresh/tree/


First, this special effect


The egotableviewpullrefresh resource file contains two files:. M and. H files, and resource images, which are the drop-down and refresh arrows.


Resource images have four colors in total. You can select arrows of different colors based on your preferences. You only need to modify them in the egorefreshtableheaderview. M file. There are two types of dimensions, which are used on the iPad.



For these third-party libraries, we do not need to study their internal implementation mechanisms in depth, as long as we know how to use them. However, taking a look at the implementation principles of others, it is still good to learn other people's methods and understand how the ox program is written;


Egorefreshtableheaderview. h

# Import <uikit/uikit. h> # import <quartzcore/quartzcore. h> typedef Enum {token = 0, Token, Token,} token; @ protocol identifier; @ interface egorefreshtableheaderview: uiview {ID _ delegate; egopullrefreshstate _ state; uilabel * _ lastupdatedlabel; uilabel * _ statuslabel; calayer * _ arrowimage; uiactivityindicatorview * _ activityview;} @ property (nonatomic, assign) ID <strong> delegate;-(ID) initwithframe :( cgrect) frame arrowimagename :( nsstring *) Arrow textcolor :( uicolor *) textcolor;-(void) refreshlastupdateddate;-(void) Comment :( uiscrollview *) scrollview;-(void) Comment :( uiscrollview *) scrollview;-(void) define :( uiscrollview *) scrollview; @ end // call this method when defining the Protocol method @ protocol egorefreshtableheaderdelegate // drop-down-(void) Expose :( egorefreshtableheaderview *) view; // judge whether the refresh status is being refreshed or not-(bool) egorefreshtableheaderperformanceisloading :( egorefreshtableheaderview *) view; @ optional // return the refresh time and callback method-(nsdate *) egorefreshtableheaderdatasourcelastupdated :( egorefreshtableheaderview *) view; @ end


The first is to define an enumeration type egopullrefreshstate to indicate the status of the current operation, including the drop-down status, normal status, and data loading status;

@ Protocol egorefreshtableheaderdelegate; indicates that this Protocol is declared and some methods are declared in this Protocol, as long as other classes follow this Protocol (that is, they follow its Rules ), you can implement the methods in the Protocol. The methods in the Protocol are left to the classes that follow the protocol for implementation, and to external implementation interfaces;


The egorefreshtableheaderview member variable defines two labels to indicate the status of the drop-down process and the displayed refresh time. Defines the calayer Class Object loading display image. The uiactivityindicatorview Class Object displays a waiting animation;


@ Property (nonatomic, assign) ID
<Egorefreshtableheaderdelegate> delegate; declares a protocol object;


Next, the egorefreshtableheaderview class member function is used to implement the pull-down refresh effect in the class library;


Finally, four protocol methods are defined. The last protocol method is optional;


The following is the egorefreshtableheaderview. M file. All you want to talk about is in the comment.

# Import "egorefreshtableheaderview. H "# define text_color [uicolor colorwithred: 87.0/255.0 Green: 108.0/255.0 Blue: 137.0/255.0 ALPHA: 1.0] # define flip_animation_duration 0.18f // sets a private interface, only @ interface egorefreshtableheaderview (private)-(void) setstate :( partial) astate; @ end @ implementation egorefreshtableheaderview @ synthesize delegate = _ delegate; // initialize framework attributes, -(ID) initwithframe :( cgrect) frame arrowimagename :( nsstring *) Arrow textcolor :( uicolor *) textcolor {If (Self = [Super initwithframe: frame]) {// self. view automatically adapts to the bounds width self. autoresizingmask = uiviewautoresizingflexiblewidth; // self. view background color and transparency settings self. backgroundcolor = [uicolor colorwithred: 226.0/255.0 Green: 231.0/255.0 Blue: 237.0/255.0 ALPHA: 1.0]; uilabel * label = [[uilabel alloc] initwithframe: cgrectmake (0.0f, frame. size. height-302.16f, self. frame. size. width, 20366f)]; label. autoresizingmask = uiviewautoresizingflexiblewidth; label. font = [uifont systemfontofsize: 12.0f]; label. textcolor = textcolor; // label text shadow color label. shadowcolor = [uicolor colorwithwhite: 0.9f ALPHA: 1.0f]; label. shadowoffset = cgsizemake (0.0f, 1.0f); label. backgroundcolor = [uicolor clearcolor]; label. textalignment = uitextalignmentcenter; [self addsubview: Label]; _ lastupdatedlabel = label; [label release]; label = [[uilabel alloc] initwithframe: cgrectmake (0.0f, frame. size. height-48366f, self. frame. size. width, 20366f)]; label. autoresizingmask = uiviewautoresizingflexiblewidth; label. font = [uifont boldsystemfontofsize: 13.0f]; label. textcolor = textcolor; label. shadowcolor = [uicolor colorwithwhite: 0.9f ALPHA: 1.0f]; label. shadowoffset = cgsizemake (0.0f, 1.0f); label. backgroundcolor = [uicolor clearcolor]; label. textalignment = uitextalignmentcenter; [self addsubview: Label]; _ statuslabel = label; [label release]; calayer * layer = [calayer layer]; layer. frame = cgrectmake (25366f, frame. size. height-65.0f, 30366f, 55.0f); // sets the layer to adapt to the layer in some form in the view. contentsgravity = kcagravityresizeaspect; layer. contents = (ID) [uiimage imagenamed: Arrow]. cgimage; // determine the device version. Because some iOS features are newly added at the end, the device configuration must be higher, so let's make a judgment # If _ iphone_ OS _version_max_allowed> = 40000if ([[uiscreen mainscreen] respondstoselector: @ selector (scale)]) {layer. contentsscale = [[uiscreen mainscreen] scale] ;}# endif [[self layer] addsublayer: layer]; _ arrowimage = layer; uiactivityindicatorview * view = [[uiactivityindicatorview alloc] usage: uiactivityindicatorviewstylegray]; view. frame = cgrectmake (25366f, frame. size. height-38366f, 20366f, 20366f); [self addsubview: View]; _ activityview = view; [view release]; [self setstate: egoopullrefreshnormal];} return self ;}
// Initialize the current view's frame-(ID) initwithframe :( cgrect) frame {return [self initwithframe: frame arrowimagename: @ "bluearrow.png" textcolor: text_color];} # pragma mark-# pragma mark setters // obtain the last update time-(void) refreshlastupdateddate {If ([_ delegate respondstoselector: @ selector (egorefreshtableheader1_celastupdated :)]) {nsdate * Date = [_ delegate attributes: Self]; // nsdateformatter instance creation string to represent the nsdate and nscalendardate objects. The formatted character string has been reserved and the output [nsdateformatter setdefaformatformatterbehaviordefault]; nsdateformatter * dateformatter = [[[nsdateformatter alloc] init] autorelease]; // set the date output format [dateformatter setdatestyle: nsdateformatter1_style]; // set the time display format [dateformatter settimestyle: nsdateformatter1_style]; // _ lastupdatedlabel. TEXT = [nsstring stringwithformat: @ "last updated: % @", [dateformatter stringfromdate: date]; _ lastupdatedlabel. TEXT = [nsstring stringwithformat: @ "last updated: % @", [dateformatter stringfromdate: date]; // storage _ lastupdatedlabel. text Content, put it in the dictionary [[nsuserdefaults standarduserdefaults] setobject: _ lastupdatedlabel. text forkey: @ "egorefreshtableview_lastrefresh"]; // put the nsuserults ults stored data to the disk [[nsuserdefaults standarduserdefaults] synchronize];} else {_ lastupdatedlabel. TEXT = nil ;}}
-(Void) setstate :( egopullrefreshstate) astate {Switch (astate) {/* Touch Screen drop-down status */case egoopullrefreshpulling: // _ statuslabel. TEXT = nslocalizedstring (@ "release to refresh... ", @" release to refresh status "); _ statuslabel. TEXT = @ "release to refresh"; // set a drop-down refresh process. An animation process of the arrow image [catransaction begin]; // The animation time [catransaction setanimationduration: flip_animation_duration]; // refresh the arrow from the drop-down list. (m_pi/180.0) converts the angle to radian _ arrowimage. transform = catransform3dmakerotation (m_pi/180.0) * 180.0f, 0.0f, 0.0f, 1.0f); // The animation ends [catransaction commit]; break; /* The status when the screen is ready for pulling down */case when: If (_ state = success) {[catransaction begin]; [catransaction setanimationduration: flip_animation_duration]; _ arrowimage. transform = catransform3didentity; [catransaction commit];} // _ statuslabel. TEXT = nslocalizedstring (@ "pull down to refresh... ", @" pull down to refresh status "); _ statuslabel. TEXT = @ "you can refresh from the drop-down list"; [_ activityview stopanimating]; [catransaction begin]; // you do not need to pull down the animation after the pull-down refresh is completed, in this case, _ activityview animation display // display the animation effect kcfbooleantrue disable kcfbooleanfalse enable [catransaction setvalue :( ID) kcfbooleantrue forkey: kcatransactiondisableactions]; _ arrowimage. hidden = no; _ arrowimage. transform = catransform3didentity; [catransaction commit]; // Update time [self refreshlastupdateddate]; break;/* release the touch finger to complete the pull-down operation status */case egoopullrefreshloading: // _ statuslabel. TEXT = nslocalizedstring (@ "loading... ", @" loading status "); _ statuslabel. TEXT = @ "loading"; [_ activityview startanimating]; [catransaction begin]; [catransaction setvalue :( ID) kcfbooleantrue forkey: kcatransactiondisableactions]; _ arrowimage. hidden = yes; [catransaction commit]; break; default: break;} _ state = astate ;}
# Pragma mark-# pragma mark scrollview methods-(void) returns :( uiscrollview *) scrollview {If (_ state = egoopullrefreshloading) {cgfloat offset = max (scrollview. contentoffset. y *-1, 0); offset = min (offset, 60); scrollview. contentinset = uiedgeinsetsmake (offset, 0.0f, 0.0f, 0.0f);} else if (scrollview. isdragging) {bool _ loading = no; If ([_ delegate respondstoselector: @ selector (eg Orefreshtableheaderdatasourceisloading :)]) {_ loading = [_ delegate egorefreshtableheaderdatasourceisloading: Self];} If (_ state = egoopullrefreshpulling & scrollview. contentoffset. y>-65.0f & scrollview. contentoffset. Y <0.0f &&! _ Loading) {[self setstate: egoopullrefreshnormal];} else if (_ state = egoopullrefreshnormal & scrollview. contentoffset. Y <-65.0f &&! _ Loading) {[self setstate: egoopullrefreshpulling];} // set the drop-down property scrollview framework to restore the initial position if (scrollview. contentinset. Top! = 0) {// A uiedgeinsets struct whose top, left, bottom, and right fields are all set to the value 0. scrollview. contentinset = uiedgeinsetszero ;}}- (void) rows :( uiscrollview *) scrollview {bool _ loading = no; If ([_ delegate respondstoselector: @ selector (handler :)]) {_ loading = [_ delegate egorefreshtableheaderperformanceisloading: Self];} If (S Crollview. contentoffset. Y <=-65.0f &&! _ Loading) {If ([_ delegate respondstoselector: @ selector (separator :)]) {[_ delegate failed: Self];} [self setstate: egoopullrefreshloading]; [uiview beginanimations: nil context: NULL]; [uiview setanimationduration: 0.2]; scrollview. contentinset = uiedgeinsetsmake (601_f, 0.0f, 0.0f, 0.0f); [uiview commitanimations] ;}// call this method after data loading is complete-(void) Expose :( uiscrollview *) scrollview {[uiview beginanimations: Nil context: NULL]; [uiview setanimationduration :. 3]; // The position and size of scrollview after data is loaded [scrollview setcontentinset: uiedgeinsetsmake (0.0f, 0.0f, 0.0f, 0.0f)]; [uiview commitanimations]; // Data Loading completed. [self setstate: egoopullrefreshnormal];}
#pragma mark -#pragma mark Dealloc- (void)dealloc {_delegate=nil;_activityView = nil;_statusLabel = nil;_arrowImage = nil;_lastUpdatedLabel = nil;    [super dealloc];}@end


When we want to use this pull-down to refresh the class library, declare the Protocol <egorefreshtableheaderdelegate> in the class to deliver the current class self to the Protocol object of the pull-down refresh library, that is, XX. delegate = self;

We can delegate another class to implement the Protocol method.

Right-click a protocol method and select jump to definition to see which classes are delegated and how to use the Protocol methods of this class:

The learning process is in progress. Please correct the mistakes. Please contact us and learn together;

Welcome to share, please indicate the source of http://blog.csdn.net/duxinfeng2010

Related Article

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.