I don't know if I'm thinking right or not, but my issue that I have custom cells (that look like as a cars) in UITableView, each cell contain 2 UIImageViews (wheel images), I need to rotate the Wheel Images when UITableView scrolling either downward of upward, so can I point all wheel images to one image, and then rotate this image immediately when UITableView is scrolling?
This is my code
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGPoint currentOffset = scrollView.contentOffset;
if (currentOffset.y > self.lastContentOffset.y)
{
self.wheelImage.transform = CGAffineTransformRotate(self.wheelImage.transform,- M_PI / 4);
}
else
{
self.wheelImage.transform = CGAffineTransformRotate(self.wheelImage.transform, M_PI / 4);
}
self.lastContentOffset = currentOffset;
}
Sorry for my bad english, and thanks in advance.
Here is the best answer I have found till now, and it is work just fine, but I need to make it to more realistic (apply physical formula):
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
int fragment = 20;
for(UITableViewCell *cell in [self.showsTable visibleCells]){
if ([cell isKindOfClass:[ShowCell class]]){
CGPoint currentOffset = scrollView.contentOffset;
if (currentOffset.y > self.lastContentOffset.y){
[[(ShowCell*)cell wheel1Image] setTransform:CGAffineTransformRotate([(ShowCell*)cell wheel1Image].transform, M_PI / fragment)];
[[(ShowCell*)cell wheel2Image] setTransform:CGAffineTransformRotate([(ShowCell*)cell wheel2Image].transform, M_PI / fragment)];
}
else{
[[(ShowCell*)cell wheel1Image] setTransform:CGAffineTransformRotate([(ShowCell*)cell wheel1Image].transform,- M_PI / fragment)];
[[(ShowCell*)cell wheel2Image] setTransform:CGAffineTransformRotate([(ShowCell*)cell wheel2Image].transform,- M_PI / fragment)];
}
self.lastContentOffset = currentOffset;
}
}
}
I believe you can't do it such a way. What you need is to call reloadData for your UITableView from scrollViewDidScroll method. Calling reloadData will call cellForRawAtIndexMethod, and there in that method you should update transform of your wheels for every cell accordingly to current offset.
I have a UICollectionView with 6 pages, and paging enabled, and a UIPageControl. What I want is, when I came to the last page, if I drag to right, UICollectionView reloads from first page seamlessly.
- (void)scrollViewDidEndDecelerating:(UIScrollView *)sender
{
// The key is repositioning without animation
if (collectionView.contentOffset.x == 0) {
// user is scrolling to the left from image 1 to image 10.
// reposition offset to show image 10 that is on the right in the scroll view
[collectionView scrollRectToVisible:CGRectMake(collectionView.frame.size.width*(pageControl.currentPage-1),0,collectionView.frame.size.width,collectionView.frame.size.height) animated:NO];
}
else if (collectionView.contentOffset.x == 1600) {
// user is scrolling to the right from image 10 to image 1.
// reposition offset to show image 1 that is on the left in the scroll view
[collectionView scrollRectToVisible:CGRectMake(0,0,collectionView.frame.size.width,collectionView.frame.size.height) animated:NO];
}
pageControlUsed = NO;
}
It doesn't work like I want. What can I do?
Here's what I ended up with for my UICollectionView (horizontal scrolling like the UIPickerView):
#implementation UIInfiniteCollectionView
- (void) recenterIfNecessary {
CGPoint currentOffset = [self contentOffset];
CGFloat contentWidth = [self contentSize].width;
// don't just snap to center, since this might be done in the middle of a drag and not aligned. Make sure we account for that offset
CGFloat offset = kCenterOffset - currentOffset.x;
int delta = -round(offset / kCellSize);
CGFloat shift = (offset + delta * kCellSize);
offset += shift;
CGFloat distanceFromCenter = fabs(offset);
// don't always recenter, just if we get too far from the center. Eliza recommends a quarter of the content width
if (distanceFromCenter > (contentWidth / 4.0)) {
self.contentOffset = CGPointMake(kCenterOffset, currentOffset.y);
// move subviews back to make it appear to stay still
for (UIView *subview in self.subviews) {
CGPoint center = subview.center;
center.x += offset;
subview.center = center;
}
// add the offset to the index (unless offset is 0, in which case we'll assume this is the first launch and not a mid-scroll)
if (currentOffset.x > 0) {
int delta = -round(offset / kCellSize);
// MODEL UPDATE GOES HERE
}
}
}
- (void) layoutSubviews { // called at every frame of scrolling
[super layoutSubviews];
[self recenterIfNecessary];
}
#end
Hope this helps someone.
I've been using the Street Scroller sample to create an infinite scroller for images. That works fine until I wanted to set pagingEnabled = YES; Tried tweaking around the recenterIfNecessary code and finally realized that it's the contentOffset.x that has to match the frame of the subview that i want visible when paging stops. This really isn't going to work in recenterIfNecessary since you have no way of knowing it will get called from layoutSubviews. If you do get it adjusted right, the subview may pop out from under your finger. I do the adjustment in scrollViewDidEndDecelerating. So far I haven't had problems with scrolling fast. It will work and simulate paging even when pagingEnabled is NO, but it looks more natural with YES.
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
[super scrollViewDidEndDecelerating:scrollView];
CGPoint currentOffset = [self contentOffset];
// find the subview that is the closest to the currentOffset.
CGFloat closestOriginX = 999999;
UIView *closestView = nil;
for (UIView *v in self.visibleImageViews) {
CGPoint origin = [self.imageContainerView convertPoint:v.frame.origin toView:self];
CGFloat distanceToCurrentOffset = fabs(currentOffset.x - origin.x);
if (distanceToCurrentOffset <= closestOriginX) {
closestView = v;
closestOriginX = distanceToCurrentOffset;
}
}
// found the closest view, now find the correct offset
CGPoint origin = [self.imageContainerView convertPoint:closestView.frame.origin toView:self];
CGPoint center = [self.imageContainerView convertPoint:closestView.center toView:self];
CGFloat offsetX = currentOffset.x - origin.x;
// adjust the centers of the subviews
[UIView animateWithDuration:0.1 animations:^{
for (UIView *v in self.visibleImageViews) {
v.center = [self convertPoint:CGPointMake(v.center.x+offsetX, center.y) toView:self.imageContainerView];
}
}];
}
I have not used UICollectionView for infinite scrolling, but when doing it with a UIScrollView you first adjust your content offset (instead of using scrollRectToVisible) to the location you want. Then, you loop through each subview in your scroller and adjust their coordinates either to the right or left based on the direction the user was scrolling. Finally, if either end is beyond the bounds you want them to be, move them to the far other end. Their is a very good WWDC video from apple about how to do infinite scrolling you can find here: http://developer.apple.com/videos/wwdc/2012/
I've got a UICollectionView, which works ok, until I start scrolling.
Here some pics first:
As you can see it's great. As I start scrolling (paging enabled) the first one goes a bit offscreen:
This is the problem. Originaly my view have 3 views and I want to scroll and show 3 views only. But as it scrolls (paging enabled) it hides a little bit of the first view and show little bit of the next first view from the next page.
And here is a video, because it's kinda hard to explain:
Video of the problem (Dropbox)
Here is a picture of my UICollectionView settings:
It's going to be great if someone can help!
The fundamental issue is Flow Layout is not designed to support the paging. To achieve the paging effect, you will have to sacrifice the space between cells. And carefully calculate the cells frame and make it can be divided by the collection view frame without remainders. I will explain the reason.
Saying the following layout is what you wanted.
Notice, the most left margin (green) is not part of the cell spacing. It is determined by the flow layout section inset. Since flow layout doesn't support heterogeneous spacing value. It is not a trivial task.
Therefore, after setting the spacing and inset. The following layout is what you will get.
After scroll to next page. Your cells are obviously not aligned as what you expected.
Making the cell spacing 0 can solve this issue. However, it limits your design if you want the extra margin on the page, especially if the margin is different from the cell spacing. It also requires the view frame must be divisible by the cell frame. Sometimes, it is a pain if your view frame is not fixed (considering the rotation case).
The real solution is to subclass UICollectionViewFlowLayout and override following methods
- (CGSize)collectionViewContentSize
{
// Only support single section for now.
// Only support Horizontal scroll
NSUInteger count = [self.collectionView.dataSource collectionView:self.collectionView
numberOfItemsInSection:0];
CGSize canvasSize = self.collectionView.frame.size;
CGSize contentSize = canvasSize;
if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal)
{
NSUInteger rowCount = (canvasSize.height - self.itemSize.height) / (self.itemSize.height + self.minimumInteritemSpacing) + 1;
NSUInteger columnCount = (canvasSize.width - self.itemSize.width) / (self.itemSize.width + self.minimumLineSpacing) + 1;
NSUInteger page = ceilf((CGFloat)count / (CGFloat)(rowCount * columnCount));
contentSize.width = page * canvasSize.width;
}
return contentSize;
}
- (CGRect)frameForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize canvasSize = self.collectionView.frame.size;
NSUInteger rowCount = (canvasSize.height - self.itemSize.height) / (self.itemSize.height + self.minimumInteritemSpacing) + 1;
NSUInteger columnCount = (canvasSize.width - self.itemSize.width) / (self.itemSize.width + self.minimumLineSpacing) + 1;
CGFloat pageMarginX = (canvasSize.width - columnCount * self.itemSize.width - (columnCount > 1 ? (columnCount - 1) * self.minimumLineSpacing : 0)) / 2.0f;
CGFloat pageMarginY = (canvasSize.height - rowCount * self.itemSize.height - (rowCount > 1 ? (rowCount - 1) * self.minimumInteritemSpacing : 0)) / 2.0f;
NSUInteger page = indexPath.row / (rowCount * columnCount);
NSUInteger remainder = indexPath.row - page * (rowCount * columnCount);
NSUInteger row = remainder / columnCount;
NSUInteger column = remainder - row * columnCount;
CGRect cellFrame = CGRectZero;
cellFrame.origin.x = pageMarginX + column * (self.itemSize.width + self.minimumLineSpacing);
cellFrame.origin.y = pageMarginY + row * (self.itemSize.height + self.minimumInteritemSpacing);
cellFrame.size.width = self.itemSize.width;
cellFrame.size.height = self.itemSize.height;
if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal)
{
cellFrame.origin.x += page * canvasSize.width;
}
return cellFrame;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes * attr = [super layoutAttributesForItemAtIndexPath:indexPath];
attr.frame = [self frameForItemAtIndexPath:indexPath];
return attr;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray * originAttrs = [super layoutAttributesForElementsInRect:rect];
NSMutableArray * attrs = [NSMutableArray array];
[originAttrs enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes * attr, NSUInteger idx, BOOL *stop) {
NSIndexPath * idxPath = attr.indexPath;
CGRect itemFrame = [self frameForItemAtIndexPath:idxPath];
if (CGRectIntersectsRect(itemFrame, rect))
{
attr = [self layoutAttributesForItemAtIndexPath:idxPath];
[attrs addObject:attr];
}
}];
return attrs;
}
Notice, above code snippet only supports single section and horizontal scroll direction. But it is not hard to expand.
Also, if you don't have millions of cells. Caching those UICollectionViewLayoutAttributes may be a good idea.
You could disable paging on UICollectionView and implement a custom horizontal scrolling/paging mechanism with a custom page width/offset like this:
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
float pageWidth = 210;
float currentOffset = scrollView.contentOffset.x;
float targetOffset = targetContentOffset->x;
float newTargetOffset = 0;
if (targetOffset > currentOffset)
newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth;
else
newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth;
if (newTargetOffset < 0)
newTargetOffset = 0;
else if (newTargetOffset > scrollView.contentSize.width)
newTargetOffset = scrollView.contentSize.width;
targetContentOffset->x = currentOffset;
[scrollView setContentOffset:CGPointMake(newTargetOffset, 0) animated:YES];
}
This answer is way late, but I have just been playing with this problem and found that the cause of the drift is the line spacing. If you want the UICollectionView/FlowLayout to page at exact multiples of your cells width, you must set:
UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout *)collectionView.collectionViewLayout;
flowLayout.minimumLineSpacing = 0.0;
You wouldn't think the line spacing comes into play in horizontal scrolling, but apparently it does.
In my case I was experimenting with paging left to right, one cell at a time, with no space between cells. Every turn of the page introduced a tiny bit of drift from the desired position, and it seemed to accumulate linearly. ~10.0 pts per turn. I realized 10.0 is the default value of minimumLineSpacing in the flow layout. When I set it to 0.0, no drift, when I set it to half the bounds width, each page drifted an extra half of the bounds.
Changing the minimumInteritemSpacing had no effect.
edit -- from the documentation for UICollectionViewFlowLayout:
#property (nonatomic) CGFloat minimumLineSpacing;
Discussion
...
For a vertically scrolling grid, this value represents the minimum
spacing between successive rows. For a horizontally scrolling grid,
this value represents the minimum spacing between successive columns.
This spacing is not applied to the space between the header and the
first line or between the last line and the footer.
The default value of this property is 10.0.
The solution from the following article is elegant and simple. The main idea is creation the scrollView on top of your collectionView with passing all contentOffset values.
http://b2cloud.com.au/tutorial/uiscrollview-paging-size/
It should be said by implementing this method:
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;
I didn't achieve a smooth animation like it's happening with pagingEnabled = YES.
I know this question is old, but for anyone who happens to stumble upon this.
All you have to do to correct this is set the MinimumInterItemSpacing to 0 and decrease the content's frame.
#devdavid was spot on on the flowLayout.minimumLineSpacing to zero.
It can also be done in the layout editor, setting the Min Spacing for Lines to 0:
I think I understand the problem. I'll try and make you understand it too.
If you look closely, then you will see that this issue happens only gradually and not just on the first page swipe.
If I understand correctly, in your app, currently, every UICollectionView item are those rounded boxes which we see, and you have some offset/margin between all of them which is constant. This is what is causing the issue.
Instead, what you should do, is make a UICollectionView item which is 1/3rd of the width of the whole view, and then add that rounded image view inside it. To refer to the image, the green colour should be your UICollectionViewItem and not the black one.
Do you roll your own UICollectionViewFlowLayout?
If so, adding -(CGPoint) targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset
withScrollingVelocity:(CGPoint)velocity will help you to calculate where the scrollview should stop.
This might work (NB: UNTESTED!):
-(CGPoint) targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset
withScrollingVelocity:(CGPoint)velocity
{
CGFloat offsetAdjustment = MAXFLOAT;
CGFloat targetX = proposedContentOffset.x + self.minimumInteritemSpacing + self.sectionInset.left;
CGRect targetRect = CGRectMake(proposedContentOffset.x, 0.0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
NSArray *array = [super layoutAttributesForElementsInRect:targetRect];
for(UICollectionViewLayoutAttributes *layoutAttributes in array) {
if(layoutAttributes.representedElementCategory == UICollectionElementCategoryCell) {
CGFloat itemX = layoutAttributes.frame.origin.x;
if (ABS(itemX - targetX) < ABS(offsetAdjustment)) {
offsetAdjustment = itemX - targetX;
}
}
}
return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
}
My answer is based on answer https://stackoverflow.com/a/27242179/440168 but is more simple.
You should place UIScrollView above UICollectionView and give them equal sizes:
#property (nonatomic, weak) IBOutlet UICollectionView *collectionView;
#property (nonatomic, weak) IBOutlet UIScrollView *scrollView;
Then configure contentInset of collection view, for example:
CGFloat inset = self.view.bounds.size.width*2/9;
self.collectionView.contentInset = UIEdgeInsetsMake(0, inset, 0, inset);
And contentSize of scroll view:
self.scrollView.contentSize = CGSizeMake(self.placesCollectionView.bounds.size.width*[self.collectionView numberOfItemsInSection:0],0);
Do not forget to set delegate of scroll view:
self.scrollView.delegate = self;
And implement main magic:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView == self.scrollView) {
CGFloat inset = self.view.bounds.size.width*2/9;
CGFloat scale = (self.placesCollectionView.bounds.size.width-2*inset)/scrollView.bounds.size.width;
self.collectionView.contentOffset = CGPointMake(scrollView.contentOffset.x*scale - inset, 0);
}
}
your UICollectionView's width should be an exact multiplication of the cell size width + the left and right insets. In your example, if the cell width is 96, then the UICollectionView's width should be (96 + 5 + 5) * 3 = 318.
Or, if you wish to keep UICollectionView's 320 width, your cell size width should be 320 / 3 - 5 - 5 = 96.666.
If this does not help, your UICollectionView's width might be different than what is set in the xib file, when the application runs. To check this - add an NSLog statement to printout the view's size in runtime:
NSLog(#"%#", NSStringFromCGRect(uiContentViewController.view.frame));
This is the same problem that I was experiencing and i posted my solution on another post, so I'll post it again here.
I found a solution to it, and it involved subclassing the UICollectionViewFlowLayout.
My CollectionViewCell size is 302 X 457 and i set my minimum line spacing to be 18 (9pix for each cell)
When you extend from that class there are a few methods that need to be over-ridden. One of them is
(CGSize)collectionViewContentSize
In this method, I needed to add up the total width of what was in the UICollectionView. That includes the ([datasource count] * widthOfCollectionViewCell) + ([datasource count] * 18)
Here is my custom UICollectionViewFlowLayout methods....
-(id)init
{
if((self = [super init])){
self.itemSize = CGSizeMake(302, 457);
self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
self.minimumInteritemSpacing = 0.0f;
self.minimumLineSpacing = 18.0f;
[self setScrollDirection:UICollectionViewScrollDirectionHorizontal];
}
return self;
}
-(CGSize)collectionViewContentSize{
return CGSizeMake((numCellsCount * 302)+(numCellsCount * 18), 457);
}
This worked for me, so I hope someone else finds it useful!
you also can set view's width to '320+spacing', and then set page enable to yes. it will scroll '320+spacing' for every time. i think it because page enable will scroll view's width but not screen's width.
I think I do have a solution for this issue. But I do not if it's the best.
UICollectionViewFlowLayout does contain a property called sectionInset. So you could set the section Inset to whatever your need is and make 1 page equalling one section. Therefore your scrolling should automatically fit properly in the pages ( = sections)
I had a similar problem with paging. Even though the cell insets were all 0 and the cell was exactly the same size in width and height as the UICollectionView, the paging wasn't proper.
What I noticed sounds like a bug in this version (UICollectionView, iOS 6): I could see that if I worked with a UICollectionView with width = 310px or above, and a height = 538px, I was in trouble. However, if I decreased the width to, say, 300px (same height) I got things working perfectly!
For some future reference, I hope it helps!
I encountered a similar issue when trying to get horizontal paging working on a 3 x 3 grid of cells with section insets and cell & line spacing.
The answer for me (after trying many of the suggestions - including subclassing UICollectionViewFlowLayout and various UIScrollView delegate solutions) was simple. I simply used sections in the UICollectionView by breaking my dataset up into sections of 9 items (or fewer), and utilising the numberOfSectionsInCollectionView and numberOfItemsInSection UICollectionView datasource methods.
The UICollectionView's horizontal paging now works beautifully. I recommend this approach to anyone currently tearing their hair out over a similar scenario.
If you're using the default flow-layout for your UICollectionView and do NOT want any space between each cell, you can set its miniumumLineSpacing property to 0 via:
((UICollectionViewFlowLayout *) self.collectionView.collectionViewLayout).minimumLineSpacing = 0;
I have an instance of UIScrollView with images inside it.
It is possible to scroll the scroll view horizontally, and view more images.
I want to magnify the images, according the their distance from the middle of the scroll view, so it should look like this.
I thought about the simplest way to do that, using the following code:
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
//Change the frames of all the visible images here.
}
This way does not work smoothly on some of the preceding devices, such as iPod 2G.
Is there a better way to perform the image magnification than the one I described?
If so, please let me know.
Thanks!
EDIT:
This is the implementation of the body of the method above:
-(void) magnifyImages {
//This method magnifies all the images.
for (NSString *name in [imagesDict allKeys]) {
UIImageView *imageView = [imagesDict objectForKey:name];
[self magnifyImageView:imageView];
}
}
static float kMaxMagnification = 1.5;
-(void) magnifyImageView:(UIImageView *)imageView {
CGRect frame = imageView.frame;
float imageMiddleLine = frame.origin.x+frame.size.width/2-scrollView.contentOffset.x;
//Check if the image's middle line is visible = whether it is needed to magnify the image.
if (imageMiddleLine +frame.size.width/2>0
&& imageMiddleLine-frame.size.width/2<scrollView.frame.size.width) {
float magnification = fabs(160-imageMiddleLine);
//Mathematical formula that calculates the magnification.
magnification = (kMaxMagnification-1)*(kDeviceWidth/2-magnification)/160+1;
//'normalImageSize' is a property of the image that returns the image's normal size (when not magnified).
CGSize imgSize = imageView.normalImageSize;
frame=CGRectMake(frame.origin.x-(imgSize.width*magnification-frame.size.width)/2,
frame.origin.y-(imgSize.height*magnification-frame.size.height)/2,
imgSize.width*magnification, imgSize.height*magnification);
imageView.frame=frame;
}
}
Hi everyone i need to implement this functionality.I need to fade the content of the cell while its going to disappear, i mean while it reaches at the top of table view.I am not getting how to do that.Please help me.I tried to use the scrollview's method but not getting how to do that.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
For anyone who wants it, here's some ready-to-go copy/paste-able code that is fully working:
Best Part: This code is only reliant on ONE outside property: self.tableView, so just make sure that's set up and you're good to go!
Just stick this method in your view controller somewhere:
#pragma mark - Scroll View Delegate Methods
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// Fades out top and bottom cells in table view as they leave the screen
NSArray *visibleCells = [self.tableView visibleCells];
if (visibleCells != nil && [visibleCells count] != 0) { // Don't do anything for empty table view
/* Get top and bottom cells */
UITableViewCell *topCell = [visibleCells objectAtIndex:0];
UITableViewCell *bottomCell = [visibleCells lastObject];
/* Make sure other cells stay opaque */
// Avoids issues with skipped method calls during rapid scrolling
for (UITableViewCell *cell in visibleCells) {
cell.contentView.alpha = 1.0;
}
/* Set necessary constants */
NSInteger cellHeight = topCell.frame.size.height - 1; // -1 To allow for typical separator line height
NSInteger tableViewTopPosition = self.tableView.frame.origin.y;
NSInteger tableViewBottomPosition = self.tableView.frame.origin.y + self.tableView.frame.size.height;
/* Get content offset to set opacity */
CGRect topCellPositionInTableView = [self.tableView rectForRowAtIndexPath:[self.tableView indexPathForCell:topCell]];
CGRect bottomCellPositionInTableView = [self.tableView rectForRowAtIndexPath:[self.tableView indexPathForCell:bottomCell]];
CGFloat topCellPosition = [self.tableView convertRect:topCellPositionInTableView toView:[self.tableView superview]].origin.y;
CGFloat bottomCellPosition = ([self.tableView convertRect:bottomCellPositionInTableView toView:[self.tableView superview]].origin.y + cellHeight);
/* Set opacity based on amount of cell that is outside of view */
CGFloat modifier = 2.5; /* Increases the speed of fading (1.0 for fully transparent when the cell is entirely off the screen,
2.0 for fully transparent when the cell is half off the screen, etc) */
CGFloat topCellOpacity = (1.0f - ((tableViewTopPosition - topCellPosition) / cellHeight) * modifier);
CGFloat bottomCellOpacity = (1.0f - ((bottomCellPosition - tableViewBottomPosition) / cellHeight) * modifier);
/* Set cell opacity */
if (topCell) {
topCell.contentView.alpha = topCellOpacity;
}
if (bottomCell) {
bottomCell.contentView.alpha = bottomCellOpacity;
}
}
}
Don't forget to add <UIScrollViewDelegate> to your class's '.h' file!
You may also want to put a call to this method somewhere in your viewDidLoad method like this: [self scrollViewDidScroll:self.tableView]; so that the bottom cell will start out faded (since it's normally cut off by the table view edge).
TIP: Set your table view separator style to none (self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;), or create your own separators as images and add them as a subview to your cells, so that you don't get the unpleasant effect of the separators disappearing without fading.
Works just as well with smaller than full-screen table views.
Here is Fateh Khalsa's solution in Swift
func scrollViewDidScroll(scrollView: UIScrollView)
{
let visibleCells = tableView.visibleCells
if visibleCells.count == 0 {
return
}
guard let bottomCell = visibleCells.last else {
return
}
guard let topCell = visibleCells.first else {
return
}
for cell in visibleCells {
cell.contentView.alpha = 1.0
}
let cellHeight = topCell.frame.size.height - 1
let tableViewTopPosition = tableView.frame.origin.y
let tableViewBottomPosition = tableView.frame.origin.y + tableView.frame.size.height
let topCellPositionInTableView = tableView.rectForRowAtIndexPath(tableView.indexPathForCell(topCell)!)
let bottomCellPositionInTableView = tableView.rectForRowAtIndexPath(tableView.indexPathForCell(bottomCell)!)
let topCellPosition = tableView.convertRect(topCellPositionInTableView, toView: tableView.superview).origin.y
let bottomCellPosition = tableView.convertRect(bottomCellPositionInTableView, toView: tableView.superview).origin.y + cellHeight
let modifier: CGFloat = 2.5
let topCellOpacity = 1.0 - ((tableViewTopPosition - topCellPosition) / cellHeight) * modifier
let bottomCellOpacity = 1.0 - ((bottomCellPosition - tableViewBottomPosition) / cellHeight) * modifier
topCell.contentView.alpha = topCellOpacity
bottomCell.contentView.alpha = bottomCellOpacity
}
I hope i understand your question correctly: You need to fade the content of the cell depending on how much that cell is out of the screen?
I don't know what cells you have in the table, but IF they have the same height, you can do something like this:
// Let's say you have a variable called cellHeight
int cellHeight = 80;
// Get the location of the top of the table
int topPosition = (int)tableView.cotentOffset.y;
// Get the index of the cell
int cellIndex = topPosition / cellHeight;
// Determine how much the cell is outside the view
float opacity = 1.0f - ((topPosition % cellHeight) / cellHeight);
You can now use opacity to control the transparency level. 0.0f means completely outside the view, 1.0f means completely inside.
To get the actual UITableViewCell which you need to change, use
- (NSArray *)indexPathsForVisibleRows
and then search for the cell that cellIndex.
You can create a gradient image and place it above the top of your scrollview. If you would like the "fade" to only be visible during scrolling, you can animate the image fading in and out on scrollViewBegin/DidEndScrollingAnimation or combine that with scrollViewDidScroll, you can decide when it's appropriate to fade out (i.e. when you're scrolled to the top).