webview使用masonry简单适配iPhone

2018-08-19  本文已影响0人  遠遊旳遊子

现在做的一个iOS的webApp,使用WKWebView进行使用。但在适配是,之前使用autoresizing进行简单的适配,显示的是正常的,但到了iPhone X的适配上却出现了问题(safa area,齐刘海是什么鬼)。

最开始的想法是使用宏定义进行适配,但后来试了试,感觉好麻烦的说。后来实在是忍不了了,想起了mesonry(之前有看新浪的新闻说mesonry要开始弃用了,所以一开始是拒绝的),然后进行了简单的适配,发现确实是特简单(我只用了WKWebViewUIProgressView,约束很少,而且不用怎么更新)。

废话不多说了,上代码

/** 之前使用AutoresizingMask进行约束 */
- (void)setUIFrameWithAutoresizing {
    
    [self.view addSubview:self.webView];
    // 使用AutoresizingMask进行适配,和父视图等宽登高以便保持和父视图上、下、左、右的边距不变
    [self.webView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
    // 设置如果需要就更新约束
    [self.webView setTranslatesAutoresizingMaskIntoConstraints:YES];
    
    [self.webView addSubview:self.progressView];
    self.progressView.frame = CGRectMake(0, 0, screenW, 5);
}

/** 现在使用Masonry进行约束 */
- (void)setUIFrameWithMasonry {
    
    // 需要在block里面操作,所以先将 self 设为弱指针
    __weak typeof(self)weakSelf = self;
    
    // 添加webView到当前视图上(使用masonry需要先添加到父视图上才可以,不然会崩溃)
    [self.view addSubview:self.webView];
    
    // 设置webView 的 masonry 约束
    [self.webView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // iOS 11 适配(iPhoneX最低都是iOS 11)
        if (@available(iOS 11.0, *)) {
            // 设置顶部和底部 与 safeArea 相同(贴合)
            make.top.equalTo(weakSelf.view.mas_safeAreaLayoutGuideTop);
            make.bottom.equalTo(weakSelf.view.mas_safeAreaLayoutGuideBottom);
        } else {
            // 设置顶部 与 父视图(view)向下便宜20个像素
            make.top.equalTo(weakSelf.view.mas_top).with.offset(20);
            // 设置底部与俯视图贴合
            make.bottom.equalTo(weakSelf.view.mas_bottom);
        }
        // 设置左边距和右边距 与 父视图相同(贴合)
        make.left.equalTo(weakSelf.view.mas_left);
        make.right.equalTo(weakSelf.view.mas_right);
    }];
    
    // 设置progress的 masonry 约束 (需要注意的是父视图webview是已经加载并约束完的,不然会报错)
    [self.webView addSubview:self.progressView];
    [self.progressView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(weakSelf.webView.mas_top);
        make.width.equalTo(weakSelf.webView.mas_width);
        // 设置高度为3个像素
        make.height.mas_equalTo(@3);
    }];
}

这只是我自己使用的简单的约束,具体的masonry可以自行百度查看mesonry的详解(我喜欢将progress设置在webView上,这样不论怎么样都比较适配)。

现在在做webApp的项目,之后可能会将项目的demo上传到我的github。欢迎先来观看下载。

上一篇下一篇

猜你喜欢

热点阅读