OS开发UI篇—xib的简单使用

OS开发UI篇—xib的简单使用

一、简单介绍

xib和storyboard的比较,一个轻量级一个重量级。

共同点:

都用来描述软件界面

都用Interface Builder工具来编辑

不同点:

Xib是轻量级的,用来描述局部的UI界面

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

二、xib的简单使用

1.建立xib文件

建立的xib文件命名为appxib.xib

2.对xib进行设置

  根据程序的需要,这里把view调整为自由布局

建立view模型(设置长宽等参数)

调整布局和内部的控件

完成后的单个view

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

YYViewController.m文件代码如下:

 1 //
 2 //  YYViewController.m
 3 //  10-xib文件的使用
 4 //
 5 //  Created by apple on 14-5-24.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8
 9 #import "YYViewController.h"
10 #import "YYapp.h"
11
12 @interface YYViewController ()
13 @property(nonatomic,strong)NSArray *app;
14 @end
15
16 @implementation YYViewController
17
18 //1.加载数据信息
19 -(NSArray *)app
20 {
21     if (!_app) {
22         NSString *path=[[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil];
23         NSArray *temparray=[NSArray arrayWithContentsOfFile:path];
24
25         //字典转模型
26         NSMutableArray *arrayM=[NSMutableArray array ];
27         for (NSDictionary *dict in temparray) {
28             [arrayM addObject:[YYapp appWithDict:dict]];
29         }
30         _app=arrayM;
31     }
32     return _app;
33 }
34
35 //创建界面原型
36 - (void)viewDidLoad
37 {
38     [super viewDidLoad];
39     NSLog(@"%d",self.app.count);
40
41     //九宫格布局
42     int totalloc=3;
43     CGFloat appviewW=80;
44     CGFloat appviewH=90;
45     CGFloat margin=(self.view.frame.size.width-totalloc*appviewW)/(totalloc+1);
46
47     int count=self.app.count;
48     for (int i=0; i<count; i++) {
49
50         int row=i/totalloc;
51         int loc=i%totalloc;
52         CGFloat appviewX=margin + (margin +appviewW)*loc;
53         CGFloat appviewY=margin + (margin +appviewH)*row;
54         YYapp *app=self.app[i];
55
56         //拿出xib视图
57        NSArray  *apparray= [[NSBundle mainBundle]loadNibNamed:@"appxib" owner:nil options:nil];
58         UIView *appview=[apparray firstObject];
59         //加载视图
60         appview.frame=CGRectMake(appviewX, appviewY, appviewW, appviewH);
61
62         UIImageView *appviewImg=(UIImageView *)[appview viewWithTag:1];
63         appviewImg.image=app.image;
64
65         UILabel *appviewlab=(UILabel *)[appview viewWithTag:2];
66         appviewlab.text=app.name;
67
68         UIButton *appviewbtn=(UIButton *)[appview viewWithTag:3];
69         [appviewbtn addTarget:self action:@selector(appviewbtnClick:) forControlEvents:UIControlEventTouchUpInside];
70         appviewbtn.tag=i;
71
72         [self.view addSubview:appview];
73     }
74 }
75
76 /**按钮的点击事件*/
77 -(void)appviewbtnClick:(UIButton *)btn
78 {
79     YYapp *apps=self.app[btn.tag];
80     UILabel *showlab=[[UILabel alloc]initWithFrame:CGRectMake(60, 450, 200, 20)];
81     [showlab setText:[NSString stringWithFormat: @"%@下载成功",apps.name]];
82     [showlab setBackgroundColor:[UIColor lightGrayColor]];
83     [self.view addSubview:showlab];
84     showlab.alpha=1.0;
85
86     //简单的动画效果
87     [UIView animateWithDuration:2.0 animations:^{
88         showlab.alpha=0;
89     } completion:^(BOOL finished) {
90         [showlab removeFromSuperview];
91     }];
92 }
93
94 @end

运行效果:

三、对xib进行连线示例

1.连线示例

新建一个xib对应的视图类,继承自Uiview


在xib界面右上角与新建的视图类进行关联

把xib和视图类进行连线

注意:在使用中把weak改成为强引用。否则...

2.连线后的代码示例

YYViewController.m文件代码如下:

 1 //
 2 //  YYViewController.m
 3 //  10-xib文件的使用
 4 //
 5 //  Created by apple on 14-5-24.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8
 9 #import "YYViewController.h"
10 #import "YYapp.h"
11 #import "YYappview.h"
12
13 @interface YYViewController ()
14 @property(nonatomic,strong)NSArray *app;
15 @end
16
17 @implementation YYViewController
18
19 //1.加载数据信息
20 -(NSArray *)app
21 {
22     if (!_app) {
23         NSString *path=[[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil];
24         NSArray *temparray=[NSArray arrayWithContentsOfFile:path];
25
26         //字典转模型
27         NSMutableArray *arrayM=[NSMutableArray array ];
28         for (NSDictionary *dict in temparray) {
29             [arrayM addObject:[YYapp appWithDict:dict]];
30         }
31         _app=arrayM;
32     }
33     return _app;
34 }
35
36 //创建界面原型
37 - (void)viewDidLoad
38 {
39     [super viewDidLoad];
40     NSLog(@"%d",self.app.count);
41
42     //九宫格布局
43     int totalloc=3;
44     CGFloat appviewW=80;
45     CGFloat appviewH=90;
46     CGFloat margin=(self.view.frame.size.width-totalloc*appviewW)/(totalloc+1);
47
48     int count=self.app.count;
49     for (int i=0; i<count; i++) {
50
51         int row=i/totalloc;
52         int loc=i%totalloc;
53         CGFloat appviewX=margin + (margin +appviewW)*loc;
54         CGFloat appviewY=margin + (margin +appviewH)*row;
55         YYapp *app=self.app[i];
56
57         //拿出xib视图
58        NSArray  *apparray= [[NSBundle mainBundle]loadNibNamed:@"appxib" owner:nil options:nil];
59
60         //注意这里的类型名!
61         //UIView *appview=[apparray firstObject];
62         YYappview  *appview=[apparray firstObject];
63
64         //加载视图
65         appview.frame=CGRectMake(appviewX, appviewY, appviewW, appviewH);
66           [self.view addSubview:appview];
67
68         appview.appimg.image=app.image;
69         appview.applab.text=app.name;
70         appview.appbtn.tag=i;
71
72         [ appview.appbtn addTarget:self action:@selector(appviewbtnClick:) forControlEvents:UIControlEventTouchUpInside];
73
74     }
75 }
76
77 /**按钮的点击事件*/
78 -(void)appviewbtnClick:(UIButton *)btn
79 {
80     YYapp *apps=self.app[btn.tag];
81     UILabel *showlab=[[UILabel alloc]initWithFrame:CGRectMake(60, 450, 200, 20)];
82     [showlab setText:[NSString stringWithFormat: @"%@下载成功",apps.name]];
83     [showlab setBackgroundColor:[UIColor lightGrayColor]];
84     [self.view addSubview:showlab];
85     showlab.alpha=1.0;
86
87     //简单的动画效果
88     [UIView animateWithDuration:2.0 animations:^{
89         showlab.alpha=0;
90     } completion:^(BOOL finished) {
91         [showlab removeFromSuperview];
92     }];
93 }
94
95 @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

 

时间: 2025-01-06 06:58:11

OS开发UI篇—xib的简单使用的相关文章

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

iOS开发UI篇—xib的简单使用 一.简单介绍 xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: Xib是轻量级的,用来描述局部的UI界面 Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系 二.xib的简单使用 1.建立xib文件 建立的xib文件命名为appxib.xib 2.对xib进行设置 根据程序的需要,这里把view调整为自由布局 建立vie

文顶顶 iOS开发UI篇—xib的简单使用

iOS开发UI篇—xib的简单使用 一.简单介绍 xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: Xib是轻量级的,用来描述局部的UI界面 Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系 二.xib的简单使用 1.建立xib文件 建立的xib文件命名为appxib.xib 2.对xib进行设置 根据程序的需要,这里把view调整为自由布局 建立vie

OS开发UI篇—ios应用数据存储方式(归档)

OS开发UI篇—ios应用数据存储方式(归档)  一.简单说明 在使用plist进行数据存储和读取,只适用于系统自带的一些常用类型才能用,且必须先获取路径相对麻烦: 偏好设置(将所有的东西都保存在同一个文件夹下面,且主要用于存储应用的设置信息) 归档:因为前两者都有一个致命的缺陷,只能存储常用的类型.归档可以实现把自定义的对象存放在文件中. 二.代码示例 1.文件结构 2.代码示例 YYViewController.m文件 1 // 2 // YYViewController.m 3 // 02

iOS开发UI篇—实现一个简单的手势解锁应用(基本)

iOS开发UI篇—实现一个简单的手势解锁应用(基本) 一.实现效果 实现效果图: 二.手势解锁应用分析 1.监听手指在view上的移动,首先肯定需要自定义一个view,重写touch began,touch move等方法,当手指移动到圈上时,让其变亮.可以通过button按钮来实现. 2.界面搭建 背景图片(给控制器的view添加一个imageview,设置属性背景图片) 九个按钮(把九个按钮作为一个整体,使用一个大的view来管理这些小的view,这些小的view就是9个button.如果使

OS开发UI篇—CALayer简介

OS开发UI篇-CALayer简介 一.简单介绍 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer; 当U

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

iOS开发UI基础-xib的简单使用 一.简单介绍 xib和stotyboard的比较,一个轻量级一个重量级. 二.xib的简单使用 1.建立xib文件 建立的xib文件命名为appxib.xib 2.对xib进行设置 根据程序的需要,这里把view调整为自由布局 建立view模型(设置长宽等参数) 调整布局和内部的控件 完成后的单个view 3.使用xib文件的代码示例 YYViewController.m文件代码如下: 1 // 2 // YYViewController.m 3 // 10

iOS开发UI篇—实现一个简单的手势解锁应用(完善)

iOS开发UI篇—实现一个简单的手势解锁应用(完善) 一.需要实现的效果 二.应用完善 1.绘制不处于按钮范围内的连线 2.解决bug(完善) bug1:如果在began方法中通知view绘图,那么会产生bug.因为,当前点没有清空,在手指移开之后要清空当前点.可以在绘制前进行判断,如果当前点是(0,0)那么就不划线.或者在began方法中不进行重绘. bug2:无限菊花.自定义view的背景色为默认的(黑色),只要重写了drawrect方法,view默认的背景颜色就是黑色的,因为上下文默认的颜

OS开发UI篇—popoverController使用注意

iOS开发UI篇—popoverController使用注意 一.设置尺寸 提示:不建议,像下面这样吧popover的宽度和高度写死. 1 //1.新建一个内容控制器 2 YYMenuViewController *menuVc=[[YYMenuViewController alloc]init]; 3 4 //2.新建一个popoverController,并设置其内容控制器 5 self.popover=[[UIPopoverController alloc]initWithContentV

OS开发UI篇—使用UItableview完成一个简单的QQ好友列表

本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.实现效果             二.实现代码 1.数据模型部分 YYQQGroupModel.h文件 1 // 2 // YYQQGroupModel.h 3 // 02-QQ好友列表(基本数据的加载) 4 // 5 // Created by apple on 14-5-31. 6 // Copyright (c) 2014年 itcase. All rights reserve