Swift教程_零基础学习Swift完整实例（七）_swift完整实例（构建展示层）

5.构建展示层

本章节主要来完善前前面已经创建好的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)))
        {
            // 如果访问链接错误的处理代码
        }
    }
}

点击进入ooppookid的博客