Git Product home page Git Product logo

upcarouselflowlayout's Introduction

UPCarouselFlowLayout

UPCarouselFlowLayout is a fancy carousel flow layout for UICollectionView. It comes with a paginated effect and it shrinks and makes transparent the side items.

demo

Requirements

  • iOS 8.1+

Installation

CocoaPods

UPCarouselFlowLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "UPCarouselFlowLayout"

Carthage

Users can simply add to their Cartfile:

github "ink-spot/UPCarouselFlowLayout"

Manual

Simply copy the folder UPCarouselFlowLayout to your project and import it in XCode.

Usage

Getting Started

Via code
import UPCarouselFlowLayout

Create a UPCarouselFlowLayout object, set its itemSize and assign it to your UICollectionView.

let layout = UPCarouselFlowLayout()
layout.itemSize = CGSizeMake(200, 200)
collectionView.collectionViewLayout = layout
Via Interface Builder

Set the UICollectionView layout class to UPCarouselFlowLayout, and set its itemSize and its properties.

demo

Properties

UPCarouselFlowLayout has a few customizable properties:

  • sideItemScale (between 0 and 1, default is 0.6) Can be set through code or via Interface Builder. The shrinking ratio for collection items which are not in the center.

  • sideItemAlpha (between 0 and 1, default is 0.6) Can be set through code or via Interface Builder. The opacity ratio for collection items which are not in the center.

  • sideItemShift (value in pixels, default is 0) Can be set through code or via Interface Builder. A vertical/horizontal offset (depending on the collectionView scroll direction) for collection items which are not in the center.

  • spacingMode (default is fixed spacing of 40 pts) Can be set only through code.

    • UPCarouselFlowLayoutSpacingMode.fixed(spacing: CGFloat) Items in the carousel are positioned with a fixed space between them.
    • UPCarouselFlowLayoutSpacingMode.overlap(visibleOffset: CGFloat) A fixed part of the side items are visible on the sides of the collection (and therefore the space between items depends on the collection size).

License

UPCarouselFlowLayout is released under the MIT license. See LICENSE for details.

upcarouselflowlayout's People

Contributors

0ber avatar andre991 avatar sirarkimedes avatar zepojo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

upcarouselflowlayout's Issues

Is It RTL Supported with Swift4?

Hi love your UPCarouselFlowLayout it's awesome library . by the way
is it RTL supported with your present library i need to use in RTL also, is there any way to do for RTL? i would like to appreciate if you assist me on the same... please help me.

Thanks in Advance

iOS 7 and iOS 8

I noticed that it is supported by only iOS8.1+

What part of the code makes it not work with iOS 7?

Pod file issue

Hi,

Thanks for your great repo.
When I run pod install I got the following error:

[!] Unable to satisfy the following requirements:

- `UPCarouselFlowLayout` required by `Podfile`

screen shot 2016-08-29 at 9 50 32 pm

Any help?

SPM

kindly add Swift Package Manage.

Swift 3

Hi !

I would like to know if you planned to create a swift 3-compatible version of your work ? Thanks :)

Thread 1: EXC_BAD_ACCESS (code=2, address=0x16ba93fe0)

Thread 1: EXC_BAD_ACCESS (code=2, address=0x16ba93fe0)

override open func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let superAttributes = super.layoutAttributesForElements(in: rect),
let attributes = NSArray(array: superAttributes, copyItems: true) as? [UICollectionViewLayoutAttributes]
else { return nil }

    return attributes.map({ self.transformLayoutAttributes($0) })
}

connect carousel with pageView

hi, first of all, thanks for your work! the carousel is working nice for my app.

i want to connect the carousel with my pageView. My carousel just got a label with headings in it and when i swipe left or right i can change between different pageViews. Now i want to connect the heading-labels with my pages, like the pageViewController

so i want to swipe the headings "audio","netzwerk","player" together with the pageView
it looks like this

pageviewcontroller kopie

setCurrentItem

Hi, I want the cells to start at 3. How can I do that.

[Please delete]

(Please delete, I created this ticket by accident, sorry.)

Connect carousel to pageControl

Hi, I'm facing the same problem specified in this issue:

#23

In his case, he's using another framework, but I want to keep using UPCarouselFlowLayout.

There is an easy way to get the current page?

Not working on Storyboard.

Trying to configure it in Storyboard but it is giving me this error.
All three properties are not coding complaint.

[Storyboard] Unknown class _TtC14DayCare_Module20UPCarouselFlowLayout in Interface Builder file.

Failed to set (sideItemScale) user defined inspected property on (UICollectionViewLayout): [<UICollectionViewLayout 0x7fa9a8400480> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key sideItemScale.

Failed to set (sideItemAlpha) user defined inspected property on (UICollectionViewLayout): [<UICollectionViewLayout 0x7fa9a8400480> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key sideItemAlpha.

Failed to set (sideItemShift) user defined inspected property on (UICollectionViewLayout): [<UICollectionViewLayout 0x7fa9a8400480> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key sideItemShift.

How to close Infinite Scrolling

I double checked everything but when I reach to end collection view cell and continue dragging it returns the first one and it causes index out of bound exception because page size is continuing increasing. I do not know how I enabled this feature but I need to understand how to close? Thanks anyone who can help.

SOLUTION
It is my mistake I specified 3 numberOfSections of collection view so that it is showing the beginning of list.

An issue on orientation.isFlat

When device changes its orientation from orientation.isPortrait / orientation.isLandcape to orientation.isFlat there should not be any changes:

@objc private func rotationDidChange() {
if orientation.isFlat {
print("orientation.isFlat - Do not change anything")
return
}
let layout = self.collectionView.collectionViewLayout as! SIKUCarouselFlowLayout
let direction: UICollectionViewScrollDirection = orientation.isPortrait ? .horizontal : .vertical
layout.scrollDirection = direction
if currentPage > 0 {
let indexPath = IndexPath(item: currentPage, section: 0)
let scrollPosition: UICollectionViewScrollPosition = UIDeviceOrientationIsPortrait(orientation) ? .centeredHorizontally : .centeredVertically
self.collectionView.scrollToItem(at: indexPath, at: scrollPosition, animated: false)
}
}

help please

i tried to use library like this but with no success, can you help me
screen shot 2018-10-08 at 11 43 13 am

Change y-axis position!

Hi,

(Horizontal Scroll)
Is there a way you can change the y-axis position of only the items that are not in the center?

Thank You!

Disable Transform

Hi !

First thanks for sharing your great work :)

I need to disable the sideScale transform on some part / view of my cell.
Do you see a way to do it ?

Cheers !

The behavior of the UICollectionViewFlowLayout is not defined because:

Hi,
When i rotate device to landscape mode always taking this warning?
Thanks.

The behavior of the UICollectionViewFlowLayout is not defined because:
2017-01-24 02:57:44.553 UPCarouselFlowLayoutDemo[32030:325685] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.

Consecutive Scaling on Scroll

Hi,
I am trying to achieve a pickerview in which instead of rotation transform by default I want scale down transform. The carousel seems perfect for this as it centers and pages with scaling, but if it could allow scaling upto 2 to 3 cells?

Layout attribute

Layout attribute works not fine.

img_8114

When u scroll next - everything alright.

Container View

Hi

I put the UPCarousel inside a view that is in a Container view.

Normally I can run the project but I can't select the current page.

What can I do to select specific page ?
self.currentPage = 3 doesn't work.

If you want I can send you a sample project that I tried.

After reloading, the first or last cell is not centered aligned.

I have few cells in my collection view, now I deleted the first cell or last cell. After deleting I'm reloading the collection view, here the next cell or previous cell (first or last based on deletion) was not horizontally centered aligned. If user scroll the content then only the cell alignment is adjusting. I tried to move programatically by using setContentOffset, scrollToItem, scrollToRect but none of them worked. First and second screenshots were related to the issue after collection view reload due to deletion of first and last record respectively. The last/third screenshot belongs to expected layout, which got if user swipes on the screen

After reload when first item deleted:
Simulator Screen Shot - iPhone 11 - 2021-09-29 at 14 01 06

After reload when last item deleted:
Simulator Screen Shot - iPhone 11 - 2021-09-29 at 14 04 22

After user move the screen:
Simulator Screen Shot - iPhone 11 - 2021-09-29 at 13 58 11

Navigation Controller

Hello!
If you embed ViewController in NavigationViewController in Example you get following errors on iPhone 5S 10.2:

2018-01-17 21:52:56.026 UPCarouselFlowLayoutDemo[63712:5963793] The behavior of the UICollectionViewFlowLayout is not defined because:
2018-01-17 21:52:56.026 UPCarouselFlowLayoutDemo[63712:5963793] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
2018-01-17 21:52:56.026 UPCarouselFlowLayoutDemo[63712:5963793] The relevant UICollectionViewFlowLayout instance is <UPCarouselFlowLayoutDemo.UPCarouselFlowLayout: 0x7fb1a5609850>, and it is attached to <UICollectionView: 0x7fb1a680e000; frame = (0 64; 320 277); clipsToBounds = YES; autoresize = RM+BM; gestureRecognizers = <NSArray: 0x61000004bfd0>; layer = <CALayer: 0x610000037ac0>; contentOffset: {0, -64}; contentSize: {0, 336}> collection view layout: <UPCarouselFlowLayoutDemo.UPCarouselFlowLayout: 0x7fb1a5609850>.
2018-01-17 21:52:56.027 UPCarouselFlowLayoutDemo[63712:5963793] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

How can I solve the alignment problem?

How can I solve the alignment problem when cells are smaller than half of the screen and I want to see the first or last cell?

See attached GIF:

bug mov

Thanks for suggestions.

Glitch - programmatically approach

Hi,

**

Glitch - programmatically approach

**
Can you help me to resolve this problem? When the numberOfItemsInSection exceeded in 4 the Glitch was happening. Kindly see my attached picture that show the Glitch.
screen shot 2017-04-27 at 3 07 58 pm

Here's my code:
screen shot 2017-04-27 at 3 19 26 pm

and Project Navigation :
screen shot 2017-04-27 at 3 20 19 pm

`scrollToItemAtIndexPath:atScrollPosition:animated:` not working

Just noticed that scrollToItemAtIndexPath:atScrollPosition:animated: of the UIScrollView is not working properly when using this layout.

I tried with all the UICollectionViewScrollPosition options, even though the CenteredVertically and CenteredHorizontally should probably be the only supported ones, depending on the layout direction.

I would be glad to add support for it and send a pull request if somebody can provide some basic direction to get me started.

Is there a way to know if the item is in the center?

Hello guys,

I'm searching a way to make appear some information when the item is in the center, and make it's disappear when it's not.

Is it possible with UPCarouselFlowLayout?
Or Do you have any idea where I can make a callback to get the state of an item?

regards,

Swift 4 support

Hello,

Do this framework has swift 4 support, if not when can we get the updated library.

collection view becomes black

hi
i tried to copy all code in my project
all codes all same but just the cell is little different
when i run the app
the collection view is completely black.

Auto-select the center cell?

As of now, user must tap a cell in order to trigger didSelectItemAtIndexPath. Is there a way to select the center cell once the scrolling ended automatically?

Reset item position when collection view data is reloaded

As my issue title suggests, I'm curious how I can reset the position of the carousel when the .reloadData() function is called on the associated UICollectionView. I'd like it to reset to the first item in the collection.

Thanks!

Deceleration is instantaneous at times

  • Expected Behavior: For a normal paging UICollectionView using a standard flow layout, you can swipe the cell quickly and let go (before it reaches the threshold to show the next view) and it will gently bounce back.
  • Actual Behavior: For this layout, it seems to bounce back instantaneously without any animation. (If you drag gently and let go, it will bounce back gently... if you flick it quickly and let go quickly, it will be instantaneous).

Have you come across this before?

I tested both on device and simulator and see it both places. I also tested with different deceleration rates and it doesn't seem to change anything

I'm using a vanilla UICollectionView w/ vertical scrolling and this as the layout:

final class SwipeableLessonLayout: UPCarouselFlowLayout {
    
    // MARK: - Instantiation
    
    override init() {
        super.init()
        
        itemSize = CGSize(width: UIScreen.main.bounds.size.width, height: LessonSectionCell.cellHeight)
        scrollDirection = .vertical
        minimumLineSpacing = 0
        minimumInteritemSpacing = 0
        
        sideItemScale = 1
        sideItemAlpha = 0.4
        spacingMode = UPCarouselFlowLayoutSpacingMode.fixed(spacing: 0)
    }
    
    // MARK: - Unsupported Initializers
    
    required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }

}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.