Swift - 使用UIView给页面添加4×4方格

2015-03-11 发布：hangge 阅读：2910

1，下面是一个利用UIView来给页面上绘制灰色方块的例子，效果图如下：

代码如下：

import UIKit

class ViewController: UIViewController {

    //游戏方格维度
    var dimension:Int = 4

    //数字格子的宽度
    var width:CGFloat = 50
    //格子与格子的间距
    var padding:CGFloat = 6
    
    //保存背景图数据
    var backgrounds:Array<UIView>!
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        self.backgrounds = Array<UIView>()
        //改成主视图背景白色背景
        self.view.backgroundColor = UIColor.whiteColor()
        setupGameMap()
    }
    
    func setupGameMap()
    {
        var x:CGFloat = 50
        var y:CGFloat = 150
        
        for i in 0..<dimension
        {
            println(i)
            y = 150
            for j in 0..<dimension
            {
                //初始化视图
                var background = UIView(frame:CGRectMake(x, y, width, width))
                background.backgroundColor = UIColor.darkGrayColor()
                self.view.addSubview(background)
                //将视图保存起来，以备后用
                backgrounds.append(background)
                y += padding + width
            }
            x += padding+width
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

2，进阶版 - 继承UIView实现自定义方块组件（有颜色和数字）

方块组件：TileView.swift

import UIKit
class TileView:UIView{
    
    //颜色映射表，不同的数字颜色不同
    let colorMap = [
        2:UIColor.redColor(),
        4:UIColor.orangeColor(),
        8:UIColor.yellowColor(),
        16: UIColor.greenColor(),
        32:UIColor.brownColor(),
        64:UIColor.blueColor(),
        128:UIColor.purpleColor(),
        256:UIColor.cyanColor(),
        512:UIColor.lightGrayColor(),
        1024:UIColor.magentaColor(),
        2048:UIColor.blackColor()
    ]
    
    //在设置值时，更新视图的背景和文字
    var value:Int = 0{
        didSet{
            backgroundColor = colorMap[value]
            numberLabel.text="\(value)"
        }
    }
    
    var numberLabel:UILabel!
    //初始化视图
    init(pos:CGPoint, width:CGFloat, value:Int)
    {
        numberLabel = UILabel(frame:CGRectMake(0,0, width, width))
        numberLabel.textColor = UIColor.whiteColor()
        numberLabel.textAlignment = NSTextAlignment.Center
        numberLabel.minimumScaleFactor = 0.5
        numberLabel.font = UIFont(name:"微软雅黑", size:20)
        numberLabel.text = "\(value)"
        super.init(frame:CGRectMake(pos.x, pos.y, width, width))
        addSubview(numberLabel)
        self.value = value
        backgroundColor = colorMap[value]
    }
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder : aDecoder)
    }
}

使用：

import UIKit

class ViewController: UIViewController {

    //游戏方格维度
    var dimension:Int = 4
    //数字格子的宽度
    var width:CGFloat = 50
    //格子与格子的间距
    var padding:CGFloat = 6
    //保存背景图数据
    var backgrounds:Array<TileView>!

    override func viewDidLoad()
    {
        super.viewDidLoad()
        self.backgrounds = Array<TileView>()
        //改成主视图背景白色背景
        self.view.backgroundColor = UIColor.whiteColor()
        setupGameMap()
    }
    
    func setupGameMap()
    {
        var x:CGFloat = 50
        var y:CGFloat = 150
        
        for i in 0..<dimension
        {
            println(i)
            y = 150
            for j in 0..<dimension
            {
                //随机2的1～11次方
                var val:Int = 2<<Int(arc4random_uniform(10))
                //初始化视图
                var background = TileView(pos: CGPoint(x:x,y:y), width: self.width, value: val)
                self.view.addSubview(background)
                //将视图保存起来，以备后用
                backgrounds.append(background)
                y += padding + width
            }
            x += padding+width
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}