美团App(仿) - iOS开发

模仿美团App

本项目是用Swift开发，StoryBoard 和 Xib 快速布局的。
这篇文是记录文，项目完成之后，再整理用到的知识，发一篇有条理的文

使用Xib开发的教程链接：xib使用教程

商业页面

---

meituanBussiness.gif

这一页就是UITableView加上头顶有一个view组成。
添加下拉刷新教程

首页

---

meituanHome.gif

主要部分也是UITableView，最后加上UITableView 的Footer View

值得注意的 当UITableView是Group Style，设置section header高度时，第一个section 的 header 高度设置为0 是不会令 header 隐藏的。需要设置为0.1，令其为一条线。若果想完全隐藏 header 可以试试下一个方法。
stackover flow 关于隐藏 section的回答

设置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的设置可以看这里：自定义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)
    }

//监控高度
    func scrollViewDidScroll(scrollView: UIScrollView) {       
            headerView.frame.origin.y =  max(headerY, scrollView.contentOffset.y)
        }

最后

---

待做的：

• 地图上显示商家
• 其它的美团界面。
• 页面的细节和动画
• 美团的数据连接

如果有兴趣一起完成这个项目，或者一起学习成长的可以联系我。或者Pull Request。谢谢啦：）

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