一行代码一场梦,大家好我是阿达!今天为各位小伙伴分享的是关于表格(TableVeiw)的细节外观修改,好让小伙伴们的 App 看起来更加美观。虽然现在我们的表格图已经很漂亮了,但是还有可以改善几个地方让他看起来更好看:改变表格图的背景颜色移除多余的分隔线改变分隔线的颜色为了进行以上的调整,所以我们要在 DetailViewController 类别上加上一个 Outlet 变数。因此我们才可以利用他跟 Storyboard 的表格物件建立连结。
@IBOutlet weak var tableview: UITableView!
好了,现在我们要改变表格视图的背景颜色,我们使用 backgroundColor 属性来设定新的 UIColor 物件。将以下程序放进 viewDidLoad当中:
//改變表格顏色
self.tableview.backgroundColor = UIColor(red: 240.0 / 255.0, green: 240.0 / 255.0, blue: 240.0 / 255.0, alpha: 0.2)
这将会改变表格背景为灰色,如果这个时候小伙伴们开心的按下 commmand + R 的话,那就会发现表格背景颜色有改变了
我们会发现背景颜色真的变了,可表格内容Cell 里面却还是白色的,所以我们必须要在 table(_:cellForrowAtIndexpath:) 方法中加入以下的程式:
//將有內容的 cell 改變顏色
cell.backgroundColor = UIColor.clearColor()
这行代码会让表格Cell 变得透明,这样子就可以显示出背景的颜色啦!
不信吗?command +R 让我们看下去
好啦!接下來我們來準備第二部分,『移除多餘的分隔線』。這可以經由設定表格視圖住腳( footer) 為空白來表達。 接下來我們加入以下的程式到 ViewDidLoad 方式中:
//移除多餘的分隔線
self.tableview.tableFooterView = UIView(frame: CGRectZero)
没错! 你猜对了! 我们又要按下 command + R 来测试一下程式运行的结果。
我们会发现下面,多余的分隔线不见了。
最後,我們要變更分隔線的顏色。同樣的,一行程式就可以搞定!把這行程式加入viewDidLoad 方法中:
//改變分隔線的顏色
self.tableview.separatorColor = UIColor(red: 240.0 / 255.0, green: 240.0 / 255.0, blue: 240.0 / 255.0, alpha: 0.8)
當然,command + R 的結果就是會發現,背景與分隔線的顏色改變了
今天的分享就到这里告一个段落,有小伙伴会说,什么!才五行程式也敢写一篇!我必须说,是的,因为这五行程式让阿达少等待了两个星期,将来小伙伴们想要将作品上架的话,就要接受那苹果公司无止尽的吹毛求丝。
所以这个颜色还有字体是否适合阅读?也有可能被退件,这一退件就是要再等两个星期,今天这篇,阿达着重在讲流程少了说明,希望可以让小伙伴们更能接受,并且照着做做看,让我们用一行一行的代码,一步一步的实现我们的梦想,我是阿达,我们下回见。