web-dev-qa-db-ja.com

UICollectionViewでindexPathへの低速スクロールを作成する

UICollectionViewを使用して、一連のロゴを宣伝する「画像ティッカー」を作成するプロジェクトに取り組んでいます。 collectionViewは、高さが1アイテム、長さが12アイテムで、一度に2〜3個のアイテムが表示されます（表示されるロゴのサイズによって異なります）。

最初のアイテムから最後のアイテムまでゆっくりと自動スクロールするアニメーションを作成してから、繰り返したいと思います。

誰かがこの仕事をすることができましたか？を使用してスクロールを機能させることができます

[myCollection scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:(myImages.count -1) inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:YES];

しかし、これは速すぎます！

[UIView animateWithDuration:10 delay:2 options:(UIViewAnimationOptionAutoreverse + UIViewAnimationOptionRepeat) animations:^{
    [myCollection scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:(myImages.count -1) inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
} completion:nil];

これにより、目的のスクロール速度が得られますが、シリーズの最後の数個のセルのみが表示されます。それら（および最初の可視セルでさえ）がすぐにデキューされているのではないかと思います。

何かご意見は？

iosscrolluiviewanimationnsindexpathuicollectionview
20
Chris

このアプローチを試すことができます：

@property (nonatomic, assign) CGPoint scrollingPoint, endPoint;
@property (nonatomic, strong) NSTimer *scrollingTimer;
@synthesize scrollingPoint, endPoint;
@synthesize scrollingTimer;

- (void)scrollSlowly {
    // Set the point where the scrolling stops.
    self.endPoint = CGPointMake(0, 300);
    // Assuming that you are starting at {0, 0} and scrolling along the x-axis.
    self.scrollingPoint = CGPointMake(0, 0);
    // Change the timer interval for speed regulation. 
    self.scrollingTimer = [NSTimer scheduledTimerWithTimeInterval:0.015 target:self selector:@selector(scrollSlowlyToPoint) userInfo:nil repeats:YES];
}

- (void)scrollSlowlyToPoint {
    self.collectionView.contentOffset = self.scrollingPoint;
    // Here you have to respond to user interactions or else the scrolling will not stop until it reaches the endPoint.
    if (CGPointEqualToPoint(self.scrollingPoint, self.endPoint)) {
        [self.scrollingTimer invalidate];
    }
    // Going one pixel to the right.
    self.scrollingPoint = CGPointMake(self.scrollingPoint.x, self.scrollingPoint.y+1);
}
16
Masa

"1ピクセルオフセット"トリックを使用します。プログラムでスクロールする場合は、末尾のcontentOffset.xを必要以上に1ピクセル多く/少なく設定するだけです。これは目立たないはずです。そして、完了ブロックでそれを実際の値に設定します。そうすれば、セルのデキューの時期尚早な問題を回避し、スムーズなスクロールアニメーションを得ることができます;）

これは、右のページにスクロールする例です（たとえば、1ページから2ページへ）。 animations:ブロックでは、実際には1ピクセル少なくスクロールすることに注意してください（pageWidth * nextPage - 1）。次に、completion:ブロックの正しい値を復元します。

CGFloat pageWidth = self.collectionView.frame.size.width;
int currentPage = self.collectionView.contentOffset.x / pageWidth;
int nextPage = currentPage + 1;

[UIView animateWithDuration:1
                      delay:0
                    options:UIViewAnimationOptionCurveEaseOut
                 animations:^{
                     [self.collectionView setContentOffset:CGPointMake(pageWidth * nextPage - 1, 0)];
                 } completion:^(BOOL finished) {
                     [self.collectionView setContentOffset:CGPointMake(pageWidth * nextPage, 0)];
                 }];
12
Hlung

インデックスパスからインデックスパスに「ジャンプ」することなく、UICollectionViewの最後まで「ゆっくり」スクロールすることもできます。 TVOSアプリのコレクションビュー用にこれをすばやく作成しました。

_func autoScroll () {
    let co = collectionView.contentOffset.x
    let no = co + 1

    UIView.animateWithDuration(0.001, delay: 0, options: .CurveEaseInOut, animations: { [weak self]() -> Void in
        self?.collectionView.contentOffset = CGPoint(x: no, y: 0)
        }) { [weak self](finished) -> Void in
            self?.autoScroll()
    }
}
_

autoScroll()でviewDidLoad()を呼び出すだけで、残りはそれ自体を処理します。スクロールの速度は、UIViewのアニメーション時間によって決まります。代わりに_0_秒のNSTimerを追加して、userscrollで無効にすることができます（私は試していません）。

7
Paul Peelen

これを見つけた他の人のために、私はマサの提案を更新してSwiftに取り組み、最後に少しイージングを導入して、元のscrollItemsToIndexPathアニメーション呼び出しのように動作するようにしました。I私の見解では何百ものアイテムがあるので、安定したペースは私にとって選択肢ではありませんでした。

var scrollPoint: CGPoint?
var endPoint: CGPoint?
var scrollTimer: NSTimer?
var scrollingUp = false

func scrollToIndexPath(path: NSIndexPath) {
    let atts = self.collectionView!.layoutAttributesForItemAtIndexPath(path)
    self.endPoint = CGPointMake(0, atts!.frame.Origin.y - self.collectionView!.contentInset.top)
    self.scrollPoint = self.collectionView!.contentOffset
    self.scrollingUp = self.collectionView!.contentOffset.y > self.endPoint!.y

    self.scrollTimer?.invalidate()
    self.scrollTimer = NSTimer.scheduledTimerWithTimeInterval(0.01, target: self, selector: "scrollTimerTriggered:", userInfo: nil, repeats: true)
}

func scrollTimerTriggered(timer: NSTimer) {
    let dif = fabs(self.scrollPoint!.y - self.endPoint!.y) / 1000.0
    let modifier: CGFloat = self.scrollingUp ? -30 : 30

    self.scrollPoint = CGPointMake(self.scrollPoint!.x, self.scrollPoint!.y + (modifier * dif))
    self.collectionView?.contentOffset = self.scrollPoint!

    if self.scrollingUp && self.collectionView!.contentOffset.y <= self.endPoint!.y {
        self.collectionView!.contentOffset = self.endPoint!
        timer.invalidate()
    } else if !self.scrollingUp && self.collectionView!.contentOffset.y >= self.endPoint!.y {
        self.collectionView!.contentOffset = self.endPoint!
        timer.invalidate()
    }
}

Difとmodifierの値を微調整すると、ほとんどの状況で継続時間/使いやすさのレベルが調整されます。

3
Allan Weir

.hファイルで、このタイマーを宣言し、

NSTimer *Timer;

このタイマーコードを配置し、

  [CollectionView reloadData];
  Timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(AutoScroll) userInfo:nil repeats:YES];

その後、

#pragma mark- Auto scroll image collectionview
-(void)AutoScroll
{
    if (i<[Array count])
    {
        NSIndexPath *IndexPath = [NSIndexPath indexPathForRow:i inSection:0];
        [self.ImageCollectionView scrollToItemAtIndexPath:IndexPath
            atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
        i++;
        if (i==[Array count])
        {
            i=0;
        }
    }
}

お役に立てば幸いです。

0
Ramdhas