ios实战开发之xib基本介绍
1、效果演示http://player.youku.com/player.php/sid/XNjkxOTQ3ODUy/v.swf
2、基本思路
2.1 使用storyboard将基本框架画出来，如图所示
2.2 新建一个xib，在xib中创建好需要添加到联系人列表的元素，实质为创建一个类(如RowView)，将每行联系人记录当作一个对象处理
2.3 将RowView类创建一个初始化的类方法供外界调用，视图中的各个元素可通过类成员变量的形式展示并供外界访问
2.4 添加到主视图的哪个位置，添加及删除以何种形式进行这些都在主视图类中完成，封装思想；
3、关键代码
RowView.xib
SARowView.h
//
//SARowView.h
//ContactList
//
//Created by yusian on 14-3-29.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface SARowView : UIView
// 将xib上的三个子视图分别创建为该类的成员变量
@property (weak, nonatomic) IBOutlet UIButton *iconButton;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UIButton *deleteButton;
// 提供一个类方法将xib提供给外界使用，并提供两个参数初始化对象
+ (id)rowViewWithIcon:(NSString *)iconName andLabelName:(NSString *)labelName;
@end
SARowView.m
//
//SARowView.m
//ContactList
//
//Created by yusian on 14-3-29.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import "SARowView.h"
@implementation SARowView
+ (id)rowViewWithIcon:(NSString *)iconName andLabelName:(NSString *)labelName
{
// 利用xib将绘制好的视图提供给方法调用者，并将视图中的元素(头像图片名、Label文件内容)通过参数的方式提供给外界访问
SARowView *view = [ loadNibNamed:@"RowView" owner:nil options:nil];
forState:UIControlStateNormal];
view.nameLabel.text = labelName;
return view;
}
@end
SAViewController.h
//
//SAViewController.h
//ContactList
//
//Created by yusian on 14-3-28.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface SAViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIBarButtonItem *removeItem;
- (IBAction)add:(UIBarButtonItem *)sender;// 增加一行
- (IBAction)remove:(UIBarButtonItem *)sender; // 删除一行
@end
SAViewController.m
//
//SAViewController.m
//ContactList
//
//Created by yusian on 14-3-28.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import "SAViewController.h"
#import "SARowView.h"
#define kSubviewHeight 50
// 类扩展(class extension，匿名分类)
@interface SAViewController ()
{
NSArray *_nameIndex;
}
@end
@implementation SAViewController
-(void)viewDidLoad
{
;
_nameIndex = @[@"赵一", @"钱二", @"孙三", @"李四", @"周五", @"吴六", @"郑七", @"王八", @"张九", @"余十"];
}
#pragma mark 增加联系人
- (IBAction)add:(UIBarButtonItem *)sender {
self.removeItem.enabled = YES;// 只要触发添加联系人事件，即将删除按钮可用性设置为enable
int random = arc4random_uniform(9); // 创建0-9十个随机数；
NSString *imageName = ; //利用随机数创建十张随机图片
NSString *labelName = _nameIndex; // 从_nameIndex(viewDidLoad中有定义)数组中取出随机取出一个字符串
// 创建一个SARowView类型的视图，并初始化icon和labelName随机
SARowView *subview = ;
// 确定subView摆放位置，即新添加的subView为上一个子控件(subViews的最后一个子控件)的y值加控件高度
UIView *lastObject = ; // 取出最后一个子控件
CGFloat lastObjHeight = lastObject.frame.size.height; // 最后一个子控件的高度
CGFloat lastObjY = lastObject.frame.origin.y; // 最后一个子控件的y值
CGFloat superviewWidth = self.view.frame.size.width; // 父控件的宽度
CGFloat animateDistance = kSubviewHeight; // 动画移动距离
CGFloat subviewY = lastObjY + lastObjHeight + 1 + animateDistance;// 新添加子控件的y值
subview.frame = CGRectMake(0, subviewY, superviewWidth, kSubviewHeight); // 初始化子控件位置
subview.alpha = 0;// 初始化子控件透明度为100%，为动画淡出效果做准备
// 动画范围，{}内的数据变动将以动画形式完成
[UIView animateWithDuration:0.5 animations:^{
// 该subView的y值上移一个动画移动距离，经过动画移动到该放的位置
CGRect tempRect = subview.frame;
tempRect.origin.y -= animateDistance;
subview.frame = tempRect;
// 将透明度设置为1，淡出效果
subview.alpha = 1;
}];
// 添加到View
;
// 添加两个按钮事件(头像点击与删除键点击)
;
;
}
#pragma mark 删除联系人
- (IBAction)remove:(UIBarButtonItem *)sender {
// 取出最后一个UIView元素
UIView *lastSubview = ;
// 以下代码均为动画演示代码相关
CGRect lastRect = lastSubview.frame;
lastRect.origin.y = self.view.frame.size.height;
[UIView animateWithDuration:0.5 animations:^{
lastSubview.frame = lastRect; // 最终动画效果下移到整个视图最底端并淡出；
lastSubview.alpha = 0;
} completion:^(BOOL finished) {
// 删除最后一个UIView元素，
;
self.removeItem.enabled = self.view.subviews.count > 1; // 判断如果只剩下UIToolBar了，则将删除按钮变灰
}];
}
#pragma mark 联系人头像按钮
- (void)iconClink:(UIButton *)sender
{
// 如果点击了头像按钮，则打印出当前头像所在视图的nameLabelmwpq
SARowView *superView = (SARowView *)sender.superview;
NSLog(@"%@", superView.nameLabel.text);
}
#pragma mark 联系人删除按钮
- (void)deleteClick:(UIButton *)btn
{
//**********动画淡出删除效果开始******
[UIView animateWithDuration:0.5 animations:^{
CGRect tempF = btn.superview.frame;
tempF.origin.x += 320;
btn.superview.frame = tempF;
btn.superview.alpha = 0;
} completion:^(BOOL finished) {
//**********动画结束*****************
//删除中间某行后，后续行往上移一个行距，嵌套一个动画
[UIView animateWithDuration:0.5 animations:^{
NSInteger index = ;
// 对象方法将自己从父视图中移出
;
self.removeItem.enabled = self.view.subviews.count > 1; // 判断当前是否为最后一个子控件，是否将删除键变灰
// 利用循环将后续所有的对象往上移动一个行间距
for (NSInteger i = index; i < self.view.subviews.count; i++) {
UIView *temp = self.view.subviews;
CGRect tempFrame = temp.frame;
tempFrame.origin.y -= 51;
temp.frame = tempFrame;
}
}];
}];
}
@end
4、源代码下载
**** Hidden Message *****
5、参考链接
图片与按钮示例：ios实战开发之汤姆猫
ios实战开发之UISegmentedControl
页:
[1]