如何像在 Spotify 的播放器中一样创建居中的 UICollectionView [英] How to create a centered UICollectionView like in Spotify's Player
问题描述
我在尝试像在 Spotify 的播放器中那样创建 UICollectionView 时遇到很多困难:
I am have a lot of difficulty trying to create a UICollectionView like in Spotify's Player that acts like this:
对我来说有两个问题.
1) 如何使单元格居中，以便您可以看到中间单元格以及左右一个单元格.
1) How do I center the cells so that you can see the middle cell as well as the one of the left and right.
- 如果我创建方形单元格并在每个单元格之间添加间距，则单元格会正确显示但不会居中.
2) pagingEnabled = YES 时，collectionview 正确地从一页滑动到另一页.但是，如果单元格不居中，它只会将集合视图移动到屏幕宽度的页面上.所以问题是如何让页面移动，从而获得上述效果.
2) With pagingEnabled = YES, the collectionview correctly swipes from one page to another. However, without the cells being centered, it simply moves the collection view over a page which is the width of the screen. So the question is how do you make the pages move so you get the effect above.
3) 如何在单元格移动时为其大小设置动画
3) how do you animate the size of the cells as they move
- 我不想太担心这个.如果我能做到这一点，那就太好了，但更难的问题是 1 和 2.
我目前拥有的代码是一个简单的 UICollectionView，具有正常的委托设置和正方形的自定义 UICollectionview 单元格.也许我需要继承 UICollectionViewFlowLayout?或者，也许我需要将 pagingEnabled 设置为 NO，然后使用自定义滑动事件?希望有任何帮助！
The code I have currently is a simple UICollectionView with normal delegate setup and custom UICollectionview cells that are squares. Maybe I neeed to subclass UICollectionViewFlowLayout? Or maybe I need to turn pagingEnabled to NO and then use custom swipe events? Would love any help!
推荐答案
正如您在评论中所说，您希望在 Objective-c 代码中，有一个非常著名的库，称为 iCarousel，它可以帮助您完成您的要求.链接:https://github.com/nicklockwood/iCarousel
As you have said in the comment you want that in the Objective-c code, there is a very famous library called iCarousel which can be helpful in completing your requirement.Link: https://github.com/nicklockwood/iCarousel
您可以使用 'Rotary' 或 'Linear' 或其他样式，只需很少或无需修改即可实现自定义视图
You may use 'Rotary' or 'Linear' or some other style with little or no modification to implement the custom view
要实现它，您只需要实现它的一些委托方法，并且它正在为 ex 工作:
To implement it you have implement only some delegate methods of it and it's working for ex:
//specify the type you want to use in viewDidLoad
_carousel.type = iCarouselTypeRotary;
//Set the following delegate methods
- (NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
//return the total number of items in the carousel
return [_items count];
}
- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view
{
UILabel *label = nil;
//create new view if no view is available for recycling
if (view == nil)
{
//don't do anything specific to the index within
//this `if (view == nil) {...}` statement because the view will be
//recycled and used with other index values later
view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200.0f, 200.0f)];
((UIImageView *)view).image = [UIImage imageNamed:@"page.png"];
view.contentMode = UIViewContentModeCenter;
label = [[UILabel alloc] initWithFrame:view.bounds];
label.backgroundColor = [UIColor clearColor];
label.textAlignment = NSTextAlignmentCenter;
label.font = [label.font fontWithSize:50];
label.tag = 1;
[view addSubview:label];
}
else
{
//get a reference to the label in the recycled view
label = (UILabel *)[view viewWithTag:1];
}
//set item label
label.text = [_items[index] stringValue];
return view;
}
- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value
{
if (option == iCarouselOptionSpacing)
{
return value * 1.1;
}
return value;
}
您可以从 'Examples/Basic 查看完整的工作演示iOS 示例'，包含在 Github 存储库链接中
You can check the full working demo from 'Examples/Basic iOS Example' which is included with the Github repository link
由于它既古老又流行，你可以找到一些相关的教程，它也会比自定义代码实现稳定得多
As it is old and popular you can find some related tutorials for it and it will also be much stable than the custom code implementation
这篇关于如何像在 Spotify 的播放器中一样创建居中的 UICollectionView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
