本章節主要來完善前前面已經建立好的storyboard中的頁面，包括自定義的view等。

1.PKOElementTableViewCell

該自定義view作為列表的行view，包含左側的圖片以及中間的文字描述。這裡要注意需要通過setNeedsDisplay告訴系統進行繪製。

程式碼如下。

import UIKit

class PKOElementTableViewCell: UITableViewCell {
    
    var element:PKOElementDataModel {
        get{
            return self.element
        }
        set(element){
            var cellIcon = self.contentView.viewWithTag(1) as PKOElementTableViewCellIcon//獲取列表行左側自定義的view
            cellIcon.element = element//將元素物件賦值給自定義view
            cellIcon.setNeedsDisplay()//該方法為非同步，告訴系統來給我繪圖
            
            var label = self.contentView.viewWithTag(2) as UILabel//獲取列表行文字
            label.text = element.name
            label.setNeedsDisplay()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    
    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
    }
    
}
 

2.PKOElementTableViewCellIcon

該自定義view作為列表行的左側圖片view，通過CG繪製圖片和文字並展示出來。這裡非常靈活，可以按照以下方法繪製任何資訊。

程式碼如下。

import UIKit

class PKOElementTableViewCellIcon: UIView {
    
    var element = PKOElementDataModel()
    
    override func drawRect(rect: CGRect) {
        // 繪製背景圖
        var point: CGPoint
        var image = self.element.imageForCellIconElementView as UIImage
        var elementRect = CGRectMake(0, 0, image.size.width, image.size.height)
        image.drawInRect(elementRect)
        
        // draw the element number
        var font = UIFont.boldSystemFontOfSize(11)
        point = CGPointMake(3,2)
        self.element.name.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])//swift都是通過dictionary來指定樣式的，例如字型樣式的鍵就是NSFontAttributeName
        
        // draw the element symbol
        font = UIFont.boldSystemFontOfSize(18)
        var stringSize = self.element.symbol.sizeWithAttributes([NSFontAttributeName:font]) as CGSize
        point = CGPointMake((elementRect.size.width-stringSize.width)/2, 14.0)
        self.element.symbol.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])
    }
}
 

3.PKOElementDetailImageView

該自定義view作為明細頁面的正面view，通過CG繪製繪製圖片、文字以及陰影並展示出來。這裡暫時不新增陰影效果，只作為普通view，陰影部分後面章節再詳細講解。

程式碼如下。

import UIKit

class PKOElementDetailImageView: UIView {
    
    var detailController:PKOElementDetailViewController?
    var element = PKOElementDataModel()
    
    //這裡沒有弄明白，我重寫了init(frame: CGRect)，會提示需要重寫init()，init(coder aDecoder: NSCoder)，不然會報錯
    override init() {
        super.init();
    }
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    //通過frame初始化
    override init(frame: CGRect) {
        super.init(frame: frame)
        var tapGestureRecognizer = UITapGestureRecognizer(target: self, action: "tapAction:")//新增點選（屬於手勢識別）事件
        self.addGestureRecognizer(tapGestureRecognizer)//將該點選事件新增到view的手勢識別中
    }
    
    //點選事件，點選時執行控制器中的flipImageView方法，功能是view翻轉
    func tapAction(tapGestureRecognizer: UITapGestureRecognizer){
        self.detailController.flipImageView()
    }
    
    override func drawRect(rect: CGRect)
    {
        // 繪製背景圖
        var image = self.element.imageForDetailElementTileView as UIImage
        var imageRect = CGRectMake(0, 0, image.size.width, image.size.height)
        image.drawInRect(imageRect)
        
        // draw the element name
        var font = UIFont.boldSystemFontOfSize(36)
        var stringSize = self.element.name.sizeWithAttributes([NSFontAttributeName:font]) as CGSize!
        var point = CGPointMake((self.bounds.size.width-stringSize.width)/2, self.bounds.size.height/2-50)
        self.element.name.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])
        
        
        // draw the element number
        font = UIFont.boldSystemFontOfSize(48)
        point = CGPointMake(10, 10)
        self.element.atomicNumber.description.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])
        
        // draw the element symbol
        font = UIFont.boldSystemFontOfSize(96)
        stringSize = self.element.symbol.sizeWithAttributes([NSFontAttributeName:font]) as CGSize!
        point = CGPointMake((self.bounds.size.width-stringSize.width)/2, self.bounds.size.height-120)
        self.element.symbol.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])
    }
}
 

4.PKOElementDetailImageFlippedView

該自定義view繼承於PKOElementDetailImageView，作為它的反面，做法與PKOElementDetailImageView相似，不過屬性及公共屬性延用PKOElementDetailImageView，重寫drawRect即可。

其中使用了超連結，能夠直接連結到維基百科的對應化學元素頁面上，在初始化view時新增一個連結button即可。

程式碼如下。

import UIKit

class PKOElementDetailImageFlippedView: PKOElementDetailImageView {
    
    var wikipediaButton: UIButton?
    
    override init() {
        super.init()
    }
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        //子view隨著父view(self)的frame大小而自動改變大小
        self.autoresizesSubviews = true
        self.setUpUserInterface()
    }
    
    override func drawRect(rect: CGRect)
    {
        // 繪製背景
        var image = self.element.imageForDetailElementTileView as UIImage
        var imageRect = CGRectMake(0, 0, image.size.width, image.size.height)
        image.drawInRect(imageRect)
        
        // draw the element number
        var font = UIFont.boldSystemFontOfSize(32)
        var point = CGPointMake(10, 10)
        self.element.atomicNumber.description.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])
        
        // draw the element symbol
        font = UIFont.boldSystemFontOfSize(32)
        var stringSize = self.element.name.sizeWithAttributes([NSFontAttributeName:font]) as CGSize
        point = CGPointMake(self.bounds.size.width - stringSize.width - 10, 10)
        self.element.symbol.drawAtPoint(point,withAttributes:[NSFontAttributeName:font])
        
        // draw the element name
        font = UIFont.boldSystemFontOfSize(32)
        point = CGPointMake((self.bounds.size.width - stringSize.width)/2, 80)
        self.element.name.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])
        
        // draw the element weight
        font = UIFont.boldSystemFontOfSize(28)
        point = CGPointMake((self.bounds.size.width - stringSize.width)/2, 160)
        self.element.atomicWeight.drawAtPoint(point, withAttributes: [NSFontAttributeName:font])
        
        
    }
    
    func setUpUserInterface() {
        var buttonFrame = CGRectMake(10.0, 209.0, 234.0, 37.0)
        // 建立一個連結
        self.wikipediaButton = UIButton.buttonWithType(UIButtonType.System) as? UIButton//按鈕樣式為系統預設，4個圓角
        self.wikipediaButton?.frame = buttonFrame
        var font = UIFont.boldSystemFontOfSize(22)
        self.wikipediaButton?.titleLabel?.font = font
        self.wikipediaButton?.setTitle("View at Wikipedia", forState: UIControlState.Normal)//任何狀態按鈕都是高亮
        
        // 按鈕在view中的對其方式，水平垂直均居中
        self.wikipediaButton?.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Center
        self.wikipediaButton?.contentVerticalAlignment = UIControlContentVerticalAlignment.Center
        
        //新增點選事件，點選手指離開時還在按鈕內觸發
        self.wikipediaButton?.addTarget(self, action: "jumpToWikipedia:", forControlEvents: UIControlEvents.TouchUpInside)
        self.addSubview(self.wikipediaButton!)
    }
    
    func jumpToWikipedia(sender: AnyObject!){
        var wikiPageString = "http://en.wikipedia.org/wiki/"+self.element.name
        if (!UIApplication.sharedApplication().openURL(NSURL.URLWithString(wikiPageString)))
        {
            // 如果訪問連結錯誤的處理程式碼
        }
    }
}