Swift教程_零基础学习Swift完整实例（七）_swift完整实例（构建展示层）-阿里云开发者社区

5.构建展示层

本章节主要来完善前前面已经创建好的storyboard中的页面，包括自定义的view等。

1.PKOElementTableViewCell

该自定义view作为列表的行view，包含左侧的图片以及中间的文字描述。这里要注意需要通过setNeedsDisplay告诉系统进行绘制。

代码如下。

[objc]view plain copy 
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绘制图片和文字并展示出来。这里非常灵活，可以按照以下方法绘制任何信息。

代码如下。

[objc]view plain copy 
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，阴影部分后面章节再详细讲解。

代码如下。

[objc]view plain copy 
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即可。

代码如下。

[objc]view plain copy 
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)))  
        {  
            // 如果访问链接错误的处理代码  
        }  
    }  
}  

原文地址：http://blog.csdn.net/ooppookid/article/details/40373675

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

5.构建展示层

热门文章

最新文章

相关课程

相关电子书

相关实验场景