Horizontaly centered UICollectionView cells with custom paging - ios

Question

I'm currently building an app that has to present a twitter feed in the form of an horizontal collection view.
3 tweets (cells) should always be visible on screen and centered horizontaly aswell as half a tweet (last element of the previous 3 and first element of the next 3) on both side.
Here is a picture so it's easier to understand
When the user scrolls it should scroll 3 by 3 (or less if there are actualy less cell left to scroll). Sort of a custom paging.
I tried using a Custom layout and it works and make the cells be centered, showing half tweets on both side just like I want. But I can't make it work with the scrolling I want (3by3). And it won't let me show the first or last cell entirely... Anyway, when I had the following code, it just cancel the custom layout behaviour, but scrolls 3 by 3...
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
float pageWidth = ((self.view.frame.size.width / 4)*3);
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];
}
So guys, has anyone played with this before and could help me get things done ? Thanks a bunch.

Answer 1

ViewController.h
#import <UIKit/UIKit.h>
#import "CustomCell.h"
#import "DetailimageViewController.h"
#interface RootViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
{
IBOutlet UICollectionView *collectionViewHorizontalVertical;
}
ViewController.m
#import "RootViewController.h"
#interface RootViewController ()
{
NSMutableArray *arrayImages;
DetailimageViewController *detailImageVC ;
}
#end
#implementation RootViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
arrayImages = [[NSMutableArray alloc]initWithObjects:#"iMove.jpg",#"iPad.jpg",#"iPhone.jpg",#"iPod.jpg",#"iRing.jpg",#"iTV.jpg",#"iwatch.jpeg",nil];
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
UINib *cellNib = [UINib nibWithNibName:#"CustomCell" bundle:nil];
[collectionViewHorizontalVertical registerNib:cellNib forCellWithReuseIdentifier:#"cvCell"];
}
//UICollectionView DataSource and Delegate Methods
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return arrayImages.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"cvCell";
CustomCell *cell = (CustomCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
cell.imgViewCollection.image = [UIImage imageNamed:[arrayImages objectAtIndex:indexPath.row]];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"The indexPath is - %ld",(long)indexPath.item);
int ind = (int)indexPath.item;
detailImageVC = [[DetailimageViewController alloc]initWithNibName:#"DetailimageViewController" bundle:nil];
detailImageVC.arrayImagesCount = arrayImages;
detailImageVC.intSelectedIndex = ind;
[[NSUserDefaults standardUserDefaults] setObject:[NSString stringWithFormat:#"%d",detailImageVC.intSelectedIndex] forKey:#"SelectedCollectionViewID"];
[[NSUserDefaults standardUserDefaults] synchronize];
[self.navigationController pushViewController:detailImageVC animated:YES];
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(200, 200);
}
#end
In above coding I have 7 images.So you need to have your images above 7 or less.It is your wish.
Then DetailimageViewController.h
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#interface DetailimageViewController : UIViewController<UIScrollViewDelegate>
{
}
#property (strong, nonatomic) NSMutableArray *arrayImagesCount;
#property (strong, nonatomic) IBOutlet UIScrollView *scroll;
#property (strong, nonatomic) IBOutlet UIPageControl *pageControl;
#property (strong, nonatomic) IBOutlet UIImageView *imageviewScrollView
#property (assign, nonatomic) NSInteger seletedIndex;
#property (strong, nonatomic) UIImage *imageSelection;
#property (nonatomic, assign) int intSelectedIndex;
#property (nonatomic, strong) NSArray *pageImages;
#property (nonatomic, assign) CGFloat lastContentOffset;
- (IBAction)actionBack:(id)sender;
#end
DetailimageViewController.m
#import "DetailimageViewController.h"
#interface DetailimageViewController ()
{
UIImageView *subimg;
}
#end
#implementation DetailimageViewController
typedef enum ScrollDirection
{
ScrollDirectionNone,
ScrollDirectionRight,
ScrollDirectionLeft,
ScrollDirectionUp,
ScrollDirectionDown,
ScrollDirectionCrazy,
} ScrollDirection;
#synthesize arrayImagesCount;
#synthesize scroll;
#synthesize seletedIndex;
#synthesize imageSelection;
#synthesize intSelectedIndex;
#synthesize pageImages = _pageImages;
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
scroll.layer.cornerRadius=8.0f;
scroll.layer.masksToBounds=YES;
scroll.layer.borderColor=[[UIColor redColor]CGColor];
scroll.layer.borderWidth= 1.0f;
NSInteger pageCount = arrayImagesCount.count;
NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
int intCollectionViewIndex = [[defaults valueForKey:#"SelectedCollectionViewID"]intValue];
if(intSelectedIndex == intCollectionViewIndex)
{
for (int i=intSelectedIndex; i<[arrayImagesCount count]; i++)
{
CGRect frame;
if(i == intCollectionViewIndex)
{
frame.origin.x = self.scroll.frame.size.width *intCollectionViewIndex;
frame.origin.y=0;
frame.size=self.scroll.frame.size;
subimg=[[UIImageView alloc]initWithFrame:CGRectMake(self.scroll.frame.size.width *intCollectionViewIndex,0,self.scroll.frame.size.width,self.scroll.frame.size.height)];
subimg.image=[UIImage imageNamed:[NSString stringWithFormat:#"%#",[arrayImagesCount objectAtIndex:i]]];
[self.scroll addSubview:subimg];
[self.scroll setContentOffset:CGPointMake(self.scroll.frame.size.width*i,-20) animated:YES];
self.scroll.contentSize = CGSizeMake(self.scroll.frame.size.width*arrayImagesCount.count, self.scroll.frame.size.height);
}
else{
}
}
}
}
ScrollView Delegate Method
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog(#" Offset = %# ",NSStringFromCGPoint(scrollView.contentOffset));
ScrollDirection scrollDirection;
if (self.lastContentOffset > scrollView.contentOffset.x)
{
scrollDirection = ScrollDirectionRight;
NSLog(#"The scrollview is scrolling right side");
for(int j=intSelectedIndex;j<[arrayImagesCount count];j--)
{
CGRect frameRight;
frameRight.origin.x = self.scroll.frame.size.width *j;
frameRight.origin.y=0;
frameRight.size=self.scroll.frame.size;
subimg=[[UIImageView alloc]initWithFrame:CGRectMake(self.scroll.frame.size.width *j,0,self.scroll.frame.size.width,self.scroll.frame.size.height)];
subimg.image=[UIImage imageNamed:[NSString stringWithFormat:#"%#",[arrayImagesCount objectAtIndex:j]]];
[self.scroll addSubview:subimg];
self.scroll.contentSize = CGSizeMake(self.scroll.frame.size.width*arrayImagesCount.count, self.scroll.frame.size.height);
}
}
else if (self.lastContentOffset < scrollView.contentOffset.x)
{
scrollDirection = ScrollDirectionLeft;
NSLog(#"The scrollview is scrolling left side");
for(int k=intSelectedIndex;k<[arrayImagesCount count];k++)
{
CGRect frameLeft;
frameLeft.origin.x = self.scroll.frame.size.width *k;
frameLeft.origin.y=0;
frameLeft.size=self.scroll.frame.size;
subimg=[[UIImageView alloc]initWithFrame:CGRectMake(self.scroll.frame.size.width *k,0,self.scroll.frame.size.width,self.scroll.frame.size.height)];
subimg.image=[UIImage imageNamed:[NSString stringWithFormat:#"%#",[arrayImagesCount objectAtIndex:k]]];
[self.scroll addSubview:subimg];
self.scroll.contentSize = CGSizeMake(self.scroll.frame.size.width*arrayImagesCount.count, self.scroll.frame.size.height);
}
}
self.lastContentOffset = scrollView.contentOffset.x;
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
CGPoint translation = [scrollView.panGestureRecognizer translationInView:scrollView.superview];
NSLog(#"The translation.x is - %f",translation.x);
NSLog(#"The scrollview content off set is - %f",scrollView.contentOffset.x);
if ([scrollView.panGestureRecognizer translationInView:scrollView.superview].x > 0) {
// handle dragging to the right
NSLog(#"It is dragging to right side");
} else {
// handle dragging to the left
NSLog(#"It is dragging to left side");
}
}
- (IBAction)actionBack:(id)sender
{
[self.navigationController popViewControllerAnimated:YES];
}
#end