ios实战开发之xib基本介绍

Sian

1、效果演示




2、基本思路
2.1 使用storyboard将基本框架画出来，如图所示



2.2 新建一个xib，在xib中创建好需要添加到联系人列表的元素，实质为创建一个类(如RowView)，将每行联系人记录当作一个对象处理
2.3 将RowView类创建一个初始化的类方法供外界调用，视图中的各个元素可通过类成员变量的形式展示并供外界访问

2.4 添加到主视图的哪个位置，添加及删除以何种形式进行这些都在主视图类中完成，封装思想；

3、关键代码

RowView.xib



SARowView.h

1. //
2. //  SARowView.h
3. //  ContactList
4. //
5. //  Created by yusian on 14-3-29.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
11. @interface SARowView : UIView
13. // 将xib上的三个子视图分别创建为该类的成员变量
14. @property (weak, nonatomic) IBOutlet UIButton *iconButton;
15. @property (weak, nonatomic) IBOutlet UILabel *nameLabel;
16. @property (weak, nonatomic) IBOutlet UIButton *deleteButton;
18. // 提供一个类方法将xib提供给外界使用，并提供两个参数初始化对象
19. + (id)rowViewWithIcon:(NSString *)iconName andLabelName:(NSString *)labelName;
21. @end

复制代码

SARowView.m

1. //
2. //  SARowView.m
3. //  ContactList
4. //
5. //  Created by yusian on 14-3-29.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SARowView.h"
11. @implementation SARowView
13. + (id)rowViewWithIcon:(NSString *)iconName andLabelName:(NSString *)labelName
14. {
15.     // 利用xib将绘制好的视图提供给方法调用者，并将视图中的元素(头像图片名、Label文件内容)通过参数的方式提供给外界访问
16.     SARowView *view = [[NSBundle mainBundle] loadNibNamed:@"RowView" owner:nil options:nil][0];
17.     [view.iconButton setImage:[UIImage imageNamed:iconName] forState:UIControlStateNormal];
18.     view.nameLabel.text = labelName;
20.     return view;
21. }
23. @end

复制代码

SAViewController.h

1. //
2. //  SAViewController.h
3. //  ContactList
4. //
5. //  Created by yusian on 14-3-28.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
11. @interface SAViewController : UIViewController
13. @property (weak, nonatomic) IBOutlet UIBarButtonItem *removeItem;
15. - (IBAction)add:(UIBarButtonItem *)sender;  // 增加一行
16. - (IBAction)remove:(UIBarButtonItem *)sender;   // 删除一行
18. @end

复制代码

SAViewController.m

1. //
2. //  SAViewController.m
3. //  ContactList
4. //
5. //  Created by yusian on 14-3-28.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SAViewController.h"
10. #import "SARowView.h"
11. #define kSubviewHeight 50
13. // 类扩展(class extension，匿名分类)
14. @interface SAViewController ()
15. {
16.     NSArray *_nameIndex;
17. }
18. @end
20. @implementation SAViewController
22. -(void)viewDidLoad
23. {
24.     [super viewDidLoad];
25.     _nameIndex = @[@"赵一", @"钱二", @"孙三", @"李四", @"周五", @"吴六", @"郑七", @"王八", @"张九", @"余十"];
26. }
28. #pragma mark 增加联系人
29. - (IBAction)add:(UIBarButtonItem *)sender {
30.    
31.     self.removeItem.enabled = YES;  // 只要触发添加联系人事件，即将删除按钮可用性设置为enable
32.     int random = arc4random_uniform(9); // 创建0-9十个随机数；
33.     NSString *imageName = [NSString stringWithFormat:@"%d.png", random];    //利用随机数创建十张随机图片
34.     NSString *labelName = _nameIndex[random];   // 从_nameIndex(viewDidLoad中有定义)数组中取出随机取出一个字符串
35.    
36.     // 创建一个SARowView类型的视图，并初始化icon和labelName随机
37.     SARowView *subview = [SARowView rowViewWithIcon:imageName andLabelName:labelName];
39.     // 确定subView摆放位置，即新添加的subView为上一个子控件(subViews的最后一个子控件)的y值加控件高度
40.     UIView *lastObject = [self.view.subviews lastObject];   // 取出最后一个子控件
41.     CGFloat lastObjHeight = lastObject.frame.size.height;   // 最后一个子控件的高度
42.     CGFloat lastObjY = lastObject.frame.origin.y;   // 最后一个子控件的y值
43.     CGFloat superviewWidth = self.view.frame.size.width;    // 父控件的宽度
44.     CGFloat animateDistance = kSubviewHeight;   // 动画移动距离
45.     CGFloat subviewY = lastObjY + lastObjHeight + 1 + animateDistance;  // 新添加子控件的y值
46.     subview.frame = CGRectMake(0, subviewY, superviewWidth, kSubviewHeight);    // 初始化子控件位置
47.     subview.alpha = 0;  // 初始化子控件透明度为100%，为动画淡出效果做准备
48.    
49.     // 动画范围，{}内的数据变动将以动画形式完成
50.     [UIView animateWithDuration:0.5 animations:^{
51.         
52.         // 该subView的y值上移一个动画移动距离，经过动画移动到该放的位置
53.         CGRect tempRect = subview.frame;
54.         tempRect.origin.y -= animateDistance;
55.         subview.frame = tempRect;
56.         
57.         // 将透明度设置为1，淡出效果
58.         subview.alpha = 1;
59.         
60.     }];
61.    
62.     // 添加到View
63.     [self.view addSubview:subview];
64.     // 添加两个按钮事件(头像点击与删除键点击)
65.     [subview.iconButton addTarget:self action:@selector(iconClink:) forControlEvents:UIControlEventTouchUpInside];
66.     [subview.deleteButton addTarget:self action:@selector(deleteClick:) forControlEvents:UIControlEventTouchUpInside];
67. }
69. #pragma mark 删除联系人
70. - (IBAction)remove:(UIBarButtonItem *)sender {
71.    
72.     // 取出最后一个UIView元素
73.     UIView *lastSubview = [self.view.subviews lastObject];
74.    
75.     // 以下代码均为动画演示代码相关
76.     CGRect lastRect = lastSubview.frame;
77.     lastRect.origin.y = self.view.frame.size.height;
78.     [UIView animateWithDuration:0.5 animations:^{
79.         lastSubview.frame = lastRect;   // 最终动画效果下移到整个视图最底端并淡出；
80.         lastSubview.alpha = 0;
81.     } completion:^(BOOL finished) {
82.         
83.         // 删除最后一个UIView元素，
84.         [lastSubview removeFromSuperview];
85.         self.removeItem.enabled = self.view.subviews.count > 1; // 判断如果只剩下UIToolBar了，则将删除按钮变灰
86.     }];
87.    
88. }
90. #pragma mark 联系人头像按钮
91. - (void)iconClink:(UIButton *)sender
92. {
93.     // 如果点击了头像按钮，则打印出当前头像所在视图的nameLabelmwpq
94.     SARowView *superView = (SARowView *)sender.superview;
95.     NSLog(@"%@", superView.nameLabel.text);
96. }
98. #pragma mark 联系人删除按钮
99. - (void)deleteClick:(UIButton *)btn
100. {
101.     //**********动画淡出删除效果开始******
102.    
103.     [UIView animateWithDuration:0.5 animations:^{
104.         CGRect tempF = btn.superview.frame;
105.         tempF.origin.x += 320;
106.         btn.superview.frame = tempF;
107.         btn.superview.alpha = 0;
108.     } completion:^(BOOL finished) {
109.         
110.     //**********动画结束*****************
111.    
112.         //删除中间某行后，后续行往上移一个行距，嵌套一个动画
113.         [UIView animateWithDuration:0.5 animations:^{
114.             NSInteger index = [self.view.subviews indexOfObject:btn.superview];
115.             
116.             // 对象方法将自己从父视图中移出
117.             [btn.superview removeFromSuperview];
118.             self.removeItem.enabled = self.view.subviews.count > 1; // 判断当前是否为最后一个子控件，是否将删除键变灰
119.             
120.             // 利用循环将后续所有的对象往上移动一个行间距
121.             for (NSInteger i = index; i < self.view.subviews.count; i++) {
122.                 UIView *temp = self.view.subviews[i];
123.                 CGRect tempFrame = temp.frame;
124.                 tempFrame.origin.y -= 51;
125.                 temp.frame = tempFrame;
126.             }
127.         }];
128.     }];
129. }
131. @end

复制代码

4、源代码下载

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0

5、参考链接
图片与按钮示例：ios实战开发之汤姆猫
ios实战开发之UISegmentedControl