美团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()

我的页面 和 更多页面


美团App(仿) - iOS开发_第1张图片
我的页面和更多页面

原理还是用UITableView。

团购详情页里的悬浮头顶


美团App(仿) - iOS开发_第2张图片
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

你可能感兴趣的:(美团App(仿) - iOS开发)