UI基础xib的使用及xib的封装

一：

1、xib和stroryboard
Storyboard 描述软件界面,相对于xib比较重量级,一个stroryboard可以有多个场景。可以描述整个软件的所有界面
xib 描述软件界面,一般用来描述一个界面中的某一个部分

本质就是代码创建的

xib的加载过程,从xml中加载进来对界面的描述,并以此创建出来 JSAppView *view = [[JSAppView alloc] init];
View.frame = CGRectMake(0,0,85,90);

UIImageView *imageView = .......;
[view addSubView:imageView];

...............

xib和storyboard的共同点
都用来描述软件界面

都用Interface Builder工具来编辑
都使用xml来存储对界面的描述

xib和storyboard的区别,查看xib和storyboard的xml代码发现他们的区别仅仅是xib少了

Scenes和viewController

xib是轻量级的,用来描述局部的UI界面
stroryboard是重量级的,用来描述整个软件的多个界面,并且能展示
多个界面之间的跳转关系

2：查看Xcode中storyBoard的xml展示文件

3 补充：、storyBoard或者xib中拖一个UIImageView 上不能拖其他控件到它上面

但是用代码的话，任何控件上都可以添加控件

按钮添加图片的两个特点

1），background 中的图片会填充整个按钮

2），image属性按照图片实际大小填充按钮

建议：小图片在按钮上设置用image属性

二：代码示例：

xib创建的view展示

// 通过xib创建view
        UIView *subView = [[[NSBundle mainBundle] loadNibNamed:@"LLAppInfoView" owner:nil options:nil] lastObject];

三，xib的封装代码

xib封装的view

#import <UIKit/UIKit.h>
@class LLAppInfo;
@interface LLAppInfoView : UIView

@property (nonatomic, strong) LLAppInfo *appInfo;

+ (instancetype)appInfoView;

@end

#import "LLAppInfoView.h"
#import "LLAppInfo.h"
@interface LLAppInfoView ()

@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UIButton *downView;
@property (weak, nonatomic) IBOutlet UILabel *nameView;
- (IBAction)downBtnClick:(UIButton *)sender;

@end

@implementation LLAppInfoView

+ (instancetype)appInfoView
{
    LLAppInfoView *subView = [[[NSBundle mainBundle] loadNibNamed:@"LLAppInfoView" owner:nil options:nil] lastObject];
    return subView;
}

- (void)setAppInfo:(LLAppInfo *)appInfo
{
    _appInfo = appInfo;

    self.iconView.image = [UIImage imageNamed:_appInfo.icon];
    self.nameView.text = _appInfo.name;
}

- (IBAction)downBtnClick:(UIButton *)sender {

    self.superview.userInteractionEnabled = NO;
    sender.enabled = NO;

    UILabel *textLab = [[UILabel alloc] init];

    [self.superview addSubview:textLab];
    textLab.text = [NSString stringWithFormat:@"%@ 正在下载", _appInfo.name];
    textLab.backgroundColor = [UIColor grayColor];
    textLab.alpha = 0;
    textLab.textAlignment = NSTextAlignmentCenter;
    CGFloat textLabW = 200;
    CGFloat textLabH = 30;
    CGFloat textLabX = (self.superview.frame.size.width -textLabW) * 0.5;
    CGFloat textLabY = (self.superview.frame.size.height - textLabH) * 0.5;

    textLab.frame = CGRectMake(textLabX, textLabY, textLabW, textLabH);
    textLab.layer.cornerRadius = 10;
    textLab.layer.masksToBounds = YES;
    [UIView animateWithDuration:1.0 animations:^{
        textLab.alpha = 0.9;

        [UIView animateWithDuration:1 delay:5 options:UIViewAnimationOptionAllowUserInteraction animations:^{

            textLab.alpha = 0;
        } completion:^(BOOL finished) {

            [textLab removeFromSuperview];
            self.superview.userInteractionEnabled = YES;

        }];
    }];
}
@end

数据模型

#import <Foundation/Foundation.h>

// 封装数据模型
@interface LLAppInfo : NSObject

/**
 图片
 */
@property (nonatomic, copy) NSString *icon;

/**
名称
 */

@property (nonatomic, copy) NSString *name;

#warning instancetype 和 id的区别
+ (instancetype)appInfoWithDic:(NSDictionary *)dic;
- (instancetype)initWithDic:(NSDictionary *)dic;

+ (NSArray *)array;

@end

#import "LLAppInfo.h"

@implementation LLAppInfo

- (instancetype)initWithDic:(NSDictionary *)dic
{
    if (self = [super init]) {
        self.name = dic[@"name"];
        self.icon = dic[@"icon"];
    }
    return self;
}

+ (instancetype)appInfoWithDic:(NSDictionary *)dic
{
    return [[self alloc] initWithDic:dic];
}

+ (NSArray *)array
{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];

    NSArray *dicArray = [NSArray arrayWithContentsOfFile:path];

    NSMutableArray *appInfoM = [[NSMutableArray alloc] initWithCapacity:dicArray.count];

    for (NSDictionary *dic in dicArray) {

        [appInfoM addObject:[self appInfoWithDic:dic]];
    }

    return appInfoM;
}

@end

控制器

#import "ViewController.h"
#import "LLAppInfo.h"
#import "LLAppInfoView.h"

@interface ViewController ()
// 1,创建接受模型数据的数组
@property (nonatomic, strong) NSArray *appInfos;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // 创建九宫格
    [self createView];

}

#pragma mark - 创建九宫格
- (void)createView
{
    // 1,
    // 1,1 列数
    int colnumCount = 3;
    CGFloat subViewWH= 100;
    CGFloat marginX = (self.view.frame.size.width - 3*subViewWH) / (colnumCount + 1);
    for (int i = 0; i<self.appInfos.count; i++) {

        // 计算行、列
        int row = i/colnumCount;
        int col = i%colnumCount;

        // 通过xib创建view
//        UIView *subView = [[[NSBundle mainBundle] loadNibNamed:@"LLAppInfoView" owner:nil options:nil] lastObject];

        // 通过xib封装的view创建view
        LLAppInfoView *subView = [LLAppInfoView appInfoView];

        [self.view addSubview:subView];

        // 确定subView的frame
        CGFloat subViewX = marginX + (marginX + subViewWH) * col;
        CGFloat subViewY = 30 + (marginX + subViewWH) * row;
        subView.frame = CGRectMake(subViewX, subViewY, subViewWH, subViewWH);
#warning 将子控件添加到一个定义的view中的好处

        LLAppInfo *appInfo = self.appInfos[i];
        subView.appInfo = appInfo;
        // 2,取子控件给子控件赋值(这里有两种方法)
        /**
            1,通过viewWithTag
            2,通过subViews
         */

        // 这样写还是有问题，如果有多个控件tag标记太多，而且tag的性能很差
        UIImageView *iconView = (UIImageView *)[subView viewWithTag:10];
        iconView.image = [UIImage imageNamed:appInfo.icon];

        UILabel *nameView =(UILabel *) [subView viewWithTag:20];
        nameView.text = appInfo.name;

    }
}

#pragma mark - 懒加载模型数据
- (NSArray *)appInfos
{
    if (!_appInfos) {
#warning NSBundle         //    NSLog(@"%@", NSHomeDirectory());

        // 1,重plist中读取数据
//        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
//        NSArray *appInfo = [NSArray arrayWithContentsOfFile:path];
//
//
//        _appInfos = appInfo;
//        NSLog(@"%@", _appInfos);

        // 直接从封装好的代码中取数据
        _appInfos = [LLAppInfo array];
    }
    return _appInfos;
}

@end

四：xib封装步骤

1）使用xib封装一个自定义view的步骤
1、新建一个继承UIView的自定义view,类名AppInfoView
2、创建xib(xib的名字和自定义view的名字一样AppInfoView),来描述AppInfoView的内部结构
3、修改xib中的UIView的类型改为AppInfoView
4、把xib中控件连线到AppInfoView
5、AppInfoView提供一个模型属性
6、重写模型的set方法,在set方法中给xib中对应的子控件赋值

2）封装的好处

xib中完成的代码 controller得知道xib中具体的控件,产生依赖为了减少依赖,把xib内部控件的赋值给封装起来

如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部的子控件的创建屏蔽起来,不让外界关心,这样不管view内部怎么变化外界都不需要知道

五：补充：

我们经常遇到程序报错直接跳到main函数中，如何解决这个问题可以设置断点看图：

时间： 2024-08-02 11:03:06

UI基础xib的使用及xib的封装

UI基础xib的使用及xib的封装的相关文章

ios开发-UI基础-应用管理(单纯界面)改进4-xib封装

iOS开发UI基础—xib的简单使用

IOS开发UI篇--UITableView的自定义布局==xib布局

[iOS基础控件 - 4.3] xib的使用

ios开发-UI基础-应用管理(单纯界面)

ios开发-UI基础-应用管理(单纯界面)改进5-使用代理实现监听下载按钮的点击(delegate)

IOS开发UI基础—在UIImageView中添加按钮以及Tag的参数说明

iOS开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

iOS开发UI基础—从代码的逐步优化看MVC

ios开发-UI基础-应用管理(单纯界面)改进2