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