iOS：類似於網易雲音樂的重新整理條目顯示彈框

標籤：調用   png   狀態   nss   style   導航   uiview   http   status   

一、介紹

在app中使用重新整理控制項或者第三方重新整理庫是最常見的功能，在請求伺服器時，擷取資料的過程是處於不可見狀態的，那麼通過這個重新整理狀態可以給使用者以直觀的感受，這是增強使用者體驗的一個相當好的方法。我個人認為，有時這個方法仍有不足，就是當拉取到資料時，使用者只是知道資料有了，並沒有直接告知使用者拉取了或者重新整理了多少條資料。所以，這裡我寫了一個類似於網易雲音樂的“朋友”模組中的一個重新整理條目顯示彈框。

 

二、思想

1、建立一個messageView，內部包含一個label，使用masonry約束，將其放到navigationBar後面，預設狀態是透明的；

2、navigationBar可以是系統的，也可以是自訂的，根據需求去應用；

3、重新整理結束時通過UIView的block動畫改編透明度並顯示，顯示一定時間後自動顯示隱藏；

4、建立的執行個體都放在基類中進行，暴露給子類去調用即可；

 

三、代碼

ShowMessageView.h

////  ShowMessageView.h//  ShowMessageTest////  Created by 夏遠全 on 2018/3/22.//  Copyright ? 2018年 夏遠全. All rights reserved.//#import <UIKit/UIKit.h>@interface ShowMessageView : UIView//建立顯示彈框（這個直接放在基類中建立，並將該執行個體對象暴露給子類使用，vc的系統導覽列沒有隱藏掉）+(instancetype)createShowMessageViewInViewController:(UIViewController *)vc;//建立顯示彈框（這個直接放在基類中建立，並將該執行個體對象暴露給子類使用，vc的系統導覽列被隱藏掉了，傳入vc自訂的導覽列customNav）+(instancetype)createShowMessageViewInViewController:(UIViewController *)vc customNav:(UIView *)customNav;//顯示訊息 (重新整理結束後調用)-(void)showMessage:(NSString *)message;//隱藏訊息 (需要在基類的viewWillDisappear調用一次就行了)-(void)hideMessage;@end

View Code

ShowMessageView.m

////  ShowMessageView.m//  ShowMessageTest////  Created by 夏遠全 on 2018/3/22.//  Copyright ? 2018年 夏遠全. All rights reserved.//#import "ShowMessageView.h"#import <Masonry.h>#define isIphoneX_YML (kScreenWidth == 375.0 && kScreenHeight == 812.0) //沒有橫屏模式才能這麼判斷#define kStatusBarHeight (isIphoneX_YML ? 44.0 : 20.0)#define kNavigationHeight 44.0#define kNavigationAndStatusBarHeight    (kStatusBarHeight + kNavigationHeight)@interface ShowMessageView ()@property (nonatomic, strong) UILabel *messageLabel;@property (nonatomic, assign) CGFloat messsageWidth;@end@implementation ShowMessageView#pragma mark - life cycle+(instancetype)createShowMessageViewInViewController:(UIViewController *)vc{    ShowMessageView *messageView = [[self alloc] initWithFrame:CGRectMake(0, kNavigationAndStatusBarHeight-40, 200, 40)];        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];        return messageView;}+(instancetype)createShowMessageViewInViewController:(UIViewController *)vc customNav:(UIView *)customNav;{        ShowMessageView *messageView = [[self alloc] initWithFrame:CGRectMake(0, kNavigationAndStatusBarHeight-40, 200, 40)];        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];        return messageView;}-(void)setup{    [self setDefalut];    [self addSubViews];    [self setupSubviewsConstraints];}-(void)setDefalut{    }#pragma mark - add subViews-(void)addSubViews{    [self addSubview:self.messageLabel];}#pragma mark - 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(100, self.messsageWidth)+20));        }    }];}#pragma mark - event response#pragma mark - public methods-(void)showMessage:(NSString *)message{        self.messageLabel.text = message;        if (message.length > 0) {        self.messsageWidth = [message boundingRectWithSize:CGSizeMake(MAXFLOAT, 40) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:16]} context:nil].size.width;        [self setupSubviewsConstraints];    }        if (self.alpha == 0) {                self.hidden = NO;                [UIView animateWithDuration:0.8 animations:^{                self.alpha = 1.0;            self.transform = CGAffineTransformMakeTranslation(0,40+10);                    } completion:^(BOOL finished) {                        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{                                [UIView animateWithDuration:0.3 animations:^{                                        self.alpha = 0;                                    } completion:^(BOOL finished) {                                        self.hidden = YES;                    self.transform = CGAffineTransformIdentity;                }];                });                    }];    }    }-(void)hideMessage{    self.alpha = 0;    self.transform = CGAffineTransformIdentity;}#pragma mark - 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;}#pragma mark - getters and setters-(UILabel *)messageLabel{    if (!_messageLabel) {        _messageLabel = [[UILabel alloc] init];        _messageLabel.layer.cornerRadius = 20;        _messageLabel.layer.masksToBounds = YES;        _messageLabel.font = [UIFont systemFontOfSize:16];        _messageLabel.textAlignment = NSTextAlignmentCenter;        _messageLabel.textColor = [UIColor whiteColor];        _messageLabel.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7];    }    return _messageLabel;}@end

View Code

 

四、使用

1、在基類建立

@property (nonatomic, strong) ShowMessageView *showMessageView; //在基類中定義執行個體屬性

self.showMessageView = [ShowMessageView createShowMessageViewInViewController:self]; //在基類中建立執行個體

2、在基類實現必要的方法

- (void)viewWillDisappear:(BOOL)animated   //在基類中調用必要的方法{    [super viewWillDisappear:animated];    [self.showMessageView hideMessage];}

3、子類調用

[weakSelf.tableView.mj_header endRefreshing];[weakSelf.showMessageView showMessage:@"重新整理了20條新資料"];  //結束重新整理後顯示條目彈框

 

五、效果

 

iOS：類似於網易雲音樂的重新整理條目顯示彈框