如何使用collectionView自动滑动图像

如何使用collectionView自动滑动图像

问题描述:

我想用UICollectionView创建幻灯片。现在我创建了一个集合视图和一个自定义单元格。我显示了所有图像,但没有自动滚动。所以我想,当视图控制器加载时,即使按下滑动按钮,集合视图的所有单元格也应自动滚动。但我搜查了所有的文件,但没有找到。所以请给任何想法或给我任何教程链接也。如何使用collectionView自动滑动图像

我已经实现了一个简单的自动滚动组件UICollectionView,你可以从这里得到 - BJAutoScrollingCollectionView

我已经包括了原始代码,您需要如下:

斯威夫特3.0+:

@IBOutlet weak var collectionView: UICollectionView! 

    var timer:Timer? = nil   
    var datasource: [UIImage]? 

    @IBAction func previousButtonAction(sender: UIButton) { 

      if self.datasource != nil { 

       if self.datasource?.count != 0 { 

        self.scrollToPreviousOrNextCell(direction: "Previous") 

       } 

      } 

     } 


    @IBAction func nextButtonAction(sender: UIButton) { 

     if self.datasource != nil { 

      if self.datasource?.count != 0 { 

       self.scrollToPreviousOrNextCell(direction: "Next") 

      } 

     } 

    } 

    @IBAction func pauseButtonAction(sender: UIButton) { 

     self.timer.invalidate() 

    } 

    //After you've received data from server or you are ready with the datasource, call this method. Magic! 
    func reloadCollectionView() { 

     self.collectionView.reloadData() 

     // Invalidating timer for safety reasons 
     self.timer?.invalidate() 

     // Below, for each 3.5 seconds MyViewController's 'autoScrollImageSlider' would be fired 
     self.timer = Timer.scheduledTimer(timeInterval: 3.5, target: self, selector: #selector(MyViewController.autoScrollImageSlider), userInfo: nil, repeats: true) 

     //This will register the timer to the main run loop 
     RunLoop.main.add(self.timer!, forMode: .commonModes) 

    } 

    func scrollToPreviousOrNextCell(direction: String) { 

      DispatchQueue.global(qos: .background).async { 

       DispatchQueue.main.async { 

        let firstIndex = 0 
        let lastIndex = (self.datasource?.count)! - 1 

        let visibleIndices = self.collectionView.indexPathsForVisibleItems 

        let nextIndex = visibleIndices[0].row + 1 
        let previousIndex = visibleIndices[0].row - 1 

        let nextIndexPath: IndexPath = IndexPath.init(item: nextIndex, section: 0) 
        let previousIndexPath: IndexPath = IndexPath.init(item: previousIndex, section: 0) 

        if direction == "Previous" { 

         if previousIndex < firstIndex { 


         } else { 

          self.collectionView.scrollToItem(at: previousIndexPath, at: .centeredHorizontally, animated: true) 
         } 

        } else if direction == "Next" { 

         if nextIndex > lastIndex { 


         } else { 

          self.collectionView.scrollToItem(at: nextIndexPath, at: .centeredHorizontally, animated: true) 

         } 

        } 

       } 

      } 

     } 

    func autoScrollImageSlider() { 

      DispatchQueue.global(qos: .background).async { 

       DispatchQueue.main.async { 

        let firstIndex = 0 
        let lastIndex = (self.datasource?.count)! - 1 

        let visibleIndices = self.collectionView.indexPathsForVisibleItems 
        let nextIndex = visibleIndices[0].row + 1 

        let nextIndexPath: IndexPath = IndexPath.init(item: nextIndex, section: 0) 
        let firstIndexPath: IndexPath = IndexPath.init(item: firstIndex, section: 0) 

        if nextIndex > lastIndex { 

         self.collectionView.scrollToItem(at: firstIndexPath, at: .centeredHorizontally, animated: true) 

        } else { 

         self.collectionView.scrollToItem(at: nextIndexPath, at: .centeredHorizontally, animated: true) 

        } 

       } 

      } 

     } 


    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 

     let cellId = "cell" 

     //Use your custom cell 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! UICollectionViewCell 
     cell.imageView.image = self.datasource[indexPath.row] 

     return cell 

    } 

    //Make sure you invalidate the timer here 
    override func viewWillDisappear(_ animated: Bool) { self.timer?.invalidate() } 


目标C:

@interface MyViewController() <UICollectionViewDelegate, UICollectionViewDataSource> { 

    NSTimer *timer; 
    NSMutableArray *datasource; 

} 

@property (nonatomic, weak) IBOutlet UICollectionView *collectionView; 

@end 

@implementation MyViewController 

- (IBAction)previousButtonAction:(UIButton *)sender { 

    if (datasource != nil) { 
     if (datasource.count != 0) { 
      [self scrollToPreviousOrNextCell:@"Previous"]; 
     } 
    } 
} 

- (IBAction)nextButtonAction:(UIButton *)sender { 

    if (datasource != nil) { 
     if (datasource.count != 0) { 
      [self scrollToPreviousOrNextCell:@"Next"]; 
     } 
    } 
} 

- (IBAction)pauseButtonAction:(UIButton *)sender { [timer invalidate]; } 

//After you've received data from server or you are ready with the datasource, call this method. Magic! 
- (void) reloadCollectionView { 

    [self.collectionView reloadData]; 

    // Invalidating timer for safety reasons 
    [timer invalidate]; 

    // Below, for each 3.5 seconds MyViewController's 'autoScrollImageSlider' would be fired 
    timer = [NSTimer scheduledTimerWithTimeInterval:3.5 target:self selector:@selector(autoScrollImageSlider) userInfo:nil repeats:YES]; 

    //This will register the timer to the main run loop 
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes]; 

} 

- (void)scrollToPreviousOrNextCell:(NSString *)direction { 

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0),^{ 

     NSInteger firstIndex = 0; 
     NSInteger lastIndex = datasource.count - 1; 

     NSArray *visibleIndices = [self.collectionView indexPathsForVisibleItems]; 

     NSInteger nextIndex = [[visibleIndices objectAtIndex:0] row] + 1; 
     NSInteger previousIndex = [[visibleIndices objectAtIndex:0] row] - 1; 

     NSIndexPath *nextIndexPath = [NSIndexPath indexPathForRow:nextIndex inSection:0]; 
     NSIndexPath *previousIndexPath = [NSIndexPath indexPathForRow:previousIndex inSection:0]; 

     if ([direction isEqualToString:@"Previous"]) { 

      if (previousIndex < firstIndex) { 

      } else { 
       [self.collectionView scrollToItemAtIndexPath:previousIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES]; 
      } 

     } else if ([direction isEqualToString:@"Next"]) { 

      if (nextIndex > lastIndex) { 

      } else { 
       [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES]; 
      } 
     } 

    }); 
} 

-(void) autoScrollImageSlider { 

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0),^{ 

     NSInteger firstIndex = 0; 
     NSInteger lastIndex = datasource.count - 1; 

     NSArray *visibleIndices = [self.collectionView indexPathsForVisibleItems]; 
     NSInteger nextIndex = [[visibleIndices objectAtIndex:0] row] + 1; 

     NSIndexPath *nextIndexPath = [NSIndexPath indexPathForRow:nextIndex inSection:0]; 
     NSIndexPath *firstIndexPath = [NSIndexPath indexPathForRow:firstIndex inSection:0]; 

     if (nextIndex > lastIndex) { 
      [self.collectionView scrollToItemAtIndexPath:firstIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES]; 
     } else { 
      [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES]; 
     } 

    }); 

} 


- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 

    NSString *cellId = @"cell"; 

    //Use your custom cell 
    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath]; 
    cell.imageView.image = [datasource objectAtIndex:[indexPath row]]; 

    return cell; 

} 


//Make sure you invalidate the timer here 
-(void)viewWillDisappear:(BOOL)animated { [timer invalidate]; } 
+0

reloadCollectionView方法应被调用。它可以在'viewDidLoad'或任何地方调用。无论何时你想重新加载你的集合视图,不要直接调用'reloadData',而是调用'reloadCollectionView'。它会自动开始滑动。 –

+0

@Ganesh,谢谢。假设我想按下按钮进行滚动。我的意思是进入UI,我有三个按钮,称为previous,net&pause。那个时候如何管理 – Abhinaba

+0

我会将这些添加到我的答案中。 –

我做自动滑动演示收集观察室,并把它在GitHub上请参考下面的链接到GitHub库当你把所有的图片准备

https://github.com/irshad281/SlideCollectionView