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

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

代码如下：

import@H_404_124@ 
         UIKit@H_404_124@

 
        
           
         
        class@H_404_124@ 
         ViewController@H_404_124@ 
         :@H_404_124@ 
         UIViewController@H_404_124@ 
         {@H_404_124@ 
        
 
        
           
         
         
         @H_404_124@ 
         //游戏方格维度@H_404_124@ 
        
 
        @H_404_124@ 
         var@H_404_124@ 
         dimension:@H_404_124@ 
         Int@H_404_124@ 
         = 4@H_404_124@ 
        
 
        
           
         
        //数字格子的宽度@H_404_124@ 
         
        width:@H_404_124@ 
         CGFloat@H_404_124@ 
         = 50@H_404_124@ 
        
 
        //格子与格子的间距@H_404_124@ 
         
        padding:@H_404_124@ 
         = 6@H_404_124@ 
        
 
        @H_404_124@ 
         
        //保存背景图数据@H_404_124@ 
         
        backgrounds:@H_404_124@ 
         Array@H_404_124@ 
         <@H_404_124@ 
         UIView@H_404_124@ 
         >!@H_404_124@ 
        
 
        @H_404_124@ 
         
        override@H_404_124@ 
         func@H_404_124@ 
         viewDidLoad()@H_404_124@ 
        
 
        @H_404_124@ 
         {@H_404_124@ 
        
 
        super@H_404_124@ 
         .viewDidLoad()@H_404_124@ 
        
 
        self@H_404_124@ 
         .backgrounds =@H_404_124@ 
         >()@H_404_124@ 
        
 
        //改成主视图背景白色背景@H_404_124@ 
         
        .view.backgroundColor =@H_404_124@ 
         UIColor@H_404_124@ 
         .whiteColor()@H_404_124@ 
        
 
        setupGameMap()@H_404_124@ 
         
        }@H_404_124@ 
         
        @H_404_124@ 
         
        setupGameMap()@H_404_124@ 
         
        {@H_404_124@ 
         
        x:@H_404_124@ 
         = 50@H_404_124@ 
        
 
        y:@H_404_124@ 
         = 150@H_404_124@ 
        
 
        @H_404_124@ 
         
        for@H_404_124@ 
         i@H_404_124@ 
         in@H_404_124@ 
         0..<dimension@H_404_124@ 
        
 
        {@H_404_124@ 
         
        @H_404_124@ 
         @H_301_276@println@H_404_124@ 
         (i)@H_404_124@ 
        
 
        y = 150@H_404_124@ 
         
        j@H_404_124@ 
         0..<dimension@H_404_124@ 
        
 
        {@H_404_124@ 
         
        //初始化视图@H_404_124@ 
         
        background =@H_404_124@ 
         (frame:@H_404_124@ 
         CGRectMake@H_404_124@ 
         (x,y,width,width))@H_404_124@ 
        
 
        background.backgroundColor =@H_404_124@ 
         .darkGrayColor()@H_404_124@ 
        
 
        .view.addSubview(background)@H_404_124@ 
         
        //将视图保存起来，以备后用@H_404_124@ 
         
        backgrounds.append(background)@H_404_124@ 
         
        y += padding + width@H_404_124@ 
         
        }@H_404_124@ 
         
        x += padding+width@H_404_124@ 
         
        }@H_404_124@ 
         
        }@H_404_124@ 
         
        
           
         
        didReceiveMemoryWarning() {@H_404_124@ 
         
        .didReceiveMemoryWarning()@H_404_124@ 
         
        // Dispose of any resources that can be recreated.@H_404_124@ 
         
        }@H_404_124@ 
         
         
         }@H_404_124@

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

方块组件：TileView.swift

TileView@H_404_124@

{@H_404_124@ 
         
        @H_404_124@ 
         
        //颜色映射表，不同的数字颜色不同@H_404_124@ 
         
        let@H_404_124@ 
         colorMap = [@H_404_124@ 
        
 
        2:@H_404_124@ 
         .redColor(),@H_404_124@ 
        
 
        4:@H_404_124@ 
         .orangeColor(),@H_404_124@ 
        
 
        8:@H_404_124@ 
         .yellowColor(),@H_404_124@ 
        
 
        16:@H_404_124@ 
         .greenColor(),@H_404_124@ 
        
 
        32:@H_404_124@ 
         .brownColor(),@H_404_124@ 
        
 
        64:@H_404_124@ 
         .blueColor(),@H_404_124@ 
        
 
        128:@H_404_124@ 
         .purpleColor(),@H_404_124@ 
        
 
        256:@H_404_124@ 
         .cyanColor(),@H_404_124@ 
        
 
        512:@H_404_124@ 
         .lightGrayColor(),@H_404_124@ 
        
 
        1024:@H_404_124@ 
         .magentaColor(),@H_404_124@ 
        
 
        2048:@H_404_124@ 
         .blackColor()@H_404_124@ 
        
 
        ]@H_404_124@ 
         
        @H_404_124@ 
         
        //在设置值时，更新视图的背景和文字@H_404_124@ 
         
        value:@H_404_124@ 
         = 0{@H_404_124@ 
        
 
        didSet@H_404_124@ 
         {@H_404_124@ 
        
 
        backgroundColor = colorMap[value]@H_404_124@ 
         
        numberLabel.text=@H_404_124@ 
         "\(value)"@H_404_124@ 
        
 
        }@H_404_124@ 
         
        }@H_404_124@ 
         
        @H_404_124@ 
         
        numberLabel:@H_404_124@ 
         UILabel@H_404_124@ 
         !@H_404_124@ 
        
 
        //初始化视图@H_404_124@ 
         
        init@H_404_124@ 
         (pos:@H_404_124@ 
         CGPoint@H_404_124@ 
         ,width:@H_404_124@ 
         404_124@ 
         )@H_404_124@ 
        
 
        {@H_404_124@ 
         
        numberLabel =@H_404_124@ 
         (0,width))@H_404_124@ 
        
 
        numberLabel.textColor =@H_404_124@ 
         .whiteColor()@H_404_124@ 
        
 
        numberLabel.textAlignment =@H_404_124@ 
         NSTextAlignment@H_404_124@ 
         .@H_404_124@ 
         Center@H_404_124@ 
        
 
        numberLabel.minimumScaleFactor = 0.5@H_404_124@ 
         
        numberLabel.font =@H_404_124@ 
         UIFont@H_404_124@ 
         (name:@H_404_124@ 
         "微软雅黑"@H_404_124@ 
         404_124@ 
        
 
        numberLabel.text =@H_404_124@ 
         "\(value)"@H_404_124@ 
        
 
        .@H_404_124@ 
         (pos.x,pos.y,monospace!important; min-height:inherit!important">addSubview(numberLabel)@H_404_124@ 
        
 
        .value = value@H_404_124@ 
         
        backgroundColor = colorMap[value]@H_404_124@ 
         
        }@H_404_124@ 
         
        @H_404_124@ 
         
        required@H_404_124@ 
         (coder aDecoder:@H_404_124@ 
         NSCoder@H_404_124@ 
         ) {@H_404_124@ 
        
 
        (coder : aDecoder)@H_404_124@ 
         
        }@H_404_124@

使用：

//数字格子的宽度@H_404_124@

= 50@H_404_124@

//格子与格子的间距@H_404_124@

= 6@H_404_124@

//保存背景图数据@H_404_124@

>!@H_404_124@

viewDidLoad()@H_404_124@

{@H_404_124@

.viewDidLoad()@H_404_124@

>()@H_404_124@

//改成主视图背景白色背景@H_404_124@

.whiteColor()@H_404_124@

setupGameMap()@H_404_124@

}@H_404_124@

@H_404_124@

setupGameMap()@H_404_124@

{@H_404_124@

= 50@H_404_124@

= 150@H_404_124@

@H_404_124@

0..<dimension@H_404_124@

{@H_404_124@

(i)@H_404_124@

y = 150@H_404_124@

0..<dimension@H_404_124@

{@H_404_124@

//随机2的1～11次方@H_404_124@

val:@H_404_124@

= 2<<@H_404_124@ 
         (arc4random_uniform(10))@H_404_124@

 
        (x:x,y:y),width:@H_404_124@ 
         .width,value: val)@H_404_124@ 
        
 
        .view.addSubview(background)@H_404_124@ 
         
        //将视图保存起来，以备后用@H_404_124@ 
         
        backgrounds.append(background)@H_404_124@ 
         
        y += padding + width@H_404_124@ 
         
        }@H_404_124@ 
         
        x += padding+width@H_404_124@ 
         
        }@H_404_124@ 
         
        
           
         
        didReceiveMemoryWarning() {@H_404_124@ 
         
        .didReceiveMemoryWarning()@H_404_124@ 
         
        // Dispose of any resources that can be recreated.@H_404_124@ 
         
        }@H_404_124@ 
         
        }@H_404_124@

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

猜你在找的Swift相关文章