模仿美團App
本項目是用Swift開發(fā)弯汰,StoryBoard 和 Xib 快速布局的。
這篇文是記錄文湖雹,項目完成之后咏闪,再整理用到的知識,發(fā)一篇有條理的文
使用Xib開發(fā)的教程鏈接:xib使用教程
商業(yè)頁面
這一頁就是UITableView加上頭頂有一個view組成摔吏。
添加下拉刷新教程
首頁
主要部分也是UITableView鸽嫂,最后加上UITableView 的Footer View
值得注意的 當(dāng)UITableView是Group Style,設(shè)置section header高度時征讲,第一個section 的 header 高度設(shè)置為0 是不會令 header 隱藏的据某。需要設(shè)置為0.1,令其為一條線诗箍。若果想完全隱藏 header 可以試試下一個方法癣籽。
stackover flow 關(guān)于隱藏 section的回答
設(shè)置UITableView 為 Plain Style ,隱藏第一個section 的 header 可以用以下代碼:
let dummyViewH:CGFloat = 40
let vFrame = CGRectMake(0, 0, self.tableView.bounds.width, dummyViewH)
let dummyV = UIView(frame: vFrame)
self.tableView.tableHeaderView = dummyV
self.tableView.contentInset = UIEdgeInsets(top: dummyViewH , left: 0, bottom: 0, right: 0)
至于navgationBar的設(shè)置可以看這里:自定義navigationBar
還有就是UISearchBar的Border的問題
添加以下代碼就可以了。
searchBar.backgroundImage = UIImage()
我的頁面 和 更多頁面
原理還是用UITableView筷狼。
團購詳情頁里的懸浮頭頂
詳情頁也是UITableView橱夭,做一個跟要懸浮的headerView相同大小的Cell。然后以下代碼:
//用headerView覆蓋那個空白Cell
func createStickyHeaderView(){
headerView = NSBundle.mainBundle().loadNibNamed("HeaderView", owner: self, options: nil)[0] as! HeaderView
headerY = tableViewHeight / 3
headerView.frame.origin.y = headerY
headerView.frame.size.height = tableViewHeight / 9
headerView.frame.size.width = 600
tableView.addSubview(headerView)
}
//監(jiān)控高度
func scrollViewDidScroll(scrollView: UIScrollView) {
headerView.frame.origin.y = max(headerY, scrollView.contentOffset.y)
}
最后
待做的:
- 地圖上顯示商家
- 其它的美團界面桑逝。
- 頁面的細節(jié)和動畫
- 美團的數(shù)據(jù)連接
如果有興趣一起完成這個項目,或者一起學(xué)習(xí)成長的可以聯(lián)系我俏让±愣簦或者Pull Request。謝謝啦:)
源碼 GitHub 地址:https://github.com/PoBlue/meiTuan-B612