从头开始swift2.1 仿搜材通项目（六） 人脉及个人中心的实

今天我们来做人脉及个人中心两个界面，都非常简单，APP上截图如下：

QQ20151222-1@2x.png
QQ20151222-2@2x.png
这里我们分别用UITableView和普通的布局方式来实现。
首先是人脉的搜索框，和首页的一模一样。打开Connection.storyboard,在其中添加下面控件布局。（这里可以看到我们的StoryBroad文件都是分开的单一文件，如果是团队开发的话是多人协作是不会有任何影响的。）
QQ20151222-3@2x.png
间距14，继续添加两个等宽的View，并放入下列控件：
QQ20151222-4@2x.png QQ20151222-5@2x.png

下面这个效果如果用TabViewCell来做的话应该要简单一些，不过现在我们暂时先用普通的布局来实现，个人中心的地方再学习TabViewCell。

QQ20151222-6@2x.png
拖入一个灰色View，再放3个白色view,上下间距留0.5，这样就看出有分割线了，不要再拖一个Label什么的多一个控件了，我们尽量简化，能躺着就别站着。
QQ20151222-7@2x.png
三个View分别放控件，这个很简单：
QQ20151222-8@2x.png
接下来还有最后一个更多人脉，其实方式和上面一样的啦，布局好后我们运行看看效果：
QQ20151222-9@2x.png
看上去还是有模有样的，如果你想给它们加上点击事件，只需要修改成为HMTouchView就行了，后面新来的朋友请看从头开始swift2.1 仿搜材通项目（五） 通用的点击效果。
现在我们去使用UITableView完成个人中心的界面搭建。
QQ20151222-10@2x.png
删除原来自带的View，拖进一个TableView，将标题修改为个人中心，Content修改为Static Cells，Sections设置为5，也就是有5个分段，5块区域，Style设置为Grouped
QQ20151222-11@2x.png
QQ20151222-12@2x.png
现在我们做第一部分，去掉Header，Rows设置为1，再修改RowHeight为135，我们就可以开始布局了。
QQ20151222-13@2x.png
QQ20151222-14@2x.png
先放入头像及两个Label，再下方加入一个高度60的View，再将其3等分。
QQ20151222-15@2x.png
QQ20151222-16@2x.png
随便填充一个颜色看看效果：
QQ20151222-17@2x.png
还是OK的，我们把颜色改回Default，放入控件：
QQ20151222-18@2x.png
下面的部分就更简单了，简单的布局再修改一个样式，简直不费吹灰之力。
QQ20151222-19@2x.png
下面的布局我们一鼓作气写完它，Rows分别是3、2、2：
QQ20151222-20@2x.png QQ20151222-21@2x.png

OK，我们来运行看看效果：

QQ20151222-22@2x.png

还不错的样子，我们连线到VC中，设置一下点击效果，并把个人中心顶部的空隙去掉：

QQ20151222-23@2x.png

class PersonalController: UITableViewController {

    @IBOutlet weak var layout_collection: HMTouchView!
    @IBOutlet weak var layout_business: HMTouchView!
    @IBOutlet weak var layout_active: HMTouchView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //即可去掉顶部间隙
        self.tableView.tableHeaderView = UIView(frame:CGRectMake(0, 0, 0, 0.5))
        
        //增加点击效果
        HMTouchView.setOnClickHandler([layout_collection,layout_business,layout_active]) { (id) -> Void in
            print(id)
        }
    }

}

同样的去人脉界面配置一下：

class ConnectionController: UIViewController {

    @IBOutlet weak var layout_new_renmai: HMTouchView!
    @IBOutlet weak var layout_instrastion: HMTouchView!
    
    @IBOutlet weak var layout_my_friend: HMTouchView!
    @IBOutlet weak var layout_my_watch: HMTouchView!
    @IBOutlet weak var layout_my_follow: HMTouchView!
    
    @IBOutlet weak var layout_more_renmai: HMTouchView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        HMTouchView.setOnClickHandler([layout_new_renmai,layout_instrastion,layout_my_friend,layout_my_watch,layout_my_follow,layout_more_renmai]) { (id) -> Void in
            print(id)
        }
    }

}

最后的GIF效果图：

Untitled.gif
OK本节就到这里。
Git地址：https://github.com/bxcx/sctong
本节分支：https://github.com/bxcx/sctong/tree/5th_StaticTable