カスタムTableViewスクロールインジケータ（iOS）

Question

私はテーブルビューを使用するアプリを持っていますが、このテーブルビューには100個ものアイテムがあることがあります。したがって、私はこのスクロールインジケータをカスタマイズするように割り当てられているので、ユーザは内容をスクロールすることが容易です。これを行うには、以下を実装する必要があります。

1）常に表示するにはスクロールインジケータが必要です。

2）スクロールインジケータをiOSのデフォルトグレーインジケータからオレンジ色のインジケータに変更し、内側に伸びるラベルの中央にラベルを追加する必要があります。このラベルにはセルの日付が入ります。スクロールバーで下にスクロールすると、ページ上の場所を反映して日付が変わります。 （明確にするために画像を参照）。

3）このカスタムTableViewのスクロールインジケータをクリックすると、高速スクロールが可能になります。

これにはどのような方法が最適ですか？私は図書館を使うべきですか？

Answer 1

これは完璧な解決策ではありませんが、これは私が思いついたものです。基本的にあなたがする必要があるいくつかの基本的な手順があります：

インスタンス化のtableView（のUITableView）とscrollViewIndicator（UIViewのは）

のtableViewのcontentSizeに基づいてscrollIndicatorの高さを計算します。そして、コンテナビューににtableViewとscrollIndicatorの両方を追加し、それとのtableView上記スクロールインジケータが0に設定され、アルファプロパティです（

チェックのtableViewのcontentOffsetのサブクラスを（我々はスクロール1にフェードインします） UIScrollViewの）とのtableViewが

を減速した後にあなたが特定のカスタムスクロール表示している。この値に基づいて

フェードscrollIndicator scrollIndicatorを移動するには、プロジェクトやニーズによって決定しようとしています。これは正しい軌道に乗るはずですが、一番大きな問題は「ページング」が導入されるとscrollIndicatorの高さを計算することになると思います。しかし、私はあなたに信仰を持っています！幸運であれ友よ。

#import "ViewController.h" 

static CGFloat indicatorPadding =   5; 
static CGFloat indicatorHeightMultiplyer = 0.05; 
static CGFloat indicatorWidth =   3; 
static CGFloat indicatorShowAnimation = 0.10; 

@interface ViewController() <UITableViewDataSource, UITableViewDelegate> { 
    CGFloat lastScrollOffset; 
    BOOL isFadingIndicator; 
} 

@property (strong, nonatomic) UITableView *tableView; 
@property (strong, nonatomic) UIView  *scrollIndicator; 

@end 

@implementation ViewController 

- (void)viewDidLoad { 
    [super viewDidLoad]; 

    isFadingIndicator = NO; 

    // Set Up TableView 
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds]; 
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"]; 
    self.tableView.rowHeight = 100; 
    self.tableView.dataSource = self; 
    self.tableView.delegate = self; 
    self.tableView.showsHorizontalScrollIndicator = NO; 
    self.tableView.showsVerticalScrollIndicator = NO; 
    [self.tableView layoutIfNeeded]; 

    // Calculate indicator size based on TableView contentSize 
    CGFloat indicatorHeight = self.tableView.contentSize.height * indicatorHeightMultiplyer; 

    // Set Up Scroll Indicator 
    self.scrollIndicator = [[UIView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.tableView.frame) - indicatorPadding, indicatorPadding, indicatorWidth, indicatorHeight)]; 
    self.scrollIndicator.backgroundColor = [UIColor orangeColor]; 
    self.scrollIndicator.layer.cornerRadius = self.scrollIndicator.frame.size.width/2; 

    // Add TableView 
    [self.view addSubview:self.tableView]; 

    // Add Scroll Indicator 
    [self.view addSubview:self.scrollIndicator]; 
} 

- (void)didReceiveMemoryWarning { 
    [super didReceiveMemoryWarning]; 

} 

#pragma mark - TABLE VIEW METHODS 

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"]; 

    return cell; 
} 

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 

    return 10; 
} 

-(void)scrollViewDidScroll:(UIScrollView *)scrollView { 

    if (scrollView == self.tableView) { 

     [self showIndicator]; 

     if (lastScrollOffset >= scrollView.contentOffset.y) { 
      [self moveScrollIndicatorDownward:YES withOffset:scrollView.contentOffset.y]; 
     } 
     else { 
      [self moveScrollIndicatorDownward:NO withOffset:scrollView.contentOffset.y]; // upward 
     } 

     lastScrollOffset = scrollView.contentOffset.y; 

    } 

} 

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { 
    [self hideIndicator]; 
} 

#pragma mark - SCROLL INDICATOR METHODS 

-(void)showIndicator { 

    if (self.scrollIndicator.alpha == 0 && isFadingIndicator == NO) { 
     // fade in scroll indicator 
     isFadingIndicator = YES; 
     [UIView animateWithDuration:indicatorShowAnimation animations:^{ 
      self.scrollIndicator.alpha = 1; 
     } completion:^(BOOL finished) { 
      isFadingIndicator = NO; 
     }]; 

    } 

} 

-(void)hideIndicator { 

    if (self.scrollIndicator.alpha == 1 && isFadingIndicator == NO) { 
     // fade out scroll indicator 
     isFadingIndicator = YES; 
     [UIView animateWithDuration:indicatorShowAnimation animations:^{ 
      self.scrollIndicator.alpha = 0; 
     } completion:^(BOOL finished) { 
      isFadingIndicator = NO; 
     }]; 
    } 
} 

-(void)moveScrollIndicatorDownward:(BOOL)downwards withOffset:(CGFloat)offset { 

    if ([self canMoveScrollIndicator:downwards]) { 

     self.scrollIndicator.center = CGPointMake(CGRectGetMidX(self.scrollIndicator.frame), (CGRectGetHeight(self.scrollIndicator.frame)/2) + offset); 

    } 
    else { 
     // maybe 'bounce' scroll indicator if isDecelerting is YES? 
    } 

} 

-(BOOL)canMoveScrollIndicator:(BOOL)downwards { 

    if (downwards) { 
     if (self.scrollIndicator.frame.origin.y >= self.tableView.frame.size.height - indicatorPadding) { 
      return NO; 
     } 
     else { 
      return YES; 
     } 
    } 
    else { 
     // upwards 
     if ((self.scrollIndicator.frame.origin.y + self.scrollIndicator.frame.size.height) <= self.tableView.frame.origin.y + indicatorPadding) { 
      return NO; 
     } 
     else { 
      return YES; 
     } 
    } 

} 

@end 

Answer 2

あなたはネイティブのスクロールインジケータを隠さなければなりません。tableView.showsVerticalScrollIndicator = false、いつtableView.contentOffset.yの変更を移動されるカスタムのUIViewオブジェクトを作成します。それはヘルプscrollViewDidScroll機能をトレースすることができます。