2015-07-28 80dde398d4d3f7f86189226047d3c4a8 99+ 3 m 0.4 k

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

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

新建Single View Application

新建一个View.Xib

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

使用Xib

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

在ViewDidLoad里添加如下代码

super.viewDidLoad()
        
let arr = NSBundle.mainBundle().loadNibNamed("View", owner: nil, options: nil)

let v = arr[0] as! UIView
        
containerView.addSubview(v)

运行

添加约束

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)

1	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

2015-07-27 8c38486be9756cba6118bb86effd973f 99+ a minute 0.2 k

iOS UI系列 (三) ：Reusable Button

有时候我们需要给一些做一些设置，但是这些控件却需要用在多个地方，如果在每一个ViewController都设置一遍，那么代码就不整洁了，而且比较耗时间。

创建一个RoundButton.swift 文件，集成自UIButton

import UIKit

class RoundButton: UIButton {

    /*
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect) {
        // Drawing code
    }
    */
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    override func awakeFromNib() {
      
        self.layer.cornerRadius=10
        self.layer.borderColor=UIColor.redColor().CGColor
        self.layer.borderWidth=2
        self.layer.backgroundColor=UIColor.yellowColor().CGColor
        self.contentEdgeInsets=UIEdgeInsets(top: 10,left: 10,bottom: 10,right: 10)
    }
}

设置UIButton的Custom class为 RoundButton

移动开发

iOS

2015-07-27 20677e53b5a3848804db74620762c8bf 99+ 3 m 0.4 k

iOS UI系列 (二) ：使用多个StoryBoard

为什么要使用多个StoryBoard

StoryBoard 给项目带了很大的方便，在一个视图里可以看到整个项目页面之间的关系，但是如果项目所有的页面都放到一个StoryBoard, 会带来以下一些问题

UIStoryBoard太大
每次打开StoryBoard比较慢
一个窗口里面显示所有的View，显得比较混乱，尤其是一个显示器看不全的时候
UIStoryBoard 项目解决源码冲突太麻烦

所以，我建议项目使用多个StoryBoard, 不同模块使用不同的UIStoryBoard, 下面是如何使用的实例。

Main Storyboard

首先建立一个Single View Application, 在StoryBoard里添加2个UIViewController, 并且设置好导航关系

新建一个SecondViewController类, Command+N–>Coca Touch cass–>Next, 继承UIViewController, 选择Swift语言

import UIKit

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

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

设置第二ViewController的File’s owner 的class为刚新建的SecondViewController

第二个StoryBoard

Command+N–>User Interface—>StoryBoard，命名Second

添加2个UIViewController, 并添加对应的按钮，将View的背景色改为黄色，以区别这是第二个UIStoryBoard, 按住Ctrl从第一个ViewController拖到第二个ViewController,选择Show

设置第一个UIViewController如下

连接2个StoryBoard

打开Main.storyboard, 为SecondViewController上的按钮建立一个IBAction, 然后在SecondViewController.swift里添加如下代码

 @IBAction func GotoSecondStoryBoard(sender: AnyObject) {

         let vc = UIStoryboard(name: "Second", bundle: nil).instantiateInitialViewController() as! UIViewController
        self.navigationController?.pushViewController(vc, animated: true)

    }

如果我们不设置Is Intial View Controller, 那么我们需要设置View Controller的StoryBoard Id, 然后使用如下代码

let vc = UIStoryboard(name: "Second", bundle: nil).instantiateViewControllerWithIdentifier("FirstView") as! UIViewController
self.navigationController?.pushViewController(vc, animated: true)