美文网首页好东西小知识点
空白页面与无网络情况及跳转设置

空白页面与无网络情况及跳转设置

作者: 独孤流 | 来源:发表于2017-12-21 12:56 被阅读28次

    LHEmptyPageDemo

    关键词:空白页面、无网络访问权限、没有网络、DZNEmptyDataSet、跳转到设置页面

    前言:空白页面展示

    现在的APP数据都是从网络里获取,如果没有设置特别的空白页面提示,整个APP的使用性会差很多,而且也会显得很low

    一、空白页面通常的类型

    1. 没有网络访问权限

    第一次安装APP后在提示允许使用网络时点击了否,APP没有请求网络的权限,这时没有任何数据,
    应该显示【图片+描述文字(如:APP没有网络访问权限)+按钮(如:名称为‘去设置’,点击去设置的这个按钮跳转到去打开网络权限的设置页面)

    1. 手机没有网络

    有网络访问权限,但手机没有网络,既没有开WiFi,也没有开启移动蜂窝网络,通常情况是开了飞行模式或者在既没有WiFi、有没有3g、4g的地铁里或野外
    应该显示【图片+描述文字(如:网络已经断开连接)+按钮(如:名称为‘设置网络’,点击设置网络的这个按钮跳转到去开启网络的设置页面)

    1. 当前页面的业务数据暂时没有

    网络能正常请求,但页面确实没有数据,如刚开始使用APP时,很多页面都没有数据
    应该显示【图片+描述文字(如:暂无记录)+按钮(如:名称为‘刷新’,点击刷新的这个按钮刷新数据)

    1. 能网络请求,但是网络请求出错了,比如后端接口报500内部错误等情况

    . 在1、2两种场景下,如果用户点击去开启好了相关设置,设置好从新回到APP里时,相关提示应该有更新变化,如去设置了允许访问网络后,当用户回到APP里时看到的提示语就应该变成2或3里的内容

    二、使用runtime在不动DZNEmptyDataSet的源码的情况下,修改空白页面按钮根据文字宽度自适应水平居中展示不不是默认的固定长宽度展示

    #import <UIKit/UIKit.h>
    
    @interface UIView (LHAutoWidthBtn)
    
    @end
    
    #import "UIView+LHAutoWidthBtn.h"
    #import <objc/runtime.h>
    
    @implementation UIView (LHAutoWidthBtn)
    + (void)load
    {
        Class clz = NSClassFromString(@"DZNEmptyDataSetView");
        Method originalMethod1 = class_getInstanceMethod(clz, NSSelectorFromString(@"setupConstraints"));
        Method swizzledMethod1 = class_getInstanceMethod(clz, @selector(lh_setupConstraints));
        method_exchangeImplementations(originalMethod1, swizzledMethod1);
        
    }
    - (void)lh_setupConstraints
    {
        [self lh_setupConstraints];
        UIButton *btn = [self valueForKeyPath:@"button"];
        if (btn != nil && btn.superview != nil) {
            UIView *superView = btn.superview;
            NSDictionary *views = @{@"button":btn};
            NSString *title = btn.titleLabel.text;
            CGFloat btnWith = [self sizeWithText:title font:btn.titleLabel.font withHeight:20].width+10;
            // 为了统一好看,如果小于100的都设置为100
            if (btnWith<100) {
                btnWith = 100;
            }
            // 最大宽度,由于限制了两边的padding,所以这里限制的最大宽度在小于width-2*padding时就是实际的宽度,如果在计算的宽度大于这个宽度时,则是width-2*padding的宽度
            NSString *format = [NSString stringWithFormat:@"[button(<=%f)]",btnWith];
            [superView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: format  options:0  metrics:views  views:views]];
            
            //水平居中
            NSLayoutConstraint *layout = [NSLayoutConstraint constraintWithItem:btn attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
            [superView addConstraint:layout];
        }
        
    }
    
    - (CGSize)sizeWithText:(NSString*)text font:(UIFont*)font withHeight:(float)maxHeight {
        
        CGSize maxSize = CGSizeMake(CGFLOAT_MAX,maxHeight);
        
        CGSize textSize = CGSizeZero;
        // iOS7以后使用boundingRectWithSize,之前使用sizeWithFont
        if ([text respondsToSelector:@selector(boundingRectWithSize:options:attributes:context:)]) {
            // 多行必需使用NSStringDrawingUsesLineFragmentOrigin,网上有人说不是用NSStringDrawingUsesFontLeading计算结果不对
            NSStringDrawingOptions opts = NSStringDrawingUsesLineFragmentOrigin |
            NSStringDrawingUsesFontLeading;
            
            NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
            [style setLineBreakMode:NSLineBreakByCharWrapping];
            
            NSDictionary *attributes = @{ NSFontAttributeName : font, NSParagraphStyleAttributeName : style };
            
            CGRect rect = [text boundingRectWithSize:maxSize
                                             options:opts
                                          attributes:attributes
                                             context:nil];
            textSize = rect.size;
        }
        else{
            textSize = [text sizeWithFont:font constrainedToSize:maxSize lineBreakMode:NSLineBreakByCharWrapping];
        }
        
        return textSize;
    }
    @end
    

    三、具体代码实现

    LHEmptyPageDemo

    相关文章

      网友评论

        本文标题:空白页面与无网络情况及跳转设置

        本文链接:https://www.haomeiwen.com/subject/yftawxtx.html