上一篇文章從頭開始寫一款開源app上線,相互學(xué)習(xí)(二),已經(jīng)將新聞列表的布局及數(shù)據(jù)完善了,接下來介紹另一個列表(微信精選)的做法,以及新聞及精選點擊cell后所做的處理
微信精選
先看看效果圖:
這個列表相對新聞列表比較簡單, 沒有左右滾動, 也沒有分類, 所以只需要一個TableView顯示即可, 這里主要介紹cell的自動布局
分析:
1.標(biāo)題自適應(yīng)
2.來源自適應(yīng)
3.圖片根據(jù)標(biāo)題及來源的位置自適應(yīng)高度
4.整個cell自適應(yīng)高度
做法: cell自適應(yīng)高度是根據(jù)cell的contentView的上下約束進(jìn)行自動計算,所以要保證contentView的subViews約束應(yīng)從上往下, 并且不能有約束沖突; 還要設(shè)置預(yù)估行高, 讓cell的數(shù)據(jù)源先進(jìn)行返回cell,再計算行高(如果不設(shè)置預(yù)估行高,數(shù)據(jù)源方法先走的是返回行高, 再返回cell)
TableView的預(yù)估行高:
tableView.estimatedRowHeight = 100
tableView.rowHeight = UITableViewAutomaticDimension
/// cell的初始化
private func setupUI() {
/// 約束前保證控件已經(jīng)添加到父控件上
self.contentView.addSubview(iconView)
self.contentView.addSubview(titleLabel)
self.contentView.addSubview(sourceLabel)
sourceLabel.textColor = #colorLiteral(red: 0.7233663201, green: 0.7233663201, blue: 0.7233663201, alpha: 1)
sourceLabel.font = UIFont.systemFont(ofSize: 13)
titleLabel.numberOfLines = 0
titleLabel.snp.makeConstraints { (make) in
make.top.equalTo(contentView).offset(topBottomMargin)
make.left.equalTo(contentView).offset(leftRightMargin)
make.right.equalTo(iconView.snp.left).offset(-interMargin)
}
sourceLabel.snp.makeConstraints { (make) in
make.top.equalTo(titleLabel.snp.bottom).offset(interMargin)
make.left.equalTo(titleLabel.snp.left)
make.bottom.equalTo(contentView).offset(-topBottomMargin)
}
iconView.snp.makeConstraints { (make) in
make.top.equalTo(titleLabel)
make.right.equalTo(contentView).offset(-leftRightMargin)
make.width.equalTo(mainWidth/4.0)
/// 這里要注意,兩種約束方式都有問題:
/// 1.與contentView的底部進(jìn)行約束:make.bottom.equalTo(contentView).offset(-topBottomMargin)
/// 2.與sourceLabel的底部進(jìn)行約束:make.bottom.equalTo(sourceLabel)
/// 這兩種寫法的本質(zhì)是一樣的,導(dǎo)致的問題: contentView的底部與imageview有約束,當(dāng)圖片加載后,圖片本身也有高度,就會導(dǎo)致cell的高度變高, 與預(yù)期不符
/// 正確的做法: 與self進(jìn)行約束, 當(dāng)contentview的約束正確后,整個cell的高度也有自動計算出來了,那么再跟self底部約束, 也可以得到正確的布局
make.bottom.equalTo(self).offset(-topBottomMargin)
}
contentView.snp.makeConstraints { (make) in
make.top.left.right.equalTo(self)
make.bottom.equalTo(self)
}
}
Web控制器
這里介紹一個第三方,非常好用: AXWebViewController,支持像微信一樣的導(dǎo)航效果
集成方法: 1.使用cocoapods: pod 'AXWebViewController',導(dǎo)入框架
2.代碼書寫
TableView點擊cell的代理方法:
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let model = dataSource[indexPath.row]
/// 1.初始化
let webVC = AXWebViewController(address: model.url!)
/// 2.設(shè)置樣式: barItem是類似于微信, toolItem在下方增加工具條, 像瀏覽器一樣可以點擊前進(jìn),后退,刷新等操作
webVC.navigationType = .barItem
self.navigationController?.pushViewController(webVC, animated: true)
}
總結(jié)
到此為止,目前app1.0版本已經(jīng)完成了,接著就可以做上線處理了,上線的教程我就不寫了,網(wǎng)上有很多教程
雖然整個app功能簡單,但是我和大家一樣,都是iOS界的小菜,大家都可以試著找接口寫一款app上線,至少給大家的信心會提高很多
當(dāng)然, 日后我還會接著維護(hù)這個app,目前在想的有: 增加我的系統(tǒng)(登錄-注冊-分享等); 集成推送, 統(tǒng)計等功能; 增加x按鈕,用戶不喜歡的內(nèi)容可以設(shè)置為不喜歡, 下次刷新數(shù)據(jù)將此類數(shù)據(jù)屏蔽掉; 自定義下拉刷新的樣式, 把icon做成gif圖在刷新時使用.....
感謝大家閱讀我的文章, 請點擊喜歡, 并添加關(guān)注
喜歡的請star一個,TopOmnibus
項目已上線,AppStore下載:新聞巴士
