背景交待
項(xiàng)目中好多時(shí)候都會(huì)用到標(biāo)簽欄,網(wǎng)易新聞/內(nèi)涵段子/百思不得姐....等等.
IMG_0364.PNG
代碼部分
首先定義一個(gè) VIew 把標(biāo)簽欄封裝起來(lái),方便以后的使用.
定義一個(gè) View : SegmentControlView.h 中
@property (copy, nonatomic) NSArray *titleArray;// 存放標(biāo)簽的數(shù)組
@property (nonatomic, copy) void(^IndexChangeBlock )(NSInteger index);// 定義一個(gè) block 監(jiān)聽(tīng)點(diǎn)擊 進(jìn)行回傳
/** 設(shè)置選中第幾個(gè)*/
- (void)setSelectedSegmentIndex:(NSUInteger)index animated:(BOOL)animated ;
SegmentControlView.m 中
把一個(gè) CollectionView 寫(xiě)成成員變量,
@property (strong, nonatomic) UICollectionView *titleCollectionView;
init中
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.minimumInteritemSpacing = 0;
flowLayout.minimumLineSpacing = 0;
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.titleCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height) collectionViewLayout:flowLayout];
[self.titleCollectionView registerNib:[UINib nibWithNibName:@"SegmentCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:reuseIdentifier];
self.titleCollectionView.delegate = self;
self.titleCollectionView.dataSource = self;
self.titleCollectionView.bounces = NO;
self.titleCollectionView.backgroundColor = [UIColor colorWithHexString:NavColorHexString];
self.titleCollectionView.showsHorizontalScrollIndicator = NO;
[self addSubview:self.titleCollectionView];
}
return self;
}
實(shí)現(xiàn)代理-數(shù)據(jù)源方法
// 懶加載數(shù)據(jù)源
-(NSArray *)titleArray
{
if (!_titleArray) {
self.titleArray = [NSArray array];
}
return _titleArray;
}
- (void)setSelectedSegmentIndex:(NSUInteger)index animated:(BOOL)animated {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:0];
[self.titleCollectionView selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally];
}
#pragma mark - <UICollectionViewDelegate,UICollectionViewDataSource>
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
NSLog(@"%ld",self.titleArray.count);
return self.titleArray.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
SegmentCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
cell.title = self.titleArray[indexPath.row];
return cell;
}
// 根據(jù)文字長(zhǎng)度計(jì)算 size
- (CGSize )collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
CGSize itemSize = [self.titleArray[indexPath.row] getStringSize:[UIFont systemFontOfSize:14] width:self.bounds.size.width];
return CGSizeMake(itemSize.width + 20, itemSize.height + 20);
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
if (self.IndexChangeBlock) {
self.IndexChangeBlock(indexPath.row);
}
[self.titleCollectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
}
/**
* 計(jì)算 label 高度的一般的自適應(yīng)
*
* @param font 字號(hào)
* @param width 寬度
*
* @return size
*/
- (CGSize)getStringSize:(UIFont*)font width:(CGFloat)width
{
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:self];
NSDictionary *attrSyleDict = [[NSDictionary alloc] initWithObjectsAndKeys:
font, NSFontAttributeName,
nil];
[attributedString addAttributes:attrSyleDict
range:NSMakeRange(0, self.length)];
CGRect stringRect = [attributedString boundingRectWithSize:CGSizeMake(width, MAXFLOAT)
options:NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
context:nil];
return stringRect.size;
}
自定義一個(gè) xib cell
BD3ECA67-8C06-4BB2-940E-95ED8559040A.png
一個(gè) label + ImageView 都是居中 (根據(jù)自己實(shí)際項(xiàng)目需求適當(dāng)調(diào)整,我這個(gè)僅是選中狀態(tài)有一個(gè)白色邊框)
cell .m 中
588C5E36-340E-4396-9980-6415095EB375.png
cell.h 中
FB3FF3D4-AA3F-4C2B-AB90-F87AACBF44F6.png
使用:
怎么使用呢? 很簡(jiǎn)單把剛才創(chuàng)建的四個(gè)文件導(dǎo)入你的工程就可以使用了
![Uploading 屏幕快照 2016-04-11 下午5.26.27_802064.png . . .]
然后在你的 viewDidLoad 中 初始化
self.automaticallyAdjustsScrollViewInsets = NO;
CGFloat screen_width = self.view.bounds.size.width;
_titleSegView = [[SegmentControlView alloc] initWithFrame:CGRectMake(0, 64, screen_width, 55)];
self.titleSegView.backgroundColor = [UIColor blueColor];
[self.view addSubview:_titleSegView];
self.titleSegView.titleArray = @[@"標(biāo)簽1",@"標(biāo)簽2",@"標(biāo)簽3",@"標(biāo)簽4",@"標(biāo)簽5",@"標(biāo)簽6",@"標(biāo)簽7",];
[self.titleSegView setSelectedSegmentIndex:0 animated:YES];
__weak typeof(self) weakSelf = self;
self.titleSegView.IndexChangeBlock = ^(NSInteger index){// 點(diǎn)擊切換
CGPoint offset = weakSelf.mainScrollview.contentOffset;
offset.x = index * screen_width;
[weakSelf.mainScrollview setContentOffset:offset animated:YES];
};
// 創(chuàng)建一個(gè) scrollView
_mainScrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_titleSegView.frame), screen_width, self.view.bounds.size.height - 110)];
self.mainScrollview.pagingEnabled = YES;
self.mainScrollview.showsHorizontalScrollIndicator = NO;
self.mainScrollview.showsVerticalScrollIndicator = NO;
self.mainScrollview.contentSize = CGSizeMake(screen_width * self.titleSegView.titleArray.count, self.view.bounds.size.height - 110);
self.mainScrollview.delegate = self;
self.mainScrollview.bounces = NO;
[self.view addSubview:_mainScrollview];
for (NSInteger i=0 ;i < self.titleSegView.titleArray.count ; i ++) {
UILabel *label1 = [UILabel new];
label1.frame = CGRectMake(i *screen_width, 50, 100, 100);
label1.backgroundColor = [UIColor redColor];
[self.mainScrollview addSubview:label1];
}
實(shí)現(xiàn) scrollView 的代理方法
#pragma mark - UIScrollViewDelegate
// 滑動(dòng)切換
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
CGFloat pageWidth = scrollView.frame.size.width;
NSInteger page = scrollView.contentOffset.x / pageWidth;
[self.titleSegView setSelectedSegmentIndex:page animated:YES];
}
運(yùn)行的效果圖
DB211.gif
代碼下載
