从头开始swift2.1 仿搜材通项目（四） 首页的实现

本节我们来实现一个常见的APP首页效果，包含顶部广告无限滚动，功能模块引导等等，如图所示：

QQ20151219-1@2x.png
因为要展示图片，我们先添加一个比较知名的图片加载第三方:Kingfisher，和一个朋友写的广告轮播：Reindeer，这个轮播库比较好的一点就是，可以自由的定制图片的加载方法，你可以选择任意的图片加载第三方甚至你可以使用自己写的加载方法：

banner.setRemoteImageFetche({ (imageView, url, placeHolderImage) -> Void in
    //这里为图片加载的代码
    imageView.kf_setImageWithURL(NSURL(string: url)!, placeholderImage: placeHolderImage)
})

这里我们到Podfile中添加刚刚说到的这两个工具：

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'BaiduMapKit' #百度地图SDK https://github.com/BaiduLBS/BaiduMapKit
pod 'Kingfisher' #图片加载 https://github.com/onevcat/Kingfisher
pod 'Reindeer' #图片轮播 https://github.com/Evilcome/Reindeer

然后cd到当前目录，pod update，这些命令不熟悉的请看我之前的文章，这里不再废话了。

ok，准备工作做好了，我们去Home.StoryBoard中拖拖控件为首页布局吧。首页放置一个ScrollView，因为有的屏幕大有的屏幕小很有可能一屏显示不完，这里我们就需要上下滑动的ScrollView了。
放入ScrollView，并添加约束，填充整个屏幕。

QQ20151219-2@2x.png
我们暂时把界面尺寸调整为600x900，没有实际上的作用，只是在布局时方便一些：
QQ20151219-3@2x.png
再添加一个View放到ScrollView中，设置垂直水平居中，并也填充整个父级。
QQ20151219-4@2x.png
QQ20151219-5@2x.png
为这个View设置一个背景色，
QQ20151219-6@2x.png
再放置一个View,也就是我们要用来放置广告位的轮播View了，高度就用默认的128吧。
QQ20151219-7@2x.png
这里我们需要创建ViewController去写代码了。
QQ20151219-8@2x.png
将SB和VC关联起来
QQ20151219-9@2x.png
再将高度为128的View连线到VC中，命名为scrollLayout。
QQ20151219-10@2x.png
先import Reindeer，再创建一个initBanner的方法：

    ///广告位
    func initBanner(){

        let anotherBanner = BannerPageViewController()
        scrollLayout.addSubview(anotherBanner.view)

        anotherBanner.interval = 3 //3秒自动切换下一张
        anotherBanner.placeholderImage = UIImage(named: "placeholder") //加载完成前显示的图片
        anotherBanner.setRemoteImageFetche({ (imageView, url, placeHolderImage) -> Void in
            //设置任意图片加载方式
            imageView.kf_setImageWithURL(NSURL(string: url)!, placeholderImage: placeHolderImage)
        })
        anotherBanner.setBannerTapHandler({ (index) -> Void in
            //点击了某一张图片
            print(index)
        })
        
        anotherBanner.images = [
            "http://pic9.nipic.com/20100817/4845745_124224113296_2.jpg",
            "http://pic26.nipic.com/20121223/11613623_164837493315_2.jpg",
            "http://pic2.ooopic.com/10/79/67/75b1OOOPIC15.jpg"
        ]
        
        anotherBanner.startRolling()
    }

不要忘记在viewDidLoad中调用一下这个方法。现在我们运行看一下。

QQ20151220-1@2x.png

发现布局非常的乱，上面红色部分其实是ScrollView的颜色，怎么会这样呢，其实细心的同学可能一眼就看出，红色部分和顶部Nav的高度几乎是一致的，我们在vidDidLoad中加上这段代码，并再次运行：

        self.automaticallyAdjustsScrollViewInsets = false
        self.extendedLayoutIncludesOpaqueBars = false
        self.edgesForExtendedLayout = UIRectEdge.None

QQ20151220-2@2x.png
OK可以看到我们的layout已经对齐顶部了，现在我们需要对创建的anotherBanner控件添加约束，让它与scrollLayout大小一致，这里给大家推荐一款工具SnapKit,开发Swift必备工具之一哦。一样的我们去pod里添加，并update
pod 'SnapKit' #自动布局 https://github.com/SnapKit/SnapKit
然后我们回到initBanner方法，对initBanner添加约束：

        import SnapKit
        //...
        anotherBanner.view.snp_makeConstraints { (make) -> Void in
            make.edges.equalTo(self.scrollLayout)
        }

QQ20151220-3@2x.png
OK很完美的显示出来了。现在我们添加搜索框。距离顶部14，高度为60.设置为深一点的灰色。
QQ20151220-4@2x.png
再往里面放一个View，注意截图的层级关系。左右填满，上下0.5间距，背景就用白色。
QQ20151220-5@2x.png
为什么要这样做呢？我们更新一下frames，发现有没有两条明显的分割线了呢？以前很多朋友可能是直接放一个白色的View，再拖两条灰色的Label进去，这样也可以达到效果，但我想，能用两个控件就完成的事情，就不要再多一个了，后面这样的例子还有很多，慢慢的你会发现它的好处的。
QQ20151220-6@2x.png
再向白色View中放入一个TextField，和一个Button，将Button的文字删除，并设置一张图片，宽高都设置为44，距右30，垂直居中：
QQ20151220-7@2x.png
同样，TextField也设置为距左30，距右5，垂直居中，然后更新一下frames：
QQ20151220-8@2x.png
为TextField设置hint：搜索信息价/市场价/供应/求购/商圈
现在搜索框做完了，我们来运行一下：
QQ20151220-9@2x.png
效果还是不错的，只是这家广告公司请大家无视，我随便从网上抓的图。
现在我们来做下面的4个格子布局。新加一个View，一样的距顶14，深灰，高为180，再放一个白色View，上下0.5.
QQ20151220-10@2x.png
放两个View,十字架，一个垂直一个水平，把白色View分成4份
QQ20151220-11@2x.png
现在我们可以在4个格子里放入4个View，填充满各自的格子。方便大家观察，我先是填充了4种颜色，不过后面我们都要把颜色改回Default，不然分割线就看不到了。
QQ20151220-12@2x.png
分别向格子View里放入下面控件并布局
QQ20151220-13@2x.png
OK,4个格子我们都布局好了的话，现在运行来看看效果：
QQ20151220-14@2x.png

我们接着来完成下面的最新信息布局。一样的放入两个View，分成上下带分割线，再放中间放一个看不见的View来作为中心点，一样把布局分成4部分。

QQ20151221-1@2x.png
现在可以看到已经等分成4个部分了，往它们里面放4个View，形成下面的布局：
QQ20151221-2@2x.png
分别向4个格子里放入控件并约束，将背景色改回Default：
QQ20151221-3@2x.png
还有最后一步，底部的声明，这个比较简单，先是一样的做法，来个分割线，再放几个Label，现在应该没有任何难度了吧：
QQ20151221-4@2x.png
好的，现在我们来运行看看：
QQ20151221-5@2x.png
效果是非常不错的展示出来了，可是却发现不能上下滑动，这时我们算一算所有布局加上间距的高度，并为ScrollView的第一个子View设置：
QQ20151221-6@2x.png
添加后发现约束报错了，这时我们点击删除它的垂直居中：
QQ20151221-7@2x.png
OK再次运行，很好的显示出来了。
QQ20151221-8@2x.png
本节内容比较多，也正好碰到周末事情也比较多，我断断续续的从周五写到周一才写完，希望同学们能耐心看完。
Git地址：https://github.com/bxcx/sctong
本节分支：https://github.com/bxcx/sctong/tree/3rd_home