iOS UI系列 (四) :可复用的Xib(1) 静态内容

来源:个人博客     2016-04-19 15:58:28    人气:     我有话说( 0 人参与)

清泛网(www.tsingfun.com):有时候页面中的部分内容相同,或者是一些静态的内容组合,这时候我们就可以把这些见面封装到一个XIB里新建Single View Application新建一...

有时候页面中的部分内容相同,或者是一些静态的内容组合,这时候我们就可以把这些见面封装到一个XIB里

新建Single View Application

新建一个View.Xib

  1. Command+N–>User Interface–>View
  2. 把界面大小改为Freeform
  3. 添加一个UILabel, 两个UIView, 并设置对应的背景色
  4. 添加对应的约束,让两个UIView等宽,且Space都是10, 高度固定,且与周围的约速为10, 对UILabel也设置对应的约速,细节就不写了,看图

使用Xib

在ViewController添加 一个UIView, 并设置对应的约束,连接这个UIView为Controller的 IBOutlet ContainerView

  1. 在ViewDidLoad里添加如下代码

     super.viewDidLoad()
    	        
     let arr = NSBundle.mainBundle().loadNibNamed("View", owner: nil, options: nil)
    
     let v = arr[0] as! UIView
    	        
     containerView.addSubview(v)
    

    运行

    试图添加进去了,但是试图显示的不对,那是因为没有添加约束

  2. 添加约束

     import UIKit
    
     class ViewController: UIViewController {
    
     @IBOutlet weak var containerView: UIView!
        
     var v: UIView!
        
     override func viewDidLoad() {
            
         super.viewDidLoad()
            
         let arr = NSBundle.mainBundle().loadNibNamed("View", owner: nil, options: nil)
         v = arr[0] as! UIView
            
            
         containerView.addSubview(v)
            
         setUpConstraint()
            
            
         // Do any additional setup after loading the view, typically from a nib.
     }
        
     override func didReceiveMemoryWarning() {
         super.didReceiveMemoryWarning()
         // Dispose of any resources that can be recreated.
     }
        
        
     func setUpConstraint()
     {
            
         v.setTranslatesAutoresizingMaskIntoConstraints(false)
            
         containerView.addConstraint(NSLayoutConstraint(
             item:v, attribute:.Leading,
             relatedBy:.Equal, toItem:containerView,
             attribute:.Left, multiplier:1, constant:0))
            
         containerView.addConstraint(NSLayoutConstraint(
             item:v, attribute:.Trailing,
             relatedBy:.Equal, toItem:containerView,
             attribute:.Right, multiplier:1, constant:0))
            
         containerView.addConstraint(NSLayoutConstraint(
             item:v, attribute:.Top,
             relatedBy:.Equal, toItem:containerView,
             attribute:.Top, multiplier:1, constant:0))
            
         containerView.addConstraint(NSLayoutConstraint(
             item:v, attribute:.Bottom,
             relatedBy:.Equal, toItem:containerView,
             attribute:.Bottom, multiplier:1, constant:0))
            
     }	    
        
     }
    
  3. 运行结果, 我们的Xib已经可以自适应容器了

标签: iOS开发  UI  Xib 

本文源自互联网,采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可,
版权归原作者,如有问题请联系service@tsingfun.com (编辑:admin)