這篇文章主要爲大家詳細介紹了iOS自定義可展示、交互的scrollView滾動條,具有一定的參考價值,感興趣的小夥伴們可以參考一下
上一篇簡述了封裝上拉、下拉刷新控件,本篇在此基礎上添加了一個自定義的scrollView滾動條,可展示、交互,首先看一下效果圖:
簡單闡述一下實現邏輯:自定義滾動條視圖繼承UIView,添加滾動條滑動事件、其他區域點擊事件,通過代理方法與列表關聯。在列表刷新完成及scrollView代理方法中更新滾動條。
簡單說一下計算邏輯,如上圖(原諒博主的圖)所示,其中b、c、d是已知的。首先計算滾動條的高度a,理想情況下它與整個滾動區域b的比值應該等於scrollView的展示區域b與scrollView的內容高度d的比值,就是 a/b = b/d,即 a = b*b/d,也是就代碼中的“_scrollBar.barHeight = pow(tableView.bounds.size.height,2) / tableView.contentSize.height;”這句話。
既然是理想情況,就有特殊情況,首先如果內容高度d小於展示區域b,就是說不需要滑動時,這裏可以有兩種處理,第一種是隱藏滾動條,第二種是將滾動條高度設爲與滾動區域一致,方便觀察,這裏使用後一種。還有一種特殊情況就是,如果內容區域d無限增大,則滾動條高度a無限減小,所以需要給定一個最小高度限制。
好了,上面計算出滾動條高度a,然後計算滾動條Y向位置x,很容易看出來 x/b = c/d,正常情況下這是沒有問題的,但是當滾動條高度非常小,小於我們設定的最小高度時就會有誤差,那麼換另一種寫法 x/(b-a) = c/(d-b),即 x = (b-a)*c/(d-b),代碼中“_scrollBar.yPosition = (_scrollBar.bounds.size.height - _scrollBar.barHeight) *_tableView.contentOffset.y / (_tableView.contentSize.height -_scrollBar.bounds.size.height);”這句話。那麼在scrollView代理方法中更新這兩項就實現了滾動條高度根據scrollView內容增減,並根據scrollView滑動而移動。
最後在我們自定義滾動條的代理方法中設置scrollView的contentOffset,即可實現scrollView隨着滾動條的點擊滑動而移動。計算方法與上面一致 x/(b-a) = c/(d-b),區別是這次動條Y向位置x是已知的,scrollView的Y向偏移量c是未知的,即 c = (d-b)*x/(b-a),代碼中“[_tableViewsetContentOffset:CGPointMake(0, (_tableView.contentSize.height -_scrollBar.bounds.size.height) * scrollBar.yPosition / (_scrollBar.bounds.size.height - _scrollBar.barHeight))];”這句話。
下面貼上相關代碼:
控制器ViewController:
#import <UIKit/UIKit.h> @interface ViewController : UIViewController @end /*** ---------------分割線--------------- ***/ #import "ViewController.h" #import "HWRefresh.h" #import "HWScrollBar.h" @interface ViewController ()<UITableViewDataSource, UITableViewDelegate, HWScrollBarDelegate> @property (nonatomic, strong) NSMutableArray *array; @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, weak) HWScrollBar *scrollBar; @property (nonatomic, weak) HWScrollBar *tableBar; @property (nonatomic, assign) NSInteger page; @end @implementation ViewController - (NSMutableArray *)array { if (!_array) { _array = [NSMutableArray array]; } return _array; } - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor blackColor]; self.page = 1; //模擬獲取信息 [self getInfo]; //創建控件 [self creatControl]; //添加頭部刷新 [self addHeaderRefresh]; //添加尾部刷新 [self addFooterRefresh]; } - (void)getInfo { NSArray *array = @[@"iOS HERO博客", @"iOS HERO博客", @"iOS HERO博客", @"iOS HERO博客", @"http://blog.csdn.net/hero_wqb", @"iOS HERO博客", @"iOS HERO博客", @"iOS HERO博客", @"iOS HERO博客", @"http://blog.csdn.net/hero_wqb"]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ if (self.page == 1) { self.array = [NSMutableArray arrayWithArray:array]; }else{ [self.array addObjectsFromArray:array]; } [_tableView reloadData]; [_tableView headerEndRefreshing]; [_tableView footerEndRefreshing]; NSLog(@"已經刷新好了"); }); } - (void)creatControl { //列表視圖 _tableView = [[UITableView alloc] initWithFrame:CGRectMake(20, 64, [[UIScreen mainScreen] bounds].size.width - 100, [[UIScreen mainScreen] bounds].size.height - 164) style:UITableViewStylePlain]; _tableView.dataSource = self; _tableView.delegate = self; [self.view addSubview:_tableView]; //滾動展示條 HWScrollBar *tableBar = [[HWScrollBar alloc] initWithFrame:CGRectMake(CGRectGetMaxX(_tableView.frame), CGRectGetMinY(_tableView.frame), 5, _tableView.bounds.size.height)]; tableBar.foreColor = [UIColor greenColor]; tableBar.backColor = [UIColor grayColor]; tableBar.userInteractionEnabled = NO; [self.view addSubview:tableBar]; _tableBar = tableBar; //滾動條 HWScrollBar *scrollBar = [[HWScrollBar alloc] initWithFrame:CGRectMake(CGRectGetMaxX(_tableView.frame) + 20, CGRectGetMinY(_tableView.frame), 40, _tableView.bounds.size.height)]; scrollBar.delegate = self; scrollBar.minBarHeight = 80; [self.view addSubview:scrollBar]; _scrollBar = scrollBar; } - (void)addHeaderRefresh { __weak typeof(self) weakSelf = self; [_tableView addHeaderRefreshWithCallback:^{ __strong typeof(weakSelf) strongSelf = weakSelf; strongSelf.page = 1; [strongSelf getInfo]; }]; } - (void)addFooterRefresh { __weak typeof(self) weakSelf = self; [_tableView addFooterRefreshWithCallback:^{ __strong typeof(weakSelf) strongSelf = weakSelf; strongSelf.page ++; [strongSelf getInfo]; }]; } #pragma mark - UITableViewDataSource - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.array.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *identifier = @"refreshTest"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier]; if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier]; } cell.textLabel.text = [_array[indexPath.row] stringByAppendingString:[NSString stringWithFormat:@"_%ld", indexPath.row]]; return cell; } - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ //更新滾動條高度 if (tableView.contentSize.height <= tableView.bounds.size.height) { _scrollBar.barHeight = tableView.bounds.size.height; _tableBar.barHeight = tableView.bounds.size.height; }else { _scrollBar.barHeight = pow(tableView.bounds.size.height, 2) / tableView.contentSize.height; _tableBar.barHeight = pow(tableView.bounds.size.height, 2) / tableView.contentSize.height; } //更新滾動條Y向位置 _scrollBar.yPosition = (_scrollBar.bounds.size.height - _scrollBar.barHeight) * _tableView.contentOffset.y / (_tableView.contentSize.height - _scrollBar.bounds.size.height); _tableBar.yPosition = (_tableBar.bounds.size.height - _tableBar.barHeight) * _tableView.contentOffset.y / (_tableView.contentSize.height - _tableBar.bounds.size.height); }); } - (void)scrollViewDidScroll:(UIScrollView *)scrollView { //滑動到底部自動刷新 if (_tableView.contentSize.height > _tableView.frame.size.height && _tableView.contentOffset.y + _tableView.frame.size.height > _tableView.contentSize.height - 40 && _page < 50) { [_tableView footerBeginRefreshing]; } //更新滾動條位置 _scrollBar.yPosition = (_scrollBar.bounds.size.height - _scrollBar.barHeight) * scrollView.contentOffset.y / (scrollView.contentSize.height - _scrollBar.bounds.size.height); _tableBar.yPosition = (_tableBar.bounds.size.height - _tableBar.barHeight) * scrollView.contentOffset.y / (scrollView.contentSize.height - _tableBar.bounds.size.height); } #pragma mark - SXScrollBarDelegate - (void)scrollBarDidScroll:(HWScrollBar *)scrollBar { [_tableView setContentOffset:CGPointMake(0, (_tableView.contentSize.height - _scrollBar.bounds.size.height) * scrollBar.yPosition / (_scrollBar.bounds.size.height - _scrollBar.barHeight))]; } - (void)scrollBarTouchAction:(HWScrollBar *)scrollBar { [UIView animateWithDuration:scrollBar.barMoveDuration animations:^{ [_tableView setContentOffset:CGPointMake(0, (_tableView.contentSize.height - _scrollBar.bounds.size.height) * scrollBar.yPosition / (_scrollBar.bounds.size.height - _scrollBar.barHeight))]; }]; } @end
自定義滾動條HWScrollBar:
#import <UIKit/UIKit.h> @class HWScrollBar; @protocol HWScrollBarDelegate <NSObject> //滾動條滑動代理事件 - (void)scrollBarDidScroll:(HWScrollBar *)scrollBar; //滾動條點擊代理事件 - (void)scrollBarTouchAction:(HWScrollBar *)scrollBar; @end @interface HWScrollBar : UIView //背景色 @property (nonatomic, strong) UIColor *backColor; //前景色 @property (nonatomic, strong) UIColor *foreColor; //滾動動畫時長 @property (nonatomic, assign) CGFloat barMoveDuration; //限制滾動條最小高度 @property (nonatomic, assign) CGFloat minBarHeight; //滾動條實際高度 @property (nonatomic, assign) CGFloat barHeight; //滾動條Y向位置 @property (nonatomic, assign) CGFloat yPosition; //代理 @property (nonatomic, weak) id<HWScrollBarDelegate> delegate; @end /*** ---------------分割線--------------- ***/ #import "HWScrollBar.h" #import "UIColor+HW.h" @interface HWScrollBar () @property (nonatomic, weak) UIView *scrollBar; @property (nonatomic, weak) UIView *backView; @end @implementation HWScrollBar - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { //初始化設置 [self initInfo]; //創建控件 [self creatControl]; //添加手勢 [self addSwipeGesture]; } return self; } - (void)initInfo { _minBarHeight = 40.0f; _barMoveDuration = 0.25f; _foreColor = [UIColor colorWithHexString:@"#2f9cd4"]; _backColor = [UIColor colorWithHexString:@"#e6e6e6"]; self.layer.cornerRadius = self.bounds.size.width * 0.5; self.layer.masksToBounds = YES; self.backgroundColor = _backColor; } - (void)creatControl { //背景視圖 UIView *backView = [[UIView alloc] initWithFrame:self.bounds]; [self addSubview:backView]; _backView = backView; //滾動條 UIView *scrollBar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)]; scrollBar.backgroundColor = _foreColor; scrollBar.layer.cornerRadius = self.bounds.size.width * 0.5; scrollBar.layer.masksToBounds = YES; [self addSubview:scrollBar]; _scrollBar = scrollBar; } - (void)addSwipeGesture { //添加點擊手勢 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)]; [_backView addGestureRecognizer:tap]; //添加滾動條滑動手勢 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; [_scrollBar addGestureRecognizer:pan]; } - (void)setForeColor:(UIColor *)foreColor { _foreColor = foreColor; _scrollBar.backgroundColor = _foreColor; } - (void)setBackColor:(UIColor *)backColor { _backColor = backColor; self.backgroundColor = backColor; } - (void)setBarHeight:(CGFloat)barHeight { _barHeight = barHeight > _minBarHeight ? barHeight : _minBarHeight; CGRect temFrame = _scrollBar.frame; temFrame.size.height = _barHeight; _scrollBar.frame = temFrame; } - (void)setYPosition:(CGFloat)yPosition { _yPosition = yPosition; CGRect temFrame = _scrollBar.frame; temFrame.origin.y = yPosition; _scrollBar.frame = temFrame; } - (void)handlePan:(UIPanGestureRecognizer *)sender { //獲取偏移量 CGFloat moveY = [sender translationInView:self].y; //重置偏移量,避免下次獲取到的是原基礎的增量 [sender setTranslation:CGPointMake(0, 0) inView:self]; //在頂部上滑或底部下滑直接返回 if ((_yPosition <= 0 && moveY <= 0) || (_yPosition >= self.bounds.size.height - _barHeight && moveY >= 0)) return; //賦值 self.yPosition += moveY; //防止瞬間大偏移量滑動影響顯示效果 if (_yPosition < 0) self.yPosition = 0; if (_yPosition > self.bounds.size.height - _barHeight && moveY >= 0) self.yPosition = self.bounds.size.height - _barHeight; //代理 if (_delegate && [_delegate respondsToSelector:@selector(scrollBarDidScroll:)]) { [_delegate scrollBarDidScroll:self]; } } - (void)handleTap:(UITapGestureRecognizer *)sender { //點擊滾動條返回 if (sender.view == _scrollBar) return; //獲取點擊的位置 CGFloat positionY = [sender locationInView:self].y; //賦值 [UIView animateWithDuration:_barMoveDuration animations:^{ self.yPosition = positionY > _yPosition ? positionY - _barHeight : positionY; }]; //代理 if (_delegate && [_delegate respondsToSelector:@selector(scrollBarTouchAction:)]) { [_delegate scrollBarTouchAction:self]; } } @end
Demo 下載鏈接
猜你喜歡:自定義水平滾動條、進度條。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。