1. Interface Builder 可视化编程

 1> 概述

  GUI : 图形用户界面(Graphical User Interface,
简称GUI, 又称图形化界面) 是指采用图形方式显示的计算机操作用户界面。

  Interface Builder (简称IB) : 是MAC OS X 平台下用于设计和测试图形用户界面 (GUI)
的应用程序。代码 和 IB 都可以生成 GUI。

  优势: IB 能使开发者简单快捷的开发出符合Mac系列操作系统的GUI。通常你只需要通过简单的拖拽操作来构建UI就可以了。IB 使用Nib文件存储 GUI
资源,在需要的时候,Nib文件可以被快速地载入内存。

 2> iOS可视化编程

  • iOS下可视化编程分为两种方式:xib 和 storyBoard

  • 在使用 xib 和 storyBoard 创建 GUI 过程中,以 XML文件格式存储在Xcode中,编译时生成 nib 的二进制文件。在运行时,nib 文件被加载并且开始创建和实例化GUI元素

2. xib创建及使用

 1> 概述

  • xib 创建 .xib 文件,包括视图布局,以XML格式存储。

  • 程序运行后,.xib 文件中的内容编译为.nib 文件(二进制文件),存储在工程包中

  • .xib 通常以关联方式出现在工程文件中,即在被创建时是伴随一个类(UIKit框架下的类)诞生的

 2> .xib创建

  视图控制器独有初始化方法

  - (instancetype)initWithNibName:(NSString *)nibNameOrNib bundle:(NSBundle *)nibBundleOrNil

  nibNameOrNib:当前控制器相关联的nib文件,如果写nil默认为同名文件

  nibBundleOrNil:当前应用程序包所在文件,如果写nil默认为mainBundle

  在我们使用init初始化(或者new直接创建)控制器的时候,会自动执行控制器的此方法,参数均为默认值执行,所以可不写

 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
2 // 创建window
3 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
4 self.window.backgroundColor = [UIColor whiteColor];
5 [self.window makeKeyAndVisible];
6
7 // 程序编译时,会将xib文件编译成nib的二进制文件,运行时加载nib文件
8 // NibName:当前控制器的相关联的nib文件, 如果写为nil,默认查找和控制器名相同的文件名,但是如果xib文件与控制器名不同,则查不到
9 // bundle:获取程序资源路径,如果写为nil,默认是主路径,因为iOS只有一个主路径,在mac端开发时必须写
10
11 // 创建根视图
12 RootViewController *rootVC = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];
13
14 self.window.rootViewController = rootVC;
15
16 return YES;
17 }  

 3> 选项卡

  在Xcode工具栏(快捷键command + option(alt) + 0)管理者一组选项卡,用以对Xcode中文件(类文件或者IB文件)进行设置和描述。

  在选中IB文件的情况下Xcode会有六个标签分别负责对选中的内容的信息查看和操作,包括文件基本信息、快速帮助、属性设置等。

 4> 插座变量(Outlet)

  • 插座变量:用于控制IB中的UI控件。

   IBOutlet:外联指针,连接插座变量和IB中的UI控件。

  • 设置:选中控件,按住control , 向接口部分中拖拽。

   Connection: 拖拽之后创建的类型(属性、方法、集合属性)。

   Object:绑定的对象。

   Name: 法名或者属性名字。

   Type:控件类型。

   Storage:控件的内存修饰参数。

 5> 事件关联(IBAction)

  • 动作,用于响应UI控件的触发事件。

   IBAction,连接方法和IB中的UI控件。

  • 设置,选中控件,按住 ,向原类接 部分或者实现部分中 拖拽,设置响应 法。

   Name :方法名。

   Type :方法中的参数类型。

   Event : 触发方法的方式

   Arguments :方法中携带的什么样的参数。 

 6> 代理设置

  • File’s owner : 文件的拥有者,即视图控制器。
  • 设置:右键单击控件,连接代理变量 和 File’s owner
  • 注意 :在拖拽的时候必须拖拽到 File’s owner 。

  拖拽方式一:

  拖拽方式二:  

3. xib绘制单元格

  • 自定义单元格指的是UITableView 的自定义cell。
  • 通过 xib 可以快速的绘制cell。
  • 新建UITableViewController 子类, 设置为根视图控制器。
  • 新建一个UITableViewCell 子类,勾选Also create XIB file。
  • 使用 xib 绘制自定义 cell 样式。
  • 设置 cell 的重用标识(zhì)符。

  • 声明和定义重用标识符 
 1 #import "RootTableViewController.h"
2 #import "RootCell.h"
3
4 @interface RootTableViewController ()
5
6 @end
7
8 @implementation RootTableViewController
9
10 // 定义重用标识符(标准版)
11 static NSString * const identifier_cell = @"cell";
  • 注册Cell  
 1 - (void)viewDidLoad {
2 [super viewDidLoad];
3
4 // 以前普通方式
5 // [self.tableView registerClass:[RootCell class] forCellReuseIdentifier:@"cell"];
6
7 // xib 注册cell
8 [self.tableView registerNib:[UINib nibWithNibName:@"RootCell" bundle:nil] forCellReuseIdentifier:identifier_cell];
9 }
10 // 返回Cell
11 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
12 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier_cell forIndexPath:indexPath];
13
14 return cell;
15 }

  记得设置自定义cell的高度

1 // 设置每一行的高度
2 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
3 {
4 return 120;
5 }

4. 自动布局

 1> 概述

  • 自动布局:autoLayout , 不给View 固定的位置, 通过某些规则让View 自己适应自己的位置。
  • iOS6.0之后推出, 在 iOS8.0 自动布局被大幅度优化, iOS9 中新增了许多功能。

 2> 自动布局中常用的四个选项

 3> Stack

  

  • UIStackView, 可以管理多个视图。一次性为多个视图进行约束设置。
  • Axis : 子视图排布方向。
  • Alignment :子视图对齐方式。
  • Distribution : 分布方式。(调整 StackView 的大小 , 切换选项观察)
  • Space : 子视图的最小间距。
  • 备注 : 选中多个排列的视图 , 勾选 Stack 即可进行编辑 StackView 选项卡。

 4> Align(设置视图的对齐方式)

  

  • Leading Edges :左对齐。   
  • Trailing Edges :右对齐。
  • Top Edges :上对齐。
  • Bottom Edges :下对齐。
  • Horizontal Centers :纵向中心对齐
  • Vertical Centers :横向中心对齐。
  • BaseLine :基线对齐。
  • Horizontal in Container :以屏幕的纵向中心线对齐。
  • Vertical Container :以屏幕的横向中心对齐。
  • 两者结合使用可以让View 的中心点和屏幕的中心点对齐。  

 5> Pin (设置视图的尺寸相关属性)

  

  • 上面的四个方向的设置尺寸代表距离四个方向的最近的视图的距离
  • 如果对应方向没有视图 , 则视为对应的屏幕方向的距离。Constrain to margins 选项表示是否留下20个点的位置。   
  • Width:视图的宽度
  • Height:视图的高度
  • Equal Width: 两个视图等宽。
  • Equal Height :两个视图等高。
  • Aspect Ratio: 设置宽高比

 6> Resolve Auto Layout Issues

  • Resolve Auto Layout Issues : 解决自动布局的问题。
  • Selected Views: 选中的View , 不包含子视图。
  • All Views in View:选中的View , 包含子视图。
  • Update Frame :更新位置信息。
  • Update Constraints :更新约束信息。
  • Add Missing Constraints :忽略约束不足的错误。
  • Reset to Suggested Constraints :重置被建议的约束。
  • Clear Constraints :删掉所有的约束。


iOS开发UIKit框架-可视化编程-XIB的更多相关文章

  1. iOS学习32之UIKit框架-可视化编程-XIB

    1. Interface Builder 可视化编程 1> 概述 GUI : 图形用户界面(Graphical User Interface, 简称GUI, 又称图形化界面) 是指采用图形方式显 ...

  2. iOS学习之UI可视化编程-XIB

    一.Interface Builder可视化编程 1.Interface Builder简介: GUI:图形用户界面(Graphical User Interface,简称GUI,又称图形用户接口)是 ...

  3. iOS开发网络篇—网络编程基础

    iOS开发网络篇—网络编程基础 一.为什么要学习网络编程 1.简单说明 在移动互联网时代,移动应用的特征有: (1)几乎所有应用都需要用到网络,比如QQ.微博.网易新闻.优酷.百度地图 (2)只有通过 ...

  4. iOS学习33之可视化编程-StoryBoard

    1. storyBoard与xib 1> 概述 iOS下可视化编程分为两种方式: xib 和 storyboard 在使用 xib 和 storyboard 创建 GUI 过程中,以 XML 文 ...

  5. iOS学习之UI可视化编程-StoryBoard

    一.StoryBoard与xib 对比: 相同点:都属于IB编程的方式,可以快速构建GUI. 不同点:xib侧重于单文件(单独的控制器或者视图)编辑,storyboard侧重于多页面关联.storyb ...

  6. iOS开发基础框架

    ---恢复内容开始--- //appdelegate ////  AppDelegate.m//  iOS开发架构////  Copyright © 2016年 Chason. All rights ...

  7. 【IOS开发】《多线程编程指南》笔记

    线程是单个应用中可以并发执行多个代码路径的多种技术之一.虽然更新的技术如操作对象(Operation)和Grand Central Dispatch(GCD),提供一个等价现代化和高效的基础设施来实现 ...

  8. iOS开发网络篇—网络编程基础(二)

    下面叙述的是关于几个必须要知道的iOS网络编程入门级别的要点:       1.客户端如何找到连接的服务器    客户端通过URL找到想要连接的服务器   2.什么是URL     URL的全称是Un ...

  9. iOS开发--浅谈CocoaAsyncSocket编程

    Socket就是一种特殊的文件.它是一个连接了两个用户的文件,任何一个用户向Socket里写数据,另一个用户都能看得到,不管这两个用户分布在世界上相距多么遥远的角落,感觉就像坐在一起传纸条一样. 这么 ...

随机推荐

  1. [BZOJ1008] [HNOI2008] 越狱 (数学)

    Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 In ...

  2. 一个题目涉及到的50个Sql语句

    原博客地址 http://blog.csdn.net/maco_wang/article/details/6281484 Student(S#,Sname,Sage,Ssex) 学生表 Course( ...

  3. ES2015 类 class 语法

    在ES2015之前,定义类的方法只能通过原型链来模拟 function Animal(family,species) { this.family = family; this.species = sp ...

  4. mysql方言不支持blob类型解决方案

    package com.gstone.history.entity; import java.sql.Types; import org.hibernate.Hibernate; import org ...

  5. k60模块

    lptmr_time_start_ms(); //开始计时 DELAY_MS(); //延时一段时间(由于语句执行需要时间,因而实际的延时时间会更长一些) timevar = lptmr_time_g ...

  6. 2-SAT 问题与解法小结

    2-SAT 问题与解法小结 这个算法十分的奇妙qwq... 将一类判定问题转换为图论问题,然后就很容易解决了. 本文有一些地方摘录了一下赵爽<2-SAT解法浅析> (侵删) 一些概念: \ ...

  7. WordPress禁止版本修订历史、自动保存和自动草稿最新方法汇总

    提醒:我这里汇总的方法有一些只支持以前老版本的WordPress,对于新版本的WordPress,有些功能是不支持的,所以操作前请做好备份.我的WordPress版本目前是4.3.1,我会在我测试有效 ...

  8. xml 加载多个properties文件

    xml 配置项: <bean id="propertyConfigurer" class="com.boc.icms.archive.util.ExProperty ...

  9. Flask入门HelloWorld

    Flask入门HelloWorld Flask官网:http://flask.pocoo.org/ Flask中文翻译:http://dormousehole.readthedocs.io/en/la ...

  10. Java 面试宝典-2017

    http://www.cnblogs.com/nelson-hu/p/7190163.html Java面试宝典-2017   Java面试宝典2017版 一. Java基础部分........... ...