如何实现UI像iCarousel Rotary type，Objective-C？

Question

我想实现这种类型的UI（水平滚动）。

我知道它的种类"iCarousel"，Type = iCarouselTypeRotary。我尝试使用这个库，但得到的是这种类型 UI。我无法完全自定义：

如果有人知道如何以本机方式或任何库执行此操作 UI，请告诉我。任何输入将不胜感激。

Answer 1

有多种解决方案可用于 3D 轮播。

看看那个例子：https://www.cocoacontrols.com/controls/parallaxcarousel

您可以找到源代码on Github。该项目使用 CABasicAnimation，您可以使用 CocaPods.

安装它

Answer 2

iCarousel 库提供了 iCarouselTypeCustom 类型。

以下为自定义示例。

override func awakeFromNib() {
    super.awakeFromNib()
    for i in 0 ... 6 {
        items.append(i)
    }
}

override func viewDidLoad() {
    super.viewDidLoad()
    carousel.type = .custom
}

func numberOfItems(in carousel: iCarousel) -> Int {
    return items.count
}


func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
    var label: UILabel
    var itemView: UIImageView

    if let view = view as? UIImageView {
        itemView = view
        label = itemView.viewWithTag(1) as! UILabel
    } else {

        itemView = UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

        itemView.image = UIImage(named: "page.png")
        itemView.layer.cornerRadius = 5

        itemView.contentMode = .center

        label = UILabel(frame: itemView.bounds)
        label.backgroundColor = .clear
        label.textAlignment = .center
        label.font = label.font.withSize(50)
        label.tag = 1
        itemView.addSubview(label)
    }

    label.text = "\(items[index])"

    return itemView
}

func carousel(_ carousel: iCarousel, valueFor option: iCarouselOption, withDefault value: CGFloat) -> CGFloat {

    switch option {
        case .visibleItems:
        let elemento:Int = self.carousel.currentItemIndex as Int
        print(elemento)
        if elemento == 0 {
            return 2;
        }else if elemento == items.count-1 {
            return 2;

        }else {
            return 3;
        }

    default:
        return value
    }
}

func carousel(_ carousel: iCarousel, itemTransformForOffset offset: CGFloat, baseTransform transform: CATransform3D) -> CATransform3D {


    let offsetFactor:CGFloat = self.carousel(carousel, valueFor: .spacing, withDefault: 1.25) * carousel.itemWidth

    let  zFactor: CGFloat = 400.0
    let  normalFactor: CGFloat = 0
    let  shrinkFactor: CGFloat = 100.0

    let  f: CGFloat =  sqrt(offset * offset + 1)-1

    var trans = transform

    trans = CATransform3DTranslate(trans, offset * offsetFactor, f * normalFactor, f * (-zFactor))
    trans = CATransform3DScale(trans, 1 / (f / shrinkFactor + 1.0), 1 / (f / shrinkFactor + 1.0), 1.0 )


    return trans
}

func carousel(_ carousel: iCarousel, shouldSelectItemAt index: Int) -> Bool {
    return true
}

Answer 3

最后，我使用了自定义视图，并且达到了我需要的 UI。在这里，我为有需要的人提供我的代码。

- (void)viewDidLoad
{
    [super viewDidLoad];
    _iCarouselItems = [[NSMutableArray alloc]init];
    for (int i = 0; i < 10; i++)
    {
        [_iCarouselItems addObject:@(i)];
    }
    self.iCarouselView.dataSource = self;
    self.iCarouselView.delegate = self;
    _iCarouselView.type = iCarouselTypeCustom;
    dispatch_async(dispatch_get_main_queue(), ^{
        [_iCarouselView reloadData];
    });
}

#pragma mark iCarousel methods
- (NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
    return [_iCarouselItems 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)
    {
         NSLog(@"viewForItemAtIndex is %ld",(long)index);
        //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, 200.0f)];
//        ((UIImageView *)view).image = [UIImage imageNamed:@"smiley-400x400.jpg"];

        view.contentMode = UIViewContentModeCenter;
        view.backgroundColor = [UIColor whiteColor];
        view.layer.cornerRadius = 8;
        view.layer.masksToBounds = true;
        view.layer.borderColor = [UIColor grayColor].CGColor;
        view.layer.borderWidth = 2;

        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];
    }
    label.text = [_iCarouselItems[index] stringValue];
    return view;
}

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
    CGFloat offsetFactor = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:0.3]*carousel.itemWidth;

    CGFloat zFactor = 400.0;
    CGFloat  normalFactor = 0;
    CGFloat  shrinkFactor = 100.0;
    CGFloat f =  sqrt(offset * offset + 1)-1;

    transform = CATransform3DTranslate(transform, offset * offsetFactor, f * normalFactor, f * (-zFactor));
    transform = CATransform3DScale(transform, 1 / (f / shrinkFactor + 1.0), 1 / (f / shrinkFactor + 1.0), 1.0 );

    return transform;
}

- (BOOL)carousel:(iCarousel *)carousel shouldSelectItemAtIndex:(NSInteger)index
{
    return true;
}

- (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index
{
    NSLog(@"Selected carouselindex is %ld",(long)index);
}

- (NSInteger)numberOfPlaceholdersInCarousel:(iCarousel *)carousel
{
    //note: placeholder views are only displayed on some carousels if wrapping is disabled
    return 0;
}

如何实现UI像iCarousel Rotary type，Objective-C？

How to implement UI like iCarousel Rotary type, Objective-C?

objective-c

horizontal-scrolling

ios

icarousel

最后，我使用了自定义视图，并且达到了我需要的 UI。在这里，我为有需要的人提供我的代码。