swift实作app 交流分享八（self sizing cells)

一行代码一场梦，大家好我是阿达，今天要跟大家分享的是 iOS8 的一个非常酷炫的新功能『Self sizing Cells』，对于这个 SDK 来说，这真的是一个非常令人兴奋的功能。不过坦白说，这个部分是阿达当初接触 iOS8 开发学习的时候最大的难关，因为这个部分之前都没有，找不到可以参考的东西，而且做起来步骤又有点复杂，到后来整个专案删掉重新再做，有的时候一个晚上就为了调整一个cell ， 今天终于完成了出来给小伙伴们，首先为小伙伴们介绍一下今天的方法整理

• 在 Cell  加入Auto layout 的约束条件
• 指定表格视图的 estimatedRowHeight
• 设定表格视图的 rowHeight 为 UITableVIewAutomaticDimension

总结起来大概就是两行程式：

tableView.estimatedRowHeight = 36.0

tableView.rowHeight = UITableVIewAutomaticDimension

只要這兩行，就可以讓你的 App 裡面的tableViewCell 就可以自動適應所有螢幕大小的比例尺寸，就是這樣精簡大量的程式碼與時間，我相信小夥伴們一定會愛上她的。

當然啦！要學習一個新功能最快的方法就是直接使用它。我們將繼續開發  Food Pin  並且將 Cell  轉換成 self Sizing Cells。

我们可以看到，目前为止我们的cell 里面都只是很短的资料，如果资料长度超过既定长度呢？

我们来实验看看，在这边阿达先把新的阵列给小伙伴们准备好，

 var restaurants:[Restaurant] = [

        Restaurant(name: "Cafe Deadend", type: "Coffee & Tea Shop", location: "G/F, 72 Po Hing Fong, Sheung Wan, Hong Kong", image: "cafedeadend.jpg", isVisited: true),

        Restaurant(name: "Homei", type: "Cafe", location: "Shop B, G/F, 22-24A Tai Ping San Street SOHO, Sheung Wan, Hong Kong", image: "homei.jpg", isVisited: false),

        Restaurant(name: "Teakha", type: "Tea House", location: "Shop B, 18 Tai Ping Shan Road SOHO, Sheung Wan, Hong Kong", image: "teakha.jpg", isVisited: false),

        Restaurant(name: "Cafe loisl", type: "Austrian / Causual Drink", location: "Shop B, 20 Tai Ping Shan Road SOHO, Sheung Wan, Hong Kong", image: "cafeloisl.jpg", isVisited: false),

        Restaurant(name: "Petite Oyster", type: "French", location: "24 Tai Ping Shan Road SOHO, Sheung Wan, Hong Kong", image: "petiteoyster.jpg", isVisited: false),

        Restaurant(name: "For Kee Restaurant", type: "Bakery", location: "Shop J-K., 200 Hollywood Road, SOHO, Sheung Wan, Hong Kong", image: "forkeerestaurant.jpg", isVisited: false),

        Restaurant(name: "Po's Atelier", type: "Bakery", location: "G/F, 62 Po Hing Fong, Sheung Wan, Hong Kong", image: "posatelier.jpg", isVisited: false),

        Restaurant(name: "Bourke Street Backery", type: "Chocolate", location: "633 Bourke St Sydney New South Wales 2010 Surry Hills", image: "bourkestreetbakery.jpg", isVisited: false),

        Restaurant(name: "Haigh's Chocolate", type: "Cafe", location: "412-414 George St Sydney New South Wales", image: "haighschocolate.jpg", isVisited: false),

        Restaurant(name: "Palomino Espresso", type: "American / Seafood", location: "Shop 1 61 York St Sydney New South Wales", image: "palominoespresso.jpg", isVisited: false),

        Restaurant(name: "Upstate", type: "American", location: "95 1st Ave New York, NY 10003", image: "upstate.jpg", isVisited: false),

        Restaurant(name: "Traif", type: "American", location: "229 S 4th St Brooklyn, NY 11211", image: "traif.jpg", isVisited: false),

        Restaurant(name: "Graham Avenue Meats", type: "Breakfast & Brunch", location: "445 Graham Ave Brooklyn, NY 11211", image: "grahamavenuemeats.jpg", isVisited: false),

        Restaurant(name: "Waffle & Wolf", type: "Coffee & Tea", location: "413 Graham Ave Brooklyn, NY 11211", image: "wafflewolf.jpg", isVisited: false),

        Restaurant(name: "Five Leaves", type: "Coffee & Tea", location: "18 Bedford Ave Brooklyn, NY 11222", image: "fiveleaves.jpg", isVisited: false),

        Restaurant(name: "Cafe Lore", type: "Latin American", location: "Sunset Park 4601 4th Ave Brooklyn, NY 11220", image: "cafelore.jpg", isVisited: false),

        Restaurant(name: "Confessional", type: "Spanish", location: "308 E 6th St New York, NY 10003", image: "confessional.jpg", isVisited: false),

        Restaurant(name: "Barrafina", type: "Spanish", location: "54 Frith Street London W1D 4SL United Kingdom", image: "barrafina.jpg", isVisited: false),

        Restaurant(name: "Donostia", type: "Spanish", location: "10 Seymour Place London W1H 7ND United Kingdom", image: "donostia.jpg", isVisited: false),

        Restaurant(name: "Royal Oak", type: "British", location: "2 Regency Street London SW1P 4BZ United Kingdom", image: "royaloak.jpg", isVisited: false),

        Restaurant(name: "Thai Cafe", type: "Thai", location: "22 Charlwood Street London SW1V 2DY Pimlico", image: "thaicafe.jpg", isVisited: false)

    ]

把这个阵列，替代原本在 RestuarantTableViewController.swift 里面的 restaurant 阵列：

接下来我们按下 command + R 来看看结果怎么样？

我们仔细看看地址那一列，会发现资料超出去的部分，变成了...

都被截掉了，所以接下来，我们会修改让 cell 能自动依照内容来调整高度。

首先我们打开 Storyboard  并且选取 Detail View Controller  ，阿达在这里整理等一下要加入布局的约束条件：

• Field 与 Value 标签要垂直致中
• Field 标签要设定为从 cell 左侧边缘过来 9 点
• Value 标签则设定从 cell 左边过来 87 点 ，从右边算过来 10 点

先选取 Field 标签， 并选取 Auto Layout 选单的 Pin 图示。点击左边，上面及下面的虚线，小伙伴们会看到这些线变成红色实现。接下来点击『Add 3 contranints』按钮来执行这些兼具约束条件。

在介面建构气的文件大纲中，小伙伴应该会看到黄色的箭头。点击他，并继续下一个画面，在点击一次黄色的箭头，选取  『Update Frame』之后点击『Fix Misplacement 』来修复布局问题。

接下来，选取Value 标签。再一次选取 Auto Layout 选单的 Pin 图示。点击上方、下面以及右边虚线。设定右边兼具约束条件为10点。然后点击 『Add 3  constraints 』按钮。 这个动作会让标签自动调整尺寸垂直置中。

要为 cell 左边加上一个间距月树条件，先按住  control 键不放，从Value 标签拖曳到 cell 内容视图器。

并且选择『Button Space to Controller Margin』选项。

到目前为止，Auto Layout 后，再来就是在 DetailViewController.swift 的 viewDidLoad 方法加入下面的程式：

        //第一行設定 cell 估算的列高。

        //第二行是將 rowHeight 屬性該為 UITableViewAutomaticDimension

        

        tableview.estimatedRowHeight = 36.0

        tableview.rowHeight = UITableViewAutomaticDimension

如果我们在这个时候按下了 command + R  会发现cell 没有调整尺寸!

因为此时我们的Value 标签行数设定为 1 。也就是说我们现在叫他只显示一行，所以我们要把这个数字改成 0 。

千万别怀疑，接下来就是快乐的 command +  R  时间了！

我们会看到 App 的 cell 会自动提整尺寸了！

接下来我们还有主画面，我想这个部分可以留给小伙伴们挑战一下，方法是一模一样的小伙伴们可以试试看要怎么把左边的图变成右边的图。

关于这篇阿达思索了很久，感觉这个部分其实可以跳过，不需要特别出来提一篇，但是我想说有越来越多的小伙伴跟着阿达一起做，这个部分我想黑马的老师们也会跟大家提起，但是阿达在第一次接触这一块的时候真的是摸不清头脑，所以我最后决定在这里提出来，让小伙伴们先留下印象，之后老师在课堂上讲到的时候一定会很快的跟上，当然如果可以因为这一篇就学会如何操作self sizing cells 的话 。当然也是最好，所以最后也留下了一道题目，让小伙伴们可以练习看看。加油吧！ 打开 Xcode 让我们用一行一行的代码，一步一步的实现我们的梦想，我是阿达，我们下回见！