从头开始swift2.1 仿搜材通项目（十） 趋势图、Cell的重用及View的隐藏

之前说的第九节时已经是最后一节了，但后面有朋友希望我可以把这个Demo写得更详细一些，那我后面便不定期的更新一下吧，如果有想要什么效果的实现的话，不妨给我留言，大家一起来研究研究。

今天我们来实现一下这个效果，点击Cell进入一个详情页，该详情页分为多个类型（信息价、市场价、供应、求购等），界面的内容按模块分有图片、参数配置、推荐的人、相关的材料，各个模块可能根据类型的不同有所变化，如果有一种类型我们就要写一个界面的话，那实在太麻烦，所以我们来做一个统一的详情页。

这里提一下，图上看到的多个TableView的界面，都是只用了一个ViewController类并继承自前面章节中的BaseTableViewController，核心代码如下：

class PriceListController: BaseTableViewController {

    //...

    override func viewDidLoad() {
        super.viewDidLoad()
        initWithParams(query_new_type != 7 ? "PriceCell" : "PriceCell_Inquiry", heightForRowAtIndexPath: PriceCellViewHeight)
        tableView?.separatorStyle = UITableViewCellSeparatorStyle.None
    }

    //...
    override func loadData() {
        //...
        HMRequest<PriceListModel>.go(.POST, url, cache: false, params: params, vc: self, needCallBack: true ) { (model) -> () in
                self.loadCompleted(model?.data)
            }
    }
}

继承BaseTableViewController后只需要关注这两个简单的方法就行了，会自动实现上拉加载下拉刷新相关的动作和逻辑。

好现在我们来分析一下详情界面。我们要做一个通用的模块，那就先把所有通用的功能都加上，刚才说到了，这个界面完整的分为顶部功能按钮（收藏、分享、点赞）、参数配置、价格趋势图、推荐供应商和相关材料：




根据类型的不同，我们动态显示隐藏对应的View即可，扩展UIView实现类似android中View的Gone方法：

    func gone(byHeight: Bool = true, _ byWidth: Bool = true) -> (width: CGFloat, height: CGFloat){
        let _width = self.bounds.width
        let _hight = self.bounds.height

        for child in subviews {
            child.removeFromSuperview()
        }

        if byHeight {
            updateConstraints(.Height, 0)
        }
        if byWidth {
            updateConstraints(.Width, 0)
        }

        return (_width, _hight)
    }

    func updateConstraints(attribute: NSLayoutAttribute, _ constant: CGFloat){
        for constraint: NSLayoutConstraint in constraints {
            if constraint.firstAttribute == attribute {
                constraint.constant = constant
                break
            }
        }
    }

例如，我们需要隐藏趋势图的布局：

    layout_chart.gone()

这样就可以达到不仅View不可见，并且不占空间了，下面的View也会紧跟上来。这里我先介绍一下在不依赖第三方，并且项目改动最小的方法，其实有一些第三方库可以支持的，后面有机会我再来详细介绍。

然后是趋势图，这个功能如果自己写呢就复杂了，所以我在Github上找了一个库，PNChartSwift，它集成和使用的方法都非常简单：

  pod 'PNChartSwift',:git => 'https://github.com/kevinzhow/PNChart-Swift.git'

  //使用
  let lineChart = PNLineChart.create(view_chart, xLabels: xLabels, dataArray: dataArray)
  lineChart.delegate = self

  view_chart.addSubview(lineChart)

extension PNLineChart {

    static func create(parent:UIView!, xLabels:[String], dataArray:[CGFloat]) -> PNLineChart{

        let lineChart:PNLineChart = PNLineChart(frame: CGRectMake(0, 8, UIScreen.mainScreen().bounds.width, parent.bounds.height - 8))
        lineChart.yLabelFormat = "%1.0f"
        lineChart.showLabel = true
        lineChart.backgroundColor = UIColor.clearColor()
        lineChart.xLabels = xLabels
        lineChart.showCoordinateAxis = true

        let data01:PNLineChartData = PNLineChartData()
        data01.color = PNGreyColor
        data01.itemCount = dataArray.count
        data01.inflexionPointStyle = PNLineChartData.PNLineChartPointStyle.PNLineChartPointStyleCycle
        data01.getData = ({(index: Int) -> PNLineChartDataItem in
            let yValue:CGFloat = dataArray[index]
            let item = PNLineChartDataItem(y: yValue)
            return item
        })

        lineChart.chartData = [data01]
        lineChart.strokeChart()

        return lineChart
    }

}

这样运行起来在界面上就会看到一个趋势图展示出来了：

最后一个要点是如何重用UITableViewCell到一个普通的View中，如下图：

当然这里也可以直接放两个UITableView进来，但如果接口返回的数据中只有1～2个Model的话，用UITableView不仅代码复杂，性能也会有所影响，如果用普通的View来填充呢，我们能不能重用外面Cell中的布局呢？答案是可以的，我们修改在Cell中只放一个空白的ContentView就行，然后到Cell编码中修改：

let PriceCellViewHeight:CGFloat = 70
class PriceCell: BaseTableViewCell {

    override func setContent(tag:Any?, tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, dataList:[HMObject] ){

        let view:PriceCellView = PriceCellView.create(self.contentView)
        let query = anyTag as! Query
        view.setContent(query, tableView: tableView, cellForRowAtIndexPath: indexPath, dataList: dataList)
        self.contentView.addSubview(view)
    }

}

PriceCellView的xib：

    class func create(parentView: UIView) -> PriceCellView {
        let view = NSBundle.mainBundle().loadNibNamed("PriceCellView", owner: nil, options: nil).first as! PriceCellView
        view.frame = CGRect(x: 0, y: 0, width: parentView.bounds.width, height: PriceCellViewHeight)
        return view
    }

    func setContent(query: Query, data: PriceModel){
        //...
    }

这样，不仅在TableView列表界面中可以使用这个布局，在普通的View中一样也可以了：

        for i in 0 ... data!.recommendMaterial!.count - 1 {
            let obj = data!.recommendMaterial![i]
            let item: PriceCellView =  PriceCellView.create(view_recommend_person)
            item.frame = CGRect(x: 0, y: CGFloat(i) * PriceCellViewHeight, width: UIScreen.mainScreen().bounds.width, height: PriceCellViewHeight)
            item.setBgColor(i)
            item.setContent(args_query, data: obj)

            view_same_material.addSubview(item)
        }

OK，这3个知识点就学到这里，下一节我们看看如何使用BaseTableViewController达到自适应Cell实现类似朋友圈的效果（其实代码几乎和固定cell高度的完全一样），如果有同学需要的话，别吝啬啦。

附效果图