一、效果图
客户端开发过程中，我们有很大几率用到下图所示书签栏，这里是模仿的腾讯新闻的切换效果。头部支持文字和图片两种格式，头部区域右侧可以添加编辑按钮。gitHub地址：MarkBook书签栏 iOS
视频地址：
MarkBookView演示视频
二、实现原理
书签栏分为两部分，头部标签区域和下部内容区域，采用的都是CollectionView，通过代理的形式提供数据源和设置样式，其中内容区使用的是控制器的view，具体请看使用说明部分，代理方法如下，通过名字就可以猜到意思了，这里不再叙述。
//BookMarkViewDelegate
@protocolBookMarkViewDelegate
@optional
//头部->非选中
- (void)bookMarkView:(BookMarkView*)bookmarkView cellForIndexPath:(NSIndexPath*)indexPath configNormalBookMarkHeadItemCell:(BookMarkHeadItemCell*)bookMarkHeadItemCell;
//头部->选中
- (void)bookMarkView:(BookMarkView*)bookmarkView cellForIndexPath:(NSIndexPath*)indexPath configSelectBookMarkHeadItemCell:(BookMarkHeadItemCell*)bookMarkHeadItemCell;
//头部size
- (CGSize)bookMarkView:(BookMarkView*)bookmarkView itemSizeForIndexPath:(NSIndexPath*)indexPath;
//内容size
- (CGSize)bookMarkView:(BookMarkView*)bookmarkView contentSizeForIndexPath:(NSIndexPath*)indexPath;
//头部选中的回调
- (void)bookMarkView:(BookMarkView*)bookmarkView didSelectIndexPath:(NSIndexPath*)indexPath;
//重复点击同一个的事件
- (void)bookMarkView:(BookMarkView*)bookmarkView didSelectSameIndexPath:(NSIndexPath*)indexPath;
//点击edit的事件
- (void)bookMarkViewEditBookItem:(BookMarkView*)bookmarkView;
@end
//BookMarkViewDataSource
@protocolBookMarkViewDataSource
@required
//头部的数据源
- (NSMutableArray*)bookMarkViewHeaderItems:(BookMarkView*)bookmarkView;
//内容数据源
- (NSMutableArray*)bookMarkViewContentViewItems:(BookMarkView*)bookmarkView;
//内容的设置
- (void)bookMarkView:(BookMarkView*)bookmarkView cellForIndexPath:(NSIndexPath*)indexPath configBookContentItemCell:(BookMarkContentItemCell*)bookmarkContentCell;
@end
三、使用说明
由于下部使用的是控制器的view，所以我们在创建数据源的时候使用两个数组，一个存放头部对象，一个存放内容控制器。
ProgramModel *program = [[ProgramModel alloc] init];
program.programId= [NSStringstringWithFormat:@"1000_%ld", i];
program.title= [NSStringstringWithFormat:@"频道_%ld", i +1];
[self.bookmarkHeaditemsArray addObject:program];
ProgramListViewController *programVC = [[ProgramListViewController alloc] init];
[self.bookmarkContentItemsArray addObject:programVC];
有了这两部分的数据源我们只需要在代理方法中设置就可以了。
#pragma mark- BookMarkView的代理
//头部的数据源
- (NSMutableArray*)bookMarkViewHeaderItems:(BookMarkView*)bookmarkView {
return self.bookmarkHeaditemsArray;
}
//头部非选中
- (void)bookMarkView:(BookMarkView*)bookmarkView cellForIndexPath:(NSIndexPath*)indexPath configNormalBookMarkHeadItemCell:(BookMarkHeadItemCell*)bookMarkHeadItemCell {
ProgramModel *item = [self.bookmarkHeaditemsArray objectAtIndex:indexPath.row];
if (item.normalChannelImage) {
bookMarkHeadItemCell.imageView.image= [UIImageimageNamed:item.normalChannelImage];
[bookMarkHeadItemCell.titleLablesetHidden:YES];
[bookMarkHeadItemCell.imageViewsetHidden:NO];
}else{
[bookMarkHeadItemCell.titleLablesetHidden:NO];
[bookMarkHeadItemCell.imageViewsetHidden:YES];
bookMarkHeadItemCell.titleLable.text= item.title;
bookMarkHeadItemCell.titleLable.textColor= [UIColorlightGrayColor]
}
}
//头部选中
- (void)bookMarkView:(BookMarkView*)bookmarkView cellForIndexPath:(NSIndexPath*)indexPath configSelectBookMarkHeadItemCell:(BookMarkHeadItemCell*)bookMarkHeadItemCell {
ProgramModel *item = [self.bookmarkHeaditemsArray objectAtIndex:indexPath.row];
if (item.normalChannelImage) {
bookMarkHeadItemCell.imageView.image= [UIImageimageNamed:item.selectedChannelImage];
[bookMarkHeadItemCell.titleLablesetHidden:YES];
[bookMarkHeadItemCell.imageViewsetHidden:NO];
}else{
[bookMarkHeadItemCell.titleLablesetHidden:NO];
[bookMarkHeadItemCell.imageViewsetHidden:YES];
bookMarkHeadItemCell.titleLable.text= item.title;
bookMarkHeadItemCell.titleLable.textColor= [UIColorblackColor];
}
}
//头部size
- (CGSize)bookMarkView:(BookMarkView*)bookmarkView itemSizeForIndexPath:(NSIndexPath*)indexPath {
ProgramModel *item = [self.bookmarkHeaditemsArray objectAtIndex:indexPath.row];
if (item.normalChannelImage) {
return CGSizeMake(BookHeadCellImageWidth, 40);
}else{
return CGSizeMake(BookHeadCellTextWidth, 40)
}
}
//内容数据源
- (NSMutableArray*)bookMarkViewContentViewItems:(BookMarkView*)bookmarkView {
return self.bookmarkContentItemsArray;
}
//内容的设置
- (void)bookMarkView:(BookMarkView*)bookmarkView cellForIndexPath:(NSIndexPath*)indexPath configBookContentItemCell:(BookMarkContentItemCell*)bookmarkContentCell {
UIViewController*vc = [self.bookmarkContentItemsArrayobjectAtIndex:indexPath.row];
bookmarkContentCell.globalView= vc.view;
}
//内容的大小
- (CGSize)bookMarkView:(BookMarkView*)bookmarkView contentSizeForIndexPath:(NSIndexPath*)indexPath {
return CGSizeMake(DeviceWidth, DeviceHeight - 64 - 40);
}
//点中的回调
- (void)bookMarkView:(BookMarkView*)bookmarkView didSelectIndexPath:(NSIndexPath*)indexPath {
}
具体可以到gitHub下载查看，使用方法跟TableView的代理方法很像。另外编辑的功能后续会实现。
//编辑操作（待实现）
//删除
//- (void)deleteItemWithIndex:(NSInteger *)index;
//交换
//- (void)exchangeItemFormIndex:(NSInteger)formIndex toIndex:(NSInteger)toIndex;
//添加
//- (void)addItemWithHeadItem:(NSObject *)headItem withContentItem:(NSObject *)contentItem atIndex:(NSInteger)atIndex;
网友评论