猴子原创,欢迎转载。转载请注明: 转载自Cocos2Der-CSDN,谢谢!

原文地址: http://blog.csdn.net/cocos2der/article/details/51657154

我们使用Storyboard布局的时候,很多子单元页面会独立到xib布局中,那么这个xib如何添加到storyboard中呢?下面我们看看Swift下怎么操作。


一、准备工作

  1. 新建Xcode工程
  2. 新建一个UIView:MyView.swift 集成自UIView
  3. 新建一个UIView的xib布局文件:MyView.xib

    这个是我MyView.xib内容:


二、互相关联MyView.xib与MyView.swift

xib关联到MyView.swift

  1. 设置MyView.xib的File’s Owner 的Custom Class为MyView
  2. 注意:不要修改MyView.xib下View的Custom Class,保存其为默认的UIView。

MyView.swift设置

  1. 将MyView.xib下的View拖拽到MyView.swift中关联IBOutlet属性变量:view
    @IBOutlet var view: UIView!
  1. 添加初始化代码在MyView.swift中:
    override init(frame: CGRect) {
        super.init(frame: frame)
        initViewFromNib()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initViewFromNib()
    }

    private func initViewFromNib(){
        // 需要这句代码,不能直接写UINib(nibName: "MyView", bundle: nil),不然不能在storyboard中显示
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: "MyView", bundle: bundle)
        self.view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView
        self.view.frame = bounds
        self.addSubview(view)

        // Do any additional setup after loading the view.

    }

三、添加MyView.xib到Main.storyboard

  1. 拖拽一个UIView到Main.storyboard中,设置该UIView的Custom Class为MyView, 添加一下布局约束。

OK, 现在运行Xcode,是不是看到app运行后,自己的xib已经出来了。


四、让Xcode下Main.storyboard中预览xib

细心的朋友注意到了,Main.storyboard中没有刷新xib视图,只能运行后才能看到,下面我们让Main.storyboard中也能预览xib。

1. 添加@IBDesignable属性

2. 添加Main.storyboard下xib初始化方法

3. 注意:

- Xcode非运行状态下storyboard加载xib使用NSBundle.mainBundle().loadNibNamed会出现找不到xib文件的错误。

- xib加载后,需要设置其frame大小,不然frame会是xib中的大小。

- 每次选中storyboard,都会自动Build一次来刷新其中xib视图,如果过程中出现错误信息可以直接Xcode下查看,如果出现Crash错误,Xcode下不会显示,此时去查看下面的crash文件来帮助你定位问题。



~/Library/Logs/DiagnosticReports/IBDesignablesxxxxxxx.crash



下面是完整MyView.swift

import UIKit

@IBDesignable class MyView: UIView {

    @IBOutlet var view: UIView!

    override init(frame: CGRect) {
        super.init(frame: frame)
        initViewFromNib()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initViewFromNib()
    }

    private func initViewFromNib(){
        // 需要这句代码,不能直接写UINib(nibName: "MyView", bundle: nil),不然不能在storyboard中显示
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: "MyView", bundle: bundle)
        self.view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView
        self.view.frame = bounds
        self.addSubview(view)

        // Do any additional setup after loading the view.

    }

    @IBAction func tapped(sender: AnyObject) {
        print("tappd")
    }
}

效果图:

Swift下自定义xib添加到Storyboard的更多相关文章

  1. Swift下使用Xib设计界面

    虽然Swift可以纯代码设计界面,不过不利用现有的可视化工具有时候有点效率低.下面是使用xib设计方法,部分代码来自网上. (1)新建View 2.新建View class 3.DemoView.sw ...

  2. swift 之xib自定义view可视化到storyboard

    首先直入正题:@IBInspectable & @IBDesignable 对于 @IBInspectable 和 @IBDesignable 可详见官方文档 : Creating a Cus ...

  3. Swift下多个Storyboard的项目结构

    我是个比较喜欢用storyboard和xib的人.我个人的习惯就是,能用storyboard的一定不用代码手工撸.当然自己业余个人写的项目,基本上一个storyboard就搞定了.但涉及到多人合作下时 ...

  4. Swift - 使用xib添加新界面

    除了使用storyboard外,我们还可以使用xib来设计并创建页面. 1,下面通过一个样例来演示: (1)点击主界面的“信息”按钮,页面切换到信息界面 (2)点击信息界面的“返回”,关闭信息界面,回 ...

  5. Maven项目如何将自定义文件添加到META-INF目录下

    Maven项目如何将自定义文件添加到META-INF目录下 学习了:https://blog.csdn.net/yangjiegreat/article/details/78698655 <bu ...

  6. 关于xib文件和storyboard文件的那些事儿

    在ios中,一般建议使用代码布局,因为使用代码布局,后期维护容易,拓展容易,并且可以实现动态加载很多数据,但是代码布局比较繁琐,不适合初学者.Xib布局或者Storyboard布局比较方便.下面介绍一 ...

  7. Android动画效果之自定义ViewGroup添加布局动画

    前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通 ...

  8. Masonry 在swift下的使用

    Masonry在oc下使用很方便,但是在swift下,由于oc方法和property都可以使用.fuc的语法,swift下只有属性可以使用.property的语法,方法只能写成.func().因此在s ...

  9. iOS 11 导航栏 item 偏移问题 和 Swift 下 UIButton 设置 title、image 显示问题

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

随机推荐

  1. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  2. 剖析Vue原理&实现双向绑定MVVM

    转自:http://www.w3cmark.com/2016/496.html 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于 ...

  3. Ajax来实现下拉框省市区三级联动效果(服务端基于express)

    //服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...

  4. EM vs REM vs PX,为什么你不应该”只用px“”

    Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...

  5. .NET中的各种池

    在.NET中,常用到的池有四个:字符串拘留池.线程池 .应用程序池.数据库连接池. 字符串拘留池 在.NET中字符串是不可变对象,修改字符串变量的值会产生新的对象.为降低性能消耗及减小程序集大小,.N ...

  6. truncated、delete和drop的异同点

    相同点 truncate和不带where子句的delete, 以及drop都会删除表内的数据. 不同点: 1.truncate和 delete只删除数据不删除表的结构(定义) drop语句将删除表的结 ...

  7. Spring消息之AMQP.

    一.AMQP 概述 AMQP(Advanced Message Queuing Protocol),高级消息队列协议. 简单回忆一下JMS的消息模型,可能会有助于理解AMQP的消息模型.在JMS中,有 ...

  8. PHP 5 Array 函数

    PHP Array 简介 PHP Array 函数允许您访问并操作数组. 支持简单的数组和多维数组. 安装 PHP Array 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP 5 ...

  9. 解决使用BottomSheetDialog时状态栏变黑的问题

    问题描述 当使用support里的design 库里的BottomSheetDialog时,在6.0的机器上当对话框弹出时系统状态栏会变黑,如下图所示: 一开始以为是我用的姿势不对,试过对style配 ...

  10. MySQL系列教程(二)

    mySQL执行计划 语法  explain <sql语句> 例如: explain select * from t3 where id=3952602; explain输出解释 +---- ...