如何在Spotify的Player中创建居中的UICollectionView [英] How to create a centered UICollectionView like in Spotify's Player

查看:82
本文介绍了如何在Spotify的Player中创建居中的UICollectionView的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在创建像这样的Spotify播放器中的UICollectionView时,我遇到很多困难:

I am have a lot of difficulty trying to create a UICollectionView like in Spotify's Player that acts like this:

对我来说,问题有两个.

The problem for me is two fold.

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)使用pageingEnabled = 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子类化吗?还是我需要将pageEnabled设置为否",然后使用自定义滑动事件?希望有帮助!

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查看完整的演示示例. 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的Player中创建居中的UICollectionView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆