模仿美团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。谢谢啦：)