I want to implement this type of UI (Horizontal Scrolling).
I know its kind of "iCarousel", Type = iCarouselTypeRotary. I tried with this library but I am getting this type UI. I cant able to customize fully:
If anyone know how to do this UI in native way orelse any library, please let me know. Any inputs will be appreciated.
The iCarousel library provides the iCarouselTypeCustom type.
The following is a custom example.
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
}
- (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;
}
There are several solutions available for 3D carousels.
Take a look at that one for example:https://www.cocoacontrols.com/controls/parallaxcarousel
You can find the source code on Github. This project uses CABasicAnimation und you can install it using CocaPods.
