背景交待
項目中好多時候都會用到標簽欄,網易新聞/內涵段子/百思不得姐....等等.
IMG_0364.PNG
代碼部分
首先定義一個 VIew 把標簽欄封裝起來,方便以后的使用.
定義一個 View : SegmentControlView.h 中
@property (copy, nonatomic) NSArray *titleArray;// 存放標簽的數組
@property (nonatomic, copy) void(^IndexChangeBlock )(NSInteger index);// 定義一個 block 監聽點擊 進行回傳
/** 設置選中第幾個*/
- (void)setSelectedSegmentIndex:(NSUInteger)index animated:(BOOL)animated ;
SegmentControlView.m 中
把一個 CollectionView 寫成成員變量,
@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;
}
實現代理-數據源方法
// 懶加載數據源
-(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;
}
// 根據文字長度計算 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];
}
/**
* 計算 label 高度的一般的自適應
*
* @param font 字號
* @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;
}
自定義一個 xib cell
BD3ECA67-8C06-4BB2-940E-95ED8559040A.png
一個 label + ImageView 都是居中 (根據自己實際項目需求適當調整,我這個僅是選中狀態有一個白色邊框)
cell .m 中
588C5E36-340E-4396-9980-6415095EB375.png
cell.h 中
FB3FF3D4-AA3F-4C2B-AB90-F87AACBF44F6.png
使用:
怎么使用呢? 很簡單把剛才創建的四個文件導入你的工程就可以使用了
![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 = @[@"標簽1",@"標簽2",@"標簽3",@"標簽4",@"標簽5",@"標簽6",@"標簽7",];
[self.titleSegView setSelectedSegmentIndex:0 animated:YES];
__weak typeof(self) weakSelf = self;
self.titleSegView.IndexChangeBlock = ^(NSInteger index){// 點擊切換
CGPoint offset = weakSelf.mainScrollview.contentOffset;
offset.x = index * screen_width;
[weakSelf.mainScrollview setContentOffset:offset animated:YES];
};
// 創建一個 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];
}
實現 scrollView 的代理方法
#pragma mark - UIScrollViewDelegate
// 滑動切換
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
CGFloat pageWidth = scrollView.frame.size.width;
NSInteger page = scrollView.contentOffset.x / pageWidth;
[self.titleSegView setSelectedSegmentIndex:page animated:YES];
}
運行的效果圖
DB211.gif
代碼下載
