Swift4-有妖氣漫畫精仿選用Snapkit布局界面

Swift4-有妖氣漫畫精仿選用Snapkit布局界面

作為iOS開發,我們知道的會有很多布局界面的方式
比如Frame,比如xib,storyboard手動拉取約束,比如手寫約束
這些在我們升級到iOS11之前都很少會有問題,乃至升級至iOS11也仍然實用
但是我們會發現由于新的手機iPhone X的出現,我們的適配需要考慮到頂部的齊劉海,我們的適配需要考慮到底部的滑動區.
為什么這么說?
比如我們是視頻,比如我們是小說,比如我們是漫畫等原來全屏瀏覽的APP,我們在遇到iPhone X的時候,我們會發現,我們無法完全瀏覽全部我們想要看到的內容,特別是頂部齊劉海部分,因此,我們需要針對其做適配,是否留出來不顯示,
為此,我們不得不在每個頁面做判斷.這樣很麻煩
于是,如果我們再繼續使用之前的frame做判斷,我們會發現變得很麻煩,需要判斷屏幕的大小,需要減去固定的大小,需要....
無論是絕對的frame還是相對的frame計算,我們都會發現,整個項目寫下去,基本上的時間都在布局界面上面了
那么選用xib或者storyboard來說,手動拉動約束,相對來說會好點,因為依據約束我們會比較容易布局
但是因為一個iOS11,多出來一個safeArea的概念
對于此,大家可以看看bugly的博客
iOS 11 安全區域適配總結

對比文檔 我們可以看到這些


這里寫圖片描述

那么再用手動拉約束的話,你會發現同一個約束你甚至不知道如何添加.

所以還是推薦手動寫約束,當然我不會推薦NSLayoutConstraint 那么復雜的書寫模式

相對于OC的Msonary,Swift也有一個比較實用的第三方,Snapkit,這里我推薦實用的原因很簡單,1.簡化手寫約束的代碼,2.方式類似OC的Msonary,方便大家轉移,3.可以很容易的適配不同版本的約束,
基礎一點的,我們可以使用普通的約束

contentView.addSubview(iconView)
        iconView.snp.makeConstraints{
            $0.left.right.top.equalToSuperview()
            $0.height.equalTo(contentView.snp.width).multipliedBy(0.75)
        }
        
        contentView.addSubview(titleLabel)
        titleLabel.snp.makeConstraints{
            $0.left.bottom.right.equalToSuperview()
            $0.top.equalTo(iconView.snp.bottom)
        }

如果要適配安全區域

view.addSubview(collectionView)
        collectionView.snp.makeConstraints {
            if #available(iOS 11.0, *) {
                $0.edges.equalTo(self.view)
            } else {
                $0.edges.equalTo(self.view.safeAreaLayoutGuide)
            }
        }

當然我們也可以吧真個判斷抽取出來,以后所有的適配都直接一句話就完成

//MARK: SnapKit
extension ConstraintView {
    
    var usnp: ConstraintBasicAttributesDSL {
        if #available(iOS 11.0, *) {
            return self.safeAreaLayoutGuide.snp
        } else {
            return self.snp
        }
    }
}

那么我們在使用適配安全區域的時候

view.addSubview(collectionView)
        collectionView.snp.makeConstraints{ $0.edges.equalTo(self.view.usnp.edges) }

很輕松的就完成了,
效果很輕松的,大致如下


這里寫圖片描述

我們可以輕松自動適配好頭部和底部的特殊區域

當然我們需要在baseViewController中寫入這樣的

 if #available(iOS 11.0, *) {
            UIScrollView.appearance().contentInsetAdjustmentBehavior = .never
        } else {
            automaticallyAdjustsScrollViewInsets = false
        }

以此來保證約束由我們開發者來控制,而不是系統自動控制,


這里寫圖片描述

這里寫圖片描述

我們可能在模擬器中看不到明顯的情況,但是我們如果手上有真機 比如X的真機,你會發現這樣適配的合理性,因為頭部的齊劉海的問題,很多東西無法顯示(此區域無法完全顯示所有信息,需要單獨處理則會很麻煩)
因為底部的橫線的問題(類似于傳統的home鍵,此區域不適合做其他任何操作,否則用戶會不習慣)

最明顯的效果就是閱讀界面,一個需要全屏,一個則一定不能全屏,


這里寫圖片描述

而對于此處,
如果使用frame,你會發現很麻煩,因為需要判斷手機型號,另外還需要判斷是否減去某一固定高度,是否要居中.....
而使用了手動約束的話,則仍然很輕松
Snapkit僅僅需要這樣即可

edgesForExtendedLayout = .all

view.addSubview(collectionView)
        collectionView.snp.makeConstraints { $0.edges.equalTo(self.view.usnp.edges) }

第一句話是擴展全屏,保證不收頂部和底部的影響,
第二句話是是展示界面呈現在安全區域(如果有)內

所以,不僅僅是有妖氣漫畫,其余的項目我也會推薦Snapkit,
他會為你的界面布局節省很多時間,讓你更加關注到邏輯和其他的開發中去

完整的項目源碼:https://github.com/spicyShrimp/U17

歡迎訪問交流

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,813評論 25 708
  • 目錄 0、前言 一、Auto Layout前世今生 二、Auto Layout基礎知識 1.Auto Layout...
    浮游lb閱讀 24,835評論 3 89
  • 心里念著一個人,也被一個人念著,有個人關心,也被一個人關心,休息時,一起吃吃喝喝耍耍,苦悶時有個人聽,高興時有個人...
    悟一W閱讀 280評論 0 0
  • 立秋者,七月節也,《后漢書·祭祀志》:“立秋之日,迎秋于西郊,祭白帝蓐收,車旗服飾皆白,歌《西皓》、八佾舞...
    駱黍離閱讀 598評論 0 1