如何使用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]; }
答
我做自动滑动演示收集观察室,并把它在GitHub上请参考下面的链接到GitHub库当你把所有的图片准备
reloadCollectionView方法应被调用。它可以在'viewDidLoad'或任何地方调用。无论何时你想重新加载你的集合视图,不要直接调用'reloadData',而是调用'reloadCollectionView'。它会自动开始滑动。 –
@Ganesh,谢谢。假设我想按下按钮进行滚动。我的意思是进入UI,我有三个按钮,称为previous,net&pause。那个时候如何管理 – Abhinaba
我会将这些添加到我的答案中。 –