zoukankan      html  css  js  c++  java
  • iOS开发UIKit框架-可视化编程-XIB

    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 :删掉所有的约束。
  • 相关阅读:
    Linux下让一个程序开机自动启动
    Heartbeat高可用解决方案
    NFS文件共享
    清除系统日志的三个脚本
    nfs+rsync+inotify实现文件的实时同步
    安装配置rsync服务端
    shell中如何进行算术运算
    linux下查看账号密码的过期时间和设置时间
    配置Nginx作为web server详解
    [LeetCode] 398. Random Pick Index ☆☆☆
  • 原文地址:https://www.cnblogs.com/melons/p/5791771.html
Copyright © 2011-2022 走看看