UIScrollView with rearrangable buttons - iphone

Question

I need to implement a pop up menu with a number of buttons on it. I have created the pop up and dynamically added the buttons to it. Now I need to rearrange the buttons like the iPhone home screen does.
When long press gesture occurs the buttons needs to start animating with close button(like that which appears when we try to delete an app from the phone). Further I need to rearrange the position of the button by dragging it. I have added animation to the button's appearance and also close button but I'm struggling to find a way to rearrange the button position. I have searched a lot and found many links regarding this functionality but then most of them are pretty lengthy and complex. I just want a quick/simple one which can be implemented fast.
Any idea guys??

Answer 1

I have same issue and i solved my problem with following code.
1) get your all Images from your Document folder
2) set it in scrollview
3) put UILongPressGestureRecognizer on Imageview. and display cross button.
4) if it delete then repeat step 2 to 4.
No need to arrange the whole item but just remove all item from scrollview and refill it again.
//Document Directory
#define kAppDirectoryPath NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)
#pragma mark - File Functions - Document/Cache Directory Functions
- (void)createDocumentDirectory:(NSString*)pStrDirectoryName
{
NSString *dataPath = [self getDocumentDirectoryPath:pStrDirectoryName];
if (![[NSFileManager defaultManager] fileExistsAtPath:dataPath])
[[NSFileManager defaultManager] createDirectoryAtPath:dataPath withIntermediateDirectories:NO attributes:nil error:NULL];
}
- (NSString*)getDocumentDirectoryPath:(NSString*)pStrPathName
{
NSString *strPath = #"";
if(pStrPathName)
strPath = [[kAppDirectoryPath objectAtIndex:0] stringByAppendingPathComponent:pStrPathName];
return strPath;
}
-(void)setScrollviewItem {
NSArray* subviews = [[NSArray alloc] initWithArray: scrollObj.subviews];
for (UIView* view in subviews) {
if ([view isKindOfClass:[UIImageView class]]) {
[view removeFromSuperview];
}
if ([view isKindOfClass:[UIButton class]]) {
[view removeFromSuperview];
}
}
[subviews release];
[arrSaveImage removeAllObjects];
NSError *error = nil;
NSArray *dirContents = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:[slef getDocumentDirectoryPath:#"MyPhotos"] error:&error];// MyPhoto is my Directory Name.
if (!error) {
NSPredicate *predicate = [NSPredicate predicateWithFormat:#"self ENDSWITH '.png'"];
NSArray *imagesOnly = [dirContents filteredArrayUsingPredicate:predicate];
for (int i=0;i<[imagesOnly count]; i++) {
[arrSaveImage addObject:[imagesOnly objectAtIndex:i]];
}
}
int px=0;
for (int i = 0; i < [arrSaveImage count]; i++) {
UIImageView *imgBackScroll=[[UIImageView alloc] init];
NSString *strPath=[self getDocumentDirectoryPath:#"MyPhotos"];
strPath=[NSString stringWithFormat:#"%#/%#",strPath,[arrSaveImage objectAtIndex:i]];
imgBackScroll.image=[UIImage imageWithData:[NSData dataWithContentsOfFile:strPath]];
imgBackScroll.frame=CGRectMake(px+5, 10, 90, 80);
imgBackScroll.layer.cornerRadius = 5.0;
imgBackScroll.layer.masksToBounds = YES;
imgBackScroll.tag=i;
imgBackScroll.userInteractionEnabled = YES;
[scrollObj addSubview:imgBackScroll];
UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];//This is your Cross delete button on corner
//[btn setTitle:#"-" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:#"CrossDelete.png"] forState:UIControlStateNormal];
[btn addTarget:self action:#selector(deleteButton:) forControlEvents:UIControlEventTouchUpInside];
btn.frame=CGRectMake(imgBackScroll.frame.origin.x-2, 0, 15, 15);
btn.hidden=YES;
btn.tag=i;
[scrollObj addSubview:btn];
UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:#selector(startWobbling:)];
longPressGesture.view.tag=i;
[imgBackScroll addGestureRecognizer:longPressGesture];
[imgBackScroll release];
[longPressGesture release];
px=px+95;
}
scrollObj.contentSize = CGSizeMake(px, scrollObj.frame.size.height);
}
-(void) startWobbling:(UILongPressGestureRecognizer*)gesture{
CGAffineTransform leftWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-5.0));
CGAffineTransform rightWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(5.0));
gesture.view.transform = leftWobble; // starting point
[UIView beginAnimations:#"wobble" context:gesture.view];
[UIView setAnimationRepeatAutoreverses:YES]; // important
[UIView setAnimationRepeatCount:11];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(wobbleEnded:finished:context:)];
gesture.view.transform = rightWobble; // end here & auto-reverse
[UIView commitAnimations];
NSArray* subviews = [[NSArray alloc] initWithArray: scrollObj.subviews];
for (UIView* view in subviews) {
if ([view isKindOfClass:[UIButton class]]) {
if (view.tag==gesture.view.tag) {
view.hidden=NO;
}
}
}
[subviews release];
}
//When Delete button pressed
-(IBAction)deleteButton:(id)sender {
UIButton *bt=(UIButton *)sender;
self.strDeleteFilePath=[FunctionManager getDocumentDirectoryPath:#"MyPhotos"];
self.strDeleteFilePath=[NSString stringWithFormat:#"%#/%#",strDeleteFilePath,[arrSaveImage objectAtIndex:bt.tag]];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:#"" message:#"Are you sure you want to delete this photo" delegate:self cancelButtonTitle:#"Delete" otherButtonTitles:#"Cancel", nil];
[alert show];
[alert release];
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
if (buttonIndex == 0){
NSFileManager *fileManager = [NSFileManager defaultManager];
NSError *error = nil;
if(![fileManager removeItemAtPath:self.strDeleteFilePath error:&error]) {
NSLog(#"Delete failed:%#", error);
} else {
NSLog(#"image removed: %#",strDeleteFilePath);
}
[self setScrollviewItem];
}
}

Answer 2

I have tried many libraries and discovered a great and practical solution: UzysGridView.
This is very simple and easy to customize.

Answer 3

Check out these sample code,
https://github.com/gmoledina/GMGridView
http://mobile.tutsplus.com/tutorials/iphone/uicollectionview-layouts/
hope that these sample code fulfil your need..

Answer 4

UICollectionView does it more efficiently.
IF you don't want to user UICollectionView, try to subclass UIScrollView and override layoutSubview method - whenever you need to rearrange the buttons, call setNeedsLayout.
example (Haven't test it):
- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat x = 0;
CGFloat y = 0;
CGFloat buttonWidth = 100;
CGFloat buttonHeight = 100;
CGFloat spaceBetweenButtons = 10;
for (UIButton *button in self.subviews)
{
if ([button isKindOfClass:[UIButton class]])
{
button.frame = CGRectMake(x, y, buttonWidth, buttonHeight);
x+=buttonWidth+spaceBetweenButtons;
if (x + buttonWidth > self.frame.size.width)
{
x = 0;
y += spaceBetweenButtons+ buttonHeight;
}
}
}
self.contentSize = CGPointMake(0, y);
}
- (void)rearrange
{
[UIView animateWithDuration:0.2 animations:^{
[self setNeedsLayout];
}];
}