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
歡迎訪問交流
