Scrolling - creating thumbnails from images - iphone

Could somebody go over how to modify the Scrolling Project so that it shows one image with others partly showing to the left and right? Just like mobile safari when you go to the page manager...This is key so that the user knows there are more images if they scroll to the right. Both methods taken from Scrolling project.
METHOD TO SET UP SCROLLVIEW:
ViewDidLoad {
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scrollView1.scrollEnabled = YES;
// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
scrollView1.pagingEnabled = YES;
// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageView];
[imageView release];
}
[self layoutScrollImages]; // now place the photos in serial layout within the scrollview
}
METHOD TO SET LAYOUT:
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}

in my previous app i create image galley view where i put some custom button on scroll view, so user can see full image on click on that button.
here is code hope it will help you
UIScrollView *Sview = [[UIScrollView alloc]
initWithFrame:[[UIScreen mainScreen] bounds]];
int row = 0;
int column = 0;
for(int i = 0; i < self.data.getCustomers.count; ++i) {
customerToEdit = [self.data.getCustomers objectAtIndex:i];
NSURL* imgUrl = [NSURL URLWithString:#"your image url array objects"];
UIImage* thumb = [UIImage imageWithData:[NSData dataWithContentsOfURL:imgUrl]];
//UIImage *thumb = [_thumbs objectAtIndex:i];
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(column*100+24, row*80+10, 64, 64);
[button setImage:thumb forState:UIControlStateNormal];
[button addTarget:self
action:#selector(buttonClicked:)
forControlEvents:UIControlEventTouchUpInside];
button.tag = i;
[Sview addSubview:button];
if (column == 2) {
column = 0;
row++;
} else {
column++;
}
}
[view setContentSize:CGSizeMake(320, (row+1) * 80 + 10)];
self.view = view; // or u can [self.view addsubview:Sview];

Related

Scrolling top to bottom using UIScrollView

I am looking for an example that show just vertical scrolling in iPhone.
The Apple supplied Scrolling example allows swiping of images left to
right.
Example Link
Example Link
I want to have my images scroll top to bottom like Instagram
App.
I research about it and found lots of example, but they all show
horizontal scrolling.
Example
Example
Example
Does anyone know how to do this?
I appreciate if you send me a link to a tutorial.
Hi i solved your problem with apple code,
just change the function with
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(0,curXLoc);
view.frame = frame;
curXLoc += (kScrollObjHeight);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake(([scrollView1 bounds].size.width),kNumImages * kScrollObjHeight)];
}
or if you want sample then i will give you
For your purpose refer your link:
http://idevzilla.com/2010/09/16/uiscrollview-a-really-simple-tutorial/
There is a code like:
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
For horizontal scrolling you need to set the width of contentSize property to a higher value than the scroll view's frame width. Likewise for vertical scrolling you need to set the height of contentSize property to a higher value than the scroll view's frame height.
Reference
In the above code it can be done like:
scroll.contentSize = CGSizeMake(self.view.frame.size.width, numberOfViews * self.view.frame.size.height);
You can use the following code to scroll images from top to bottom and vice versa.!!
- (void)viewDidLoad
{
//....
UISwipeGestureRecognizer *recognizer;
//for scrolling up
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(SwipeUp)]; // calling method SwipeUp
[recognizer setDirection:(UISwipeGestureRecognizerDirectionUp)];
[[self view] addGestureRecognizer:recognizer];
//for scrolling down
UISwipeGestureRecognizer *recognizer1;
recognizer1 = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(SwipeDown)]; //calling method SwipeDown
[recognizer1 setDirection:(UISwipeGestureRecognizerDirectionDown)];
[[self view] addGestureRecognizer:recognizer1];
}
//Initialise and synthesise IBOutlet UIImageView *bgImage;
-(IBAction)SwipeUp
{
[bgImage setImage:[UIImage imageNamed:#"yourImage1"] ];
bgImage.opaque=YES;
[self.view addSubview:bgImage];
}
-(IBAction)SwipeDown
{
[bgImage setImage:[UIImage imageNamed:#"yourImage2"] ];
bgImage.opaque=YES;
[self.view addSubview:bgImage];
}
I don't know if I understood correctly what you want to accomplish but basically you can set the position of you scrollView using setContentOffset.
CGPoint bottomOffset = CGPointMake(0, scrollView.contentSize.height - self.scrollView.bounds.size.height);
[scrollView setContentOffset:bottomOffset animated:YES];
There are several ways of doing this for example:
Using the UITableView with Custom cell
Adding UIScrollingView & adding the content/images & increasing the
height of scrollview according to number of objects in array.
Here is the code snippet which creates a 2*2 Grid for images :
//Over here adding the image names into the Array
NSMutableArray *imageArray=[[NSMutableArray alloc]init];
[Arr addObject:[UIImage imageNamed:#"image_1.png"]];
[Arr addObject:[UIImage imageNamed:#"image_2.png"]];
[Arr addObject:[UIImage imageNamed:#"image_3.png"]];
[Arr addObject:[UIImage imageNamed:#"image_4.png"]];
[Arr addObject:[UIImage imageNamed:#"image_5.png"]];
// Initlaizing the ScrollView & setting the frame :
scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0,320, 460)];
[scrollView setBackgroundColor:[UIColor clearColor]];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
int row = 0;
int column = 0;
for(int i = 0; i < imageArray.count; i++) {
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor=[UIColor clearColor];
button.frame = CGRectMake(column*160+0,row*210+10, 160, 190);
[button setImage:[imageArray objectAtIndex:i] forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor clearColor]];
[button addTarget:self action:#selector(chooseCustomImageTapped:) forControlEvents:UIControlEventTouchUpInside];
button.tag = i;
[view1 addSubview:button];
if (column == 1) {
column = 0;
row++;
} else {
column++;
}
}
[scrollView setContentSize:CGSizeMake(320, (row+1) * 210)];
[self.view addSubview:view1];
//Here is the method used for Tapping :
- (IBAction)chooseCustomImageTapped:(id)sender
{
}
Now,once the scrollView is ready for Vertical scrolling, you can do your own customization accordingly. I hope this would work for you.

Imagescrollview is showing black screen than images

When clicking on gallery button it shows black screen
UIButton *galleryButton = [UIButton buttonWithType:UIButtonTypeCustom];
[galleryButton addTarget:self action:#selector(ScrollView:) forControlEvents:UIControlEventTouchUpInside];
galleryButton.frame = CGRectMake(0, 0, 30, 30);
UIImage *ime = [UIImage imageNamed:#"photos.png"];
[galleryButton setImage:ime forState:UIControlStateNormal];
UIBarButtonItem *gallerybutton = [[UIBarButtonItem alloc] initWithCustomView:galleryButton];
-(void)ScrollView:(id)sender
{
ImageScrollViewController *imagescrollviewcontroller = [[ImageScrollViewController alloc] init];
[self presentViewController:imagescrollviewcontroller animated:YES completion:NULL];
[imagescrollviewcontroller release];
}
- (void)viewDidLoad
{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
[_imageScrollView setBackgroundColor:[UIColor blackColor]];
[_imageScrollView setCanCancelContentTouches:NO];
_imageScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
_imageScrollView.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
_imageScrollView.scrollEnabled = YES;
_imageScrollView.pagingEnabled = YES;
// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"image%d.png", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i;
[_imageScrollView addSubview:imageView];
//[imageView release];
}
[self layoutScrollImages];
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [_imageScrollView subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[_imageScrollView setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [_imageScrollView bounds].size.height)];
}
Any idea why it is not showing images but black screen. I am following apple sample code for scrolling images. Changes i have made is that they are showing two subview in scrollview. i am showing only one subview.
Thanks for help.

how to add sounds while uiscrollview is scrolling [duplicate]

This question already has answers here:
How to add sound while UIScrollview is scrolling in iphone sdk?
(2 answers)
Closed 3 years ago.
-(void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
CGFloat curXLoc = 0;
for (view in subviews)
{if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
-(void)viewDidLoad
{
self.view.backgroundColor = [UIColor clearColor];
[scrollView1 setBackgroundColor:[UIColor whiteColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES;
scrollView1.scrollEnabled = YES;
scrollView1.pagingEnabled = YES;
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"snap%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;imageView.tag = i;
[scrollView1 addSubview:imageView];
[imageView release];
[self layoutScrollImages];
}
[super viewDidLoad];
}
add UIScrollViewDelegate to your interface and then do your task in
scrollViewWillBeginDragging or `scrollViewDidEndDragging`
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView // called on start of dragging (may require some time and or distance to move)
{
//add your code here
}
now this method will be called whenever you drag the scrollview

How add a UIButton on every image of image view which is in scroll view?

i have an iPhone app in which i have several images. These images add in image view. That image view add sub view with scroll view. Now i want to add a transparent button on every image. How can i do that? I have shown my code below:
- (void)layoutScrollImages{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNoImages * 500), 700)];
}
- (void)viewDidLoad{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scrollView1.scrollEnabled = YES;
//imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image0.jpg"]];
[scrollView1 addSubview:imageView];
[scrollView1 setContentSize:CGSizeMake(500,700)];
scrollView1.minimumZoomScale = 1;
scrollView1.maximumZoomScale = 3;
scrollView1.delegate = self;
[scrollView1 setScrollEnabled:YES];
// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
scrollView1.pagingEnabled = YES;
// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNoImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"page-%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *ImageView = [[UIImageView alloc] initWithImage:image];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = ImageView.frame;
rect.size.height = kScrollHeight;
rect.size.width = kScrollWidth;
ImageView.frame = rect;
ImageView.tag = i; // tag our images for later use when we place them in serial fashion
UIButton *btnView2= [UIButton buttonWithType:UIButtonTypeCustom];
[btnView2 setTitle:#"view" forState:UIControlStateNormal];
[btnView2 addTarget:self action:#selector(View:)forControlEvents:UIControlEventTouchDown];
[btnView2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btnView2.frame=CGRectMake(0,0,460,460 );
[scrollView1 addSubview:btnView2];
scrollView1.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
[scrollView1 addSubview:ImageView];
[ImageView release];
}
[self layoutScrollImages]; // now place the photos in serial layout within the scrollview
}
-(IBAction)View:(id)sender{
NSURL *imgUrl=[[NSURL alloc] initWithString:#"http://farm4.static.flickr.com/3567/3523321514_371d9ac42f.jpg"];
NSData *imgData = [NSData dataWithContentsOfURL:imgUrl];
UIImage *img = [UIImage imageWithData:imgData];
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
//[self.navigationController pushViewController:ivc animated:YES];
[imgUrl release];
}
Instead of adding Imageview and transparent button on top of Imageview. You can just add UIButton customtype and set button image to your image in your scrollview. There is no need to take imageview and UIButton both. Just take UIButton and setImage and you will be fine. I tried to give you sample code below from my app. Please modify it as per your need. I think it is what you need.
First of Take all constant in one of global file. I took it in en.lproj. like below.
"TotalThumbnailCount"="6";
"Coloumn"="2";
"ThumbnailHeight"="151";
"ThumbnailWidth"="151";
//Marging between two images
"MarginX" = "6";
"MarginY" = "6";
Then initialize all your local varaibles from global variables. like below
-(void)PopulateVariables{
TotalThumbnail = [NSLocalizedString(#"TotalThumbnailCount",nil) intValue];
Colomn = [NSLocalizedString(#"Coloumn",nil) intValue];
ThumbnailHeight = [NSLocalizedString(#"ThumbnailHeight",nil) intValue];
ThumbnailWidth = [NSLocalizedString(#"ThumbnailWidth",nil) intValue];
MarginX = [NSLocalizedString(#"MarginX",nil) intValue];
MarginY= [NSLocalizedString(#"MarginY",nil) intValue];
}
Now, you should initiate your thumbnail images using UIButton from below function.
-(void)PopulateThumbnails
{
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
XCordinate=MarginX;
YCordinate = MarginY;file:
for(int i=1; i <=TotalThumbnail;i++){
UIButton *btnMenu = [UIButton buttonWithType:UIButtonTypeCustom];
//NSData *data =UIImageJPEGRepresentation(, 1);
[btnMenu setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:#"%d.png",i]] forState:UIControlStateNormal];
CGRect frame = btnMenu.frame;
frame.size.width=ThumbnailWidth;
frame.size.height=ThumbnailHeight;
frame.origin.x=XCordinate;
frame.origin.y=YCordinate;
btnMenu.frame=frame;
btnMenu.tag=i;
btnMenu.alpha = 1;
[btnMenu addTarget:self action:#selector(btnSelected:) forControlEvents:UIControlEventTouchUpInside];
[scrollView addSubview:btnMenu];
XCordinate = btnMenu.frame.origin.x + btnMenu.frame.size.width + MarginX;
if(i%Colomn==0)
{
XPosition = XCordinate;
YCordinate = btnMenu.frame.origin.y + btnMenu.frame.size.height + MarginY;
XCordinate = MarginX;
}
}
[pool release];
}
And then set your scrollview contentsize
scrollView.contentSize = CGSizeMake(XPosition, YCordinate);
When some one tap on any image it will goes in below event.
-(IBAction)btnSelected:(id)sender{
UIButton *btnSelected = sender;
switch (btnSelected.tag) {
}
Let me know if I miss anything and if you don't understand.. Hope this help.
You can add UITapGestureRecognizer to each image:
UITapGestureRecognizer *tapGesture = [[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(tapAction:)] autorelease];
[imageView addGestureRecognizer:tapGesture];
[self.view addSubview:imageView];
When you create your imageview, create a uibutton and add it as a subview to the imageview.
Set the properties of the button to be custom type. Also set the frame of the button same as that of the imageview.
button = [UIButton buttonWithType:UIButtonTypeCustom];
Google how to create a uibutton programatically. You can then add the necessary selectors to handle button press events.
Alternatively you can create a element in Interfacebuilder. A custom class which has a uiimageview and clear uibutton. You can then use this element to add to your uiscrollview.

How can i recive Selected Index Page in UIScrollView

I'm a beginner at iPhone development. I set 95 pages with (320, 480) pixels in scrollView content size.
I want to get the selected index when I scroll in the UIScrollView.
(void)viewDidLoad {
[super viewDidLoad];
NSLog(#"Selected page %d",scrollView.contentOffset.x) ;
scrollView.pagingEnabled = YES;
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"page (%d).png", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i;
NSLog(#"Selected page %d",scrollView.contentOffset.x) ;
[scrollView addSubview:imageView];
[imageView release];
}
[self layoutScrollImages];
}
what do you want to do after getting that selected index number.because you can
check the condition like if sender.tag==5 if you want to use at other place as you have assigned tag to each page or you can implement scrollview with paging.check this
example
https://github.com/ykyuen/ScrollViewWithPaging