繁体   English   中英

如何实现像iCarousel Rotary类型,Objective-C这样的UI?

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

我想实现这种类型的UI(水平滚动)。

在此输入图像描述

我知道它的那种“iCarousel”,Type = iCarouselTypeRotary。 我试过这个库,但我得到这种类型的UI。 我无法完全自定义:

在此输入图像描述 如果有人知道如何以本地方式使用任何库来执行此UI,请告诉我。 任何输入将不胜感激。

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
}

最后我做了自定义视图,我已经实现了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;
}

在此输入图像描述

有三种可用于3D转盘的解决方案。

例如,看看那个: https//www.cocoacontrols.com/controls/parallaxcarousel

您可以在Github上找到源代码。 该项目使用CABasicAnimation您可以使用CocaPods安装它。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM