iOS 开发可视化编程之Xib 简述

iOS应用是很是注重用户体验的,在某些方面上应用的成功与否于UI界面是否漂亮,以及应用交互设计上有着很是重要的关系

随着iOS开发发展至今,在UI制做上大概分为三个流派:

1.使用代码手写UI和布局

2.使用Xib文件来组织UI

3.使用StoryBoard故事板

关于三者的优缺点以及应用的场景请移步代码手写UI，xib和StoryBoard间的博弈，以及Interface Builder的一些小技巧

xib

xib是一个可视化文件,就像咱们往纸上画画同样,咱们能够随意拖动一个UI控件到这张纸上

xib的建立

首先咱们建立一个模板工程,它基于single view application(单视图应用)

而后咱们Cmd+n建立一个空的Xib文件

这样咱们就能够从右侧边栏,随意拖动一个控件到空白区域了.

这样咱们就完成了xib文件的建立.实际上不管是xib仍是storyboard,他们都是xml格式的资源文件.咱们能够经过右键xib文件->Open As来切换显示格式.

然而,对于VC和view的建立咱们仍是有些不一样的,当咱们在建立UIViewController及其子类的时候咱们只须要在建立文件的时候勾选also create xib file便可,这样类文件建立出来以后,也就天然的与一块儿建立出来的xib文件关联在一块儿了.

对UIView及其子类的建立,则须要将子类文件与xib文件分别建立(注:一般咱们会以与类文件相同的名字来命名对应的xib文件,xib文件的建立同上建立空的xib文件的步骤一致),最重要的文件关联.

咱们点击进入xib文件,在右侧边栏选择第三个按钮(show the identity inspect)下的custom class的class选项,将该xib文件对应的类文件名写在输入框中,最后回车一下就Ok了

关于加载xib文件的init方法

UIViewController加载xib文件一般使用如下方法:

- (instancetype)initWithNibName:(nullable NSString *)nibNameOrNil bundle:(nullable NSBundle *)nibBundleOrNil;

而基于UIView子类的xib一般使用如下方法加载,该方法返回的是一个数组,而在iOS开发过程当中返回的数组中只会有一个元素,因此咱们只要去取其第一个元素便可.即:[0].

- (NSArray *)loadNibNamed:(NSString *)name owner:(id)owner options:(NSDictionary *)options;

**注:**关于加载方法中的NibName:

nib实际上是xib通过Xcode编译以后的加密文件,编译以后Xcode没法正常打开,而storyboard被编译以后会生成. storyboardc文件,也是打不开的,二者都存放在app的main bundle中.

简单使用xib

关于xib的简单使用,主要就是对右侧边栏的简单介绍

当咱们点击进入xib文件的时候,在右侧边栏咱们会看到六个标签:

one

第一个标签:show the file inspector.这个标签主要介绍xib文件的基本信息,通常是不会用到的,因此也不用修改.

two

第二个标签:show quick help inspector.这个标签就是一些快捷帮助信息,基本上就是苹果API中对某个控件的介绍.

three

第三个标签:show the identity inspector.在这个标签下主要作一些标识.咱们最经常使用的就是其中的Custom Class,用这个标签来关联xib文件与咱们本身建立的类文件

four

第四个标签:show the attributes inspector.在这个标签使咱们最经常使用的一个标签,咱们一般会使用它进行控件的属性设置.好比设置模拟器的一些尺度,颜色等相关的.这个标签的内容(便可设置的属性)会因控件的不一样而变化的.

five

第五个标签:show the size inspector.这个标签是设置frame的相关,主要与尺寸相关.

six

第六个标签:show the connections inspector.这个标签主要负责xib文件与类的源文件交互,通俗的将就是"连线",在xib中控件的属性与触发的动做,都是能够拖一条线到类的源文件中,用代码进行下步操做的.这会在接下来进行介绍.

关于AutoLayout

AutoLayout是iOS6引入的,由于iPhone5的屏幕从3.5寸增大到了4寸,这使得在开发中使用frame进行UI界面的设计,在适配屏幕的时候成了一个问题,因而应运而生了AutoLayout.

在xib中设置自动布局主要用到的是右下角的四个标签

one

第一个标签:Stack.这是Xcode7在iOS9引入的新功能,它用来统一管理它全部的subView(子视图)上的约束.

two

第二个标签:Align.它主要管理视图的对应关系.从上到下依次是:左右上下,水平,垂直对齐等...

three

第三个标签:Pin.它用于对单个视图添加约束,红色框起来的小三角形能够选择约束添加的相对参考视图. 其中Constrain to margin这个选项若是勾选上则表示参考边缘不是实际的父视图的边缘,一般是在父视图边缘减20的位置做为参考边缘. Aspect Ratio是设置自身的宽高比, Equal Width/Height是相对于其余控件,设置等宽或者等高.这个选项咱们能够按住Control键拖到其余控件上时设置.

four

第四个标签:Resolve autoLayout issue.这个标签主要用于从新设置autolayout.这个标签能够做用在选中的view或者是以这个view为父视图的全部view 好比:Update Frame,用于更新UI,好比咱们设置了自动适应布局,能够用这个选项来更新它的位置. Clear Constraint,用于清空全部的约束.

注意

若是咱们使用了autoLayout自动布局,那么咱们在ViewDidLoad和iOS5以后新加入的ViewWillLayoutSubviews中修改Frame均不能生效.这是由于,ViewWillLayoutSubviews这个方法在ViewDidLoad以后调用,也就是说frame生效以后接着就被autoLayout给从新布局了.

既然这样那么,咱们要更改frame就要在ViewDidLayoutSubviews中更改,或者将自动布局拖成属性,在代码中更改.

关于AutoLayout的不少方面须要在开发中本身琢磨,这里只是抛砖引玉.

关于连线-xib使用案例

建立

连线是将xib文件与类的源文件关联起来.咱们简单模拟一个登录界面的需求.

咱们须要让程序从咱们建立的Xib文件启动,因此咱们能够删掉系统给咱们提供的ViewController类文件以及Main.storyboard文件.而后Main Interface下的Main.

咱们建立一对类文件RootViewController,并勾选also create XIB file,建立出对应的xib文件.

而后咱们在appDelegate中导入RootViewController的.h文件.咱们建立和屏幕等大的窗口,并把窗口根视图控制器指定为咱们本身建立的控制器.最后将window设置为主Window并使之可见.

咱们在这个方法里写以下代码

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    RootViewController *rootVC = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];
    self.window.rootViewController = rootVC;
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
复制代码

完成这几步,程序启动以后展现的就是咱们本身建立的控制器了

属性设置

接下来咱们在xib文件中进行UI的设计.咱们拖两个Label控件,两个TextField控件.注意为了方便添加约束,咱们每拖一个控件就为它设置约束.例如咱们为两个Label设置约束以下:

其余控件的约束添加方式同上.

以上约束设置中的参数只是演示，与文中效果无关

下面咱们设置Label以及Button的文字,以及TextField的占位文字.

关于Label和Button文字咱们也能够经过双击控件设置.

咱们能够经过show the attributes inspect标签下的View子标签的background属性设置控件的颜色.

关于其余的属性,例如文字大小,颜色等属性你们能够本身测试.

将控件拖成属性

咱们能够按住Control键将Xib中的控件在代码中关联成属性或者方法,这就是IBOutLet和IBAction.

1.咱们先将Xcode设置成分屏显示.

第二个按钮.找到与xib文件关联的类文件.

2.接下来就能够将控件拖成属性或者方法了

属性的关联同上所示.

咱们把button的点击事件关联成方法,关联方式以下所示.

关联完成以后咱们就能够在show the connections inspector标签下看到了.

设置代理

一样咱们可使用Xib设置代理.咱们为usernameTextField设置代理,实现对键盘的响应控制.

代码设置部分

为了演示被拖成属性的空间用代码是能够进行操做的,咱们为用户名按钮用代码切成圆角.而且更改用户名这个Label上显示的文字,让它显示UserName.

在RootViewController的viewDidLoad方法下

self.nameLabel.text = @"UserName";
    // 切圆角
    self.nameLabel.layer.cornerRadius = 4;
    self.nameLabel.layer.masksToBounds = YES;
复制代码

效果以下:

设置键盘的响应事件

遵循协议:

咱们设置usernaeTextField为键盘的第一响应者

[_nameTextField becomeFirstResponder];

为了实现键盘的连续响应咱们须要判断当前的响应者,也就是说咱们须要分辨这两个textField.因此咱们设置为usernameTextField设置一个tag值

实现代理协议方法

-(BOOL)textFieldShouldReturn:(UITextField *)textField{
    
//    [_usernameTextField resignFirstResponder];
    if (textField.tag == 1000) {
        [_passWordTextField becomeFirstResponder];
    }else{
        
        [_passWordTextField resignFirstResponder];
    }
    
    
    return YES;
}
复制代码

实现button的点击事件

在上面咱们已经为UIButton的点击事件关联了方法,如今咱们实现方法.咱们在这里模拟点击button更改背景颜色的事件,而且回收键盘事件.

实现点击事件:

- (IBAction)btnClick:(id)sender {
	[_usernameTextField resignFirstResponder]
    [_passWordTextField resignFirstResponder];
    NSLog(@"登录成功");
    self.view.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
}
复制代码

最终效果:

Last

以上是我在学习可视化编程Xib时的一些笔记整合.学习资料主要来自简书二亮子，一天一点Xib , 因为笔者水平有限,若有疑问或者错误,欢迎你们交流,指正,我将不胜感激.