webview使用masonry簡單適配iPhone

現(xiàn)在做的一個iOS的webApp犀忱,使用WKWebView進行使用拣展。但在適配是坡垫,之前使用autoresizing進行簡單的適配梭灿,顯示的是正常的,但到了iPhone X的適配上卻出現(xiàn)了問題(safa area冰悠,齊劉海是什么鬼)堡妒。

最開始的想法是使用宏定義進行適配,但后來試了試溉卓,感覺好麻煩的說皮迟。后來實在是忍不了了,想起了mesonry(之前有看新浪的新聞?wù)fmesonry要開始棄用了桑寨,所以一開始是拒絕的)伏尼,然后進行了簡單的適配,發(fā)現(xiàn)確實是特簡單(我只用了WKWebViewUIProgressView西疤,約束很少烦粒,而且不用怎么更新)。

廢話不多說了代赁,上代碼

/** 之前使用AutoresizingMask進行約束 */
- (void)setUIFrameWithAutoresizing {
    
    [self.view addSubview:self.webView];
    // 使用AutoresizingMask進行適配,和父視圖等寬登高以便保持和父視圖上兽掰、下芭碍、左、右的邊距不變
    [self.webView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
    // 設(shè)置如果需要就更新約束
    [self.webView setTranslatesAutoresizingMaskIntoConstraints:YES];
    
    [self.webView addSubview:self.progressView];
    self.progressView.frame = CGRectMake(0, 0, screenW, 5);
}

/** 現(xiàn)在使用Masonry進行約束 */
- (void)setUIFrameWithMasonry {
    
    // 需要在block里面操作孽尽,所以先將 self 設(shè)為弱指針
    __weak typeof(self)weakSelf = self;
    
    // 添加webView到當(dāng)前視圖上(使用masonry需要先添加到父視圖上才可以窖壕,不然會崩潰)
    [self.view addSubview:self.webView];
    
    // 設(shè)置webView 的 masonry 約束
    [self.webView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // iOS 11 適配(iPhoneX最低都是iOS 11)
        if (@available(iOS 11.0, *)) {
            // 設(shè)置頂部和底部 與 safeArea 相同(貼合)
            make.top.equalTo(weakSelf.view.mas_safeAreaLayoutGuideTop);
            make.bottom.equalTo(weakSelf.view.mas_safeAreaLayoutGuideBottom);
        } else {
            // 設(shè)置頂部 與 父視圖(view)向下便宜20個像素
            make.top.equalTo(weakSelf.view.mas_top).with.offset(20);
            // 設(shè)置底部與俯視圖貼合
            make.bottom.equalTo(weakSelf.view.mas_bottom);
        }
        // 設(shè)置左邊距和右邊距 與 父視圖相同(貼合)
        make.left.equalTo(weakSelf.view.mas_left);
        make.right.equalTo(weakSelf.view.mas_right);
    }];
    
    // 設(shè)置progress的 masonry 約束 (需要注意的是父視圖webview是已經(jīng)加載并約束完的,不然會報錯)
    [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);
        // 設(shè)置高度為3個像素
        make.height.mas_equalTo(@3);
    }];
}

這只是我自己使用的簡單的約束,具體的masonry可以自行百度查看mesonry的詳解(我喜歡將progress設(shè)置在webView上瞻讽,這樣不論怎么樣都比較適配)鸳吸。

現(xiàn)在在做webApp的項目,之后可能會將項目的demo上傳到我的github速勇。歡迎先來觀看下載晌砾。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市烦磁,隨后出現(xiàn)的幾起案子养匈,更是在濱河造成了極大的恐慌,老刑警劉巖都伪,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呕乎,死亡現(xiàn)場離奇詭異,居然都是意外死亡陨晶,警方通過查閱死者的電腦和手機猬仁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來先誉,“玉大人逐虚,你說我怎么就攤上這事∽簧牛” “怎么了叭爱?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長漱病。 經(jīng)常有香客問我买雾,道長,這世上最難降的妖魔是什么杨帽? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任漓穿,我火速辦了婚禮,結(jié)果婚禮上注盈,老公的妹妹穿的比我還像新娘晃危。我一直安慰自己,他們只是感情好老客,可當(dāng)我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布僚饭。 她就那樣靜靜地躺著,像睡著了一般胧砰。 火紅的嫁衣襯著肌膚如雪鳍鸵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天尉间,我揣著相機與錄音偿乖,去河邊找鬼击罪。 笑死,一個胖子當(dāng)著我的面吹牛贪薪,可吹牛的內(nèi)容都是我干的媳禁。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼画切,長吁一口氣:“原來是場噩夢啊……” “哼竣稽!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起槽唾,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤丧枪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后庞萍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拧烦,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年钝计,在試婚紗的時候發(fā)現(xiàn)自己被綠了恋博。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡私恬,死狀恐怖债沮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情本鸣,我是刑警寧澤疫衩,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站荣德,受9級特大地震影響闷煤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜涮瞻,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一鲤拿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧署咽,春花似錦近顷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至家淤,卻和暖如春异剥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背絮重。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工冤寿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人青伤。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓督怜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親狠角。 傳聞我的和親對象是個殘疾皇子号杠,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 屏幕適配 本章節(jié)主要還是說明如何讓應(yīng)用程序能夠適配在蘋果不同的屏幕和如何讓應(yīng)用中的內(nèi)容在不同的屏幕下能夠正常的放置...
    AlanGe閱讀 693評論 0 2
  • 1.尺寸適配1.原因 iOS7中所有導(dǎo)航欄都為半透明,導(dǎo)航欄(height=44)和狀態(tài)欄(height=20)不...
    LZM輪回閱讀 6,093評論 1 4
  • 1丰歌、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_x閱讀 15,968評論 3 119
  • 聶雨對她真的是又關(guān)心又氣耙腆!是的他十分關(guān)心她立帖,是從什么時候開始的眼溶?他忘了,是真的忘了晓勇√梅桑可能太早了吧!只知道绑咱,她走到...
    無槡閱讀 171評論 0 0
  • 歲月擲人老绰筛,風(fēng)物磨光輝。 一葉寄天地描融,君也歸不歸铝噩?
    一衣香農(nóng)閱讀 140評論 1 1