模仿美團App

本項目是用Swift開發(fā)，StoryBoard 和 Xib 快速布局的。
這篇文是記錄文，項目完成之后，再整理用到的知識，發(fā)一篇有條理的文

使用Xib開發(fā)的教程鏈接：xib使用教程

商業(yè)頁面

meituanBussiness.gif

首頁

meituanHome.gif

主要部分也是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的問題

border不透明

添加以下代碼就可以了。

searchBar.backgroundImage = UIImage()

我的頁面 和 更多頁面

我的頁面和更多頁面

原理還是用UITableView。

團購詳情頁里的懸浮頭頂

stickyHeader.gif

詳情頁也是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)
        }

最后

待做的：

• 地圖上顯示商家
• 其它的美團界面。
• 頁面的細(xì)節(jié)和動畫
• 美團的數(shù)據(jù)連接

如果有興趣一起完成這個項目，或者一起學(xué)習(xí)成長的可以聯(lián)系我?；蛘逷ull Request。謝謝啦：）

源碼 GitHub 地址：https://github.com/PoBlue/meiTuan-B612