欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS开发UI篇—xib的简单使用实例

程序员文章站 2023-12-19 12:46:28
这个博客申请了有一段时间了,觉得好像是该写点什么了。这篇文章主要是关于一些xib的简单的用法,希望可以帮助到刚刚使用xib的新手们。 什么是xib? xib能做什...

这个博客申请了有一段时间了,觉得好像是该写点什么了。这篇文章主要是关于一些xib的简单的用法,希望可以帮助到刚刚使用xib的新手们。

什么是xib? xib能做什么?

用来描述软件界面的文件。

如果没有xib,所有的界面都需要通过代码来手动创建。

有了xib以后,可以在xib中进行可视化开发,然后加载xib文件的时候,系统自动生成对应的代码来创建界面。

与xib类似的还有storyboard文件。xib和storyboard的比较,一个轻量级一个重量级。

共同点:

都用来描述软件界面。都用interface builder工具来编辑

不同点:

xib是轻量级的,用来描述局部的ui界面

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

二、xib的简单使用

1.建立xib文件iOS开发UI篇—xib的简单使用实例
建立的xib文件命名为appxib.xibiOS开发UI篇—xib的简单使用实例
2.对xib进行设置

根据程序的需要,这里把view调整为*布局iOS开发UI篇—xib的简单使用实例
建立view模型(设置长宽等参数)iOS开发UI篇—xib的简单使用实例
调整布局和内部的控件iOS开发UI篇—xib的简单使用实例
完成后的单个view
iOS开发UI篇—xib的简单使用实例

3.使用xib文件的代码示例

yyviewcontroller.m文件代码如下:

//
// yyviewcontroller.m
// 10-xib文件的使用
//
// created by apple on 14-5-24.
// copyright (c) 2014年 itcase. all rights reserved.
//

#import "yyviewcontroller.h"
#import "yyapp.h"

@interface yyviewcontroller ()
@property(nonatomic,strong)nsarray *app;
@end

@implementation yyviewcontroller

//1.加载数据信息
-(nsarray *)app
{
  if (!_app) {
    nsstring *path=[[nsbundle mainbundle]pathforresource:@"app.plist" oftype:nil];
    nsarray *temparray=[nsarray arraywithcontentsoffile:path];
    
    //字典转模型
    nsmutablearray *arraym=[nsmutablearray array ];
    for (nsdictionary *dict in temparray) {
      [arraym addobject:[yyapp appwithdict:dict]];
    }
    _app=arraym;
  }
  return _app;
}

//创建界面原型
- (void)viewdidload
{
  [super viewdidload];
  nslog(@"%d",self.app.count);
  
  //九宫格布局
  int totalloc=3;
  cgfloat appvieww=80;
  cgfloat appviewh=90;
  cgfloat margin=(self.view.frame.size.width-totalloc*appvieww)/(totalloc+1);
  
  int count=self.app.count;
  for (int i=0; i<count; i++) {
    
    int row=i/totalloc;
    int loc=i%totalloc;
    cgfloat appviewx=margin + (margin +appvieww)*loc;
    cgfloat appviewy=margin + (margin +appviewh)*row;
    yyapp *app=self.app[i];
    
    //拿出xib视图
    nsarray *apparray= [[nsbundle mainbundle]loadnibnamed:@"appxib" owner:nil options:nil];
    uiview *appview=[apparray firstobject];
    //加载视图
    appview.frame=cgrectmake(appviewx, appviewy, appvieww, appviewh);
    
    uiimageview *appviewimg=(uiimageview *)[appview viewwithtag:1];
    appviewimg.image=app.image;
    
    uilabel *appviewlab=(uilabel *)[appview viewwithtag:2];
    appviewlab.text=app.name;
    
    uibutton *appviewbtn=(uibutton *)[appview viewwithtag:3];
    [appviewbtn addtarget:self action:@selector(appviewbtnclick:) forcontrolevents:uicontroleventtouchupinside];
    appviewbtn.tag=i;
    
    [self.view addsubview:appview];
  }
}

/**按钮的点击事件*/
-(void)appviewbtnclick:(uibutton *)btn
{
  yyapp *apps=self.app[btn.tag];
  uilabel *showlab=[[uilabel alloc]initwithframe:cgrectmake(60, 450, 200, 20)];
  [showlab settext:[nsstring stringwithformat: @"%@下载成功",apps.name]];
  [showlab setbackgroundcolor:[uicolor lightgraycolor]];
  [self.view addsubview:showlab];
  showlab.alpha=1.0;
  
  //简单的动画效果
  [uiview animatewithduration:2.0 animations:^{
    showlab.alpha=0;
  } completion:^(bool finished) {
    [showlab removefromsuperview];
  }];
}

@end

运行效果:
iOS开发UI篇—xib的简单使用实例

三、对xib进行连线示例

1.连线示例

新建一个xib对应的视图类,继承自uiviewiOS开发UI篇—xib的简单使用实例
在xib界面右上角与新建的视图类进行关联iOS开发UI篇—xib的简单使用实例
把xib和视图类进行连线iOS开发UI篇—xib的简单使用实例
注意:在使用中把weak改成为强引用。否则...

2.连线后的代码示例

yyviewcontroller.m文件代码如下:

//
// yyviewcontroller.m
// 10-xib文件的使用
//
// created by apple on 14-5-24.
// copyright (c) 2014年 itcase. all rights reserved.
//

#import "yyviewcontroller.h"
#import "yyapp.h"
#import "yyappview.h"

@interface yyviewcontroller ()
@property(nonatomic,strong)nsarray *app;
@end

@implementation yyviewcontroller

//1.加载数据信息
-(nsarray *)app
{
  if (!_app) {
    nsstring *path=[[nsbundle mainbundle]pathforresource:@"app.plist" oftype:nil];
    nsarray *temparray=[nsarray arraywithcontentsoffile:path];
    
    //字典转模型
    nsmutablearray *arraym=[nsmutablearray array ];
    for (nsdictionary *dict in temparray) {
      [arraym addobject:[yyapp appwithdict:dict]];
    }
    _app=arraym;
  }
  return _app;
}

//创建界面原型
- (void)viewdidload
{
  [super viewdidload];
  nslog(@"%d",self.app.count);
  
  //九宫格布局
  int totalloc=3;
  cgfloat appvieww=80;
  cgfloat appviewh=90;
  cgfloat margin=(self.view.frame.size.width-totalloc*appvieww)/(totalloc+1);
  
  int count=self.app.count;
  for (int i=0; i<count; i++) {
    
    int row=i/totalloc;
    int loc=i%totalloc;
    cgfloat appviewx=margin + (margin +appvieww)*loc;
    cgfloat appviewy=margin + (margin +appviewh)*row;
    yyapp *app=self.app[i];
    
    //拿出xib视图
    nsarray *apparray= [[nsbundle mainbundle]loadnibnamed:@"appxib" owner:nil options:nil];
    
    //注意这里的类型名!
    //uiview *appview=[apparray firstobject];
    yyappview *appview=[apparray firstobject];
    
    //加载视图
    appview.frame=cgrectmake(appviewx, appviewy, appvieww, appviewh);
     [self.view addsubview:appview];
    
    appview.appimg.image=app.image;
    appview.applab.text=app.name;
    appview.appbtn.tag=i;
    
    [ appview.appbtn addtarget:self action:@selector(appviewbtnclick:) forcontrolevents:uicontroleventtouchupinside];
    
  }
}

/**按钮的点击事件*/
-(void)appviewbtnclick:(uibutton *)btn
{
  yyapp *apps=self.app[btn.tag];
  uilabel *showlab=[[uilabel alloc]initwithframe:cgrectmake(60, 450, 200, 20)];
  [showlab settext:[nsstring stringwithformat: @"%@下载成功",apps.name]];
  [showlab setbackgroundcolor:[uicolor lightgraycolor]];
  [self.view addsubview:showlab];
  showlab.alpha=1.0;
  
  //简单的动画效果
  [uiview animatewithduration:2.0 animations:^{
    showlab.alpha=0;
  } completion:^(bool finished) {
    [showlab removefromsuperview];
  }];
}

@end

yyappview.h文件代码(已经连线)

#import <uikit/uikit.h>

@interface yyappview : uiview
@property (strong, nonatomic) iboutlet uiimageview *appimg;
@property (strong, nonatomic) iboutlet uilabel *applab;
@property (strong, nonatomic) iboutlet uibutton *appbtn;
@end

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: