How do you make a menu like in Cut the Rope game. Image below:
I am able to make three images slide horizontally but failed to make it as a button.
Though I don't need it to be fancy as the game's, but just a simple button.
Do I need to stack three different Views with its respective buttons inside UIScrollView? I am leaning towards doing it programmatically though.
Code: http://pastebin.com/ikrJ1U7w
Its actually a UIScrollView which containing UIButton of custom type & has image on that. Below that is UIPageIndicator.
You can create it as below, althouh also search for
How to create UIButton programatically to add on scrollview
In your view controller,
In viewDidLoad, in scrollView add the buttons.
UIScrollView *scrollView = // initalize & set frame as per ur req
scrollView.userInteractionEnabled = YES;
scrollView.pagingEnabled = YES;
float x = 0.0;
float y = 0.0, width = 320.0;
float height;
for (int j = 0; j <= numberofpagesYouwant; j++)
{
CGRect frame;
UIButton *button = // Create a button at here;
frame = CGRectMake(x, y, width, height); // Use this as your button frame
[scrollView addSubview:button];
[button release];
x = x + width;
}
scrollView.contentSize = CGSizeMake(numberOfPagesYouHave * 320, heightOfYourScrollView);
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat pageWidth = self.scrollView.frame.size.width;
int page = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
if(page != activityIndicator.currentPage)
{
NSLog(#"now page change:%d",page);
[self changePageIndicator:page];
}
}
-(void)changePageIndicator:(int)index
{
activityIndicator.currentPage = index;
}
- (void)setNumberOfPages:(int)numPages1
{
activityIndicator.numberOfPages = numPages1;
}
Yes, I am pretty sure this is just several buttons placed on top of some sort of a scrollView. (most likely done programatically).
Related
I need to create an horizontal list with a scroll, this list is made of 10 images, in the screen only fits 1 and a half of these images, so when the user scroll i need to set at the center of the screen an image and besides it a portion on the forward image and backward image. So far what i have is this:
scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 150, 1024, 520)];
scroll.delegate = self;
scroll.pagingEnabled = NO;
int numberOfViews = 10;
float xOrigin = 0;
for (int i = 0; i < numberOfViews; i++) {
xOrigin = i * 600;
FigureImage *tape = [[FigureImage alloc] initCustom];
[scroll addSubview:tape];
FigureImage *pictureFigure = [[FigureImage alloc] initCustom];
[scroll addSubview:pictureFigure];
}
scroll.contentSize = CGSizeMake(numberOfViews*10, 500);
pageWidth = (numberOfViews*10)/numberOfViews;
[self.view addSubview:scroll];
With this code i am able to scroll the images, but the scroll doesnt stop at any particular image, how can i able the last x position to stop the scrolling?
See the delegate method -scrollViewWillEndDragging:withVelocity:targetContentOffset:.
Its last parameter is an in-out CGPoint whose value you can change so that the scroll comes to rest with an image centered exactly.
I have UIScrollview that contains different UITableviews. You can scroll through these UITableviews using a UIPagecontrol.
This is how I add my UITableview to the UIScrollview
- (void)loadPage:(NSInteger)page {
if (page < 0 || page >= self.pageStages.count) {
// If it's outside the range of what we have to display, then do nothing
return;
}
// Load an individual page, first seeing if we've already loaded it
UIView *pageView = [self.pageViews objectAtIndex:page];
if ((NSNull*)pageView == [NSNull null]) {
CGRect frame = self.scrollView.bounds;
//frame.size.width = 280.0f;
frame.size.height = self.scrollView.bounds.size.height;
float offset=20;
frame.size.width = frame.size.width-(2*offset);
frame.origin.x = (326 * page)+offset;
frame.origin.y = 0;
UITableView *tableStage = [[UITableView alloc]initWithFrame:frame];
tableStage.backgroundColor = [UIColor colorWithRed:(250/255.0) green:(248/255.0) blue:(247/255.0) alpha:100];
tableStage.contentMode = UIViewContentModeScaleAspectFit;
tableStage.delegate = self;
tableStage.dataSource = self;
tableStage.tag = page;
tableStage.contentMode = UIViewContentModeScaleAspectFit;
[self.scrollView addSubview:tableStage];
[self.pageViews replaceObjectAtIndex:page withObject:tableStage];
}
}
Now I want that user can jump to a certain UITableview from another UIViewController. Therefore I have a variable pageNumber. When I set the pageNumber I call a method jumpToPage3 and I give the pageNumber with it. This is how the function looks like.
-(void)jumpToPage3:(NSNumber *)page{
NSLog(#"jump to page 3");
float offset=30;
float height = self.scrollView.bounds.size.height;
float width = 320 - (2*offset);
int pagee = [page intValue] - 1;
float x = (320 * pagee) + offset;
[self.scrollView scrollRectToVisible:CGRectMake(x, 0, width , height) animated:NO];
}
The problem is that it is not jumping to the correct page. It stays on the first page.
Can someone help me with this?
When you add content to the scroll view you also have to tell increase the contentSize
I have ScrollView and UIView created in interface builder (but can as well be code). I want to add random amount of thumbnails (subviews) to UIView and be able to scroll it up-down if there are more than the screen can take. Hovewer, I can't get ScrollView to scroll.
Where and how do I resize UIView and add it as a subview of ScrollView?
When do I set contentSize of scrollView to make it expand along with uiview? I tried creating fixed large contentSize but didn't work as well.
What properties in IB I might need to change to make it work?
I'd like to make the images in uiview clickable in next step.
I guess I could also make both view in code without IB. Just somehow can't get it to work.
Thanks in advance !
//declare base view
UIViewController *viewForLoadForm =[[UIViewController alloc] init];
viewForLoadForm.view.frame=CGRectMake(0, 0,screenSize.size.width,screenSize.size.height);
viewForLoadForm.view.backgroundColor=[UIColor blackColor];
[Manview.view addSubview:viewForLoadForm];
//declare scrollview and add to base view
UIScrollView *scrollview=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, screenSize.size.width,screenSize.size.height)];
scrollview.indicatorStyle=UIScrollViewIndicatorStyleBlack;
[scrollview setContentSize:CGSizeMake(screenSize.size.width,screenSize.size.height)];
scrollview.clipsToBounds = NO;
scrollview.scrollEnabled = YES;
scrollview.pagingEnabled = NO; scrollview.showsVerticalScrollIndicator =NO;
scrollview.alwaysBounceVertical= YES;
[viewForLoadForm.view addSubview:scrollview];
//Add your controls to scrollview that s image view or something which is needed to display
.........your control's code (textbox,imageview etc)
//took last control's y postion and set your K
float k=Last control's y position +100;(some thing which ll be decide scroll size)
// reassign the scrollview height
[scrollview setContentSize:CGSizeMake(screenSize.size.width,k)];
use above line for scroll view size adjustment at run time.
screenSize.size.width is 320 here
code snippet,
- (void) createThumbView
{
float y_axis = Set y axis;
int x = 0;
int totalImgs = total images;
int tempCnt = 0;
for (int i = 0; i < totalImgs;)
{
float x_axis = set x axis;
int loopCount = 0;
if (totalImgs - tempCnt >= (no of images in row))
{
loopCount = (no of images in row);
}
else
{
loopCount = totalImgs % (no of images in row);
}
for (int j = 0; j < loopCount; j++)
{
MasksData *mData = [masksList objectAtIndex:x];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(x_axis, y_axis, width, height);
[btn setImage:[UIImage imageNamed:[NSString stringWithFormat:#"%#.png",mData.bgImage]] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor clearColor];
btn.tag = x;
[scroll View addSubview:btn];
//photoCount++;
x_axis += width + some space;
tempCnt++;
i++;
x++;
}
y_axis += height + some space;
scroll View.contentSize = CGSizeMake(320.0, y_axis);
}
}
I have a scrollview that automatically generates a series of subviews containing imageviews. The concept is that it's pretty much a custom PDF style reader, where each page is loaded in to an imageview as an image. There are three "layers" - the outer UIScrollView, the automatically generated subViews and the imageview inside the subview.
I've been having some trouble with this, I've asked the question previously, but unfortunately, the core of my question was in the wrong place. Here is my second attempt:
On rotate, everything is rotated as needed. Unfortunately, this is what I'm getting:
Obviously, I would like Image 1 to be centred and for there to be no hint of image 2 until you flick the view across.
Here is my code for setting up the view:
- (void)loadView {
[self setUpView];
}
- (void)setUpView {
//INITIALISE PAGING SCROLL VIEW
CGRect pagingScrollViewFrame = [[UIScreen mainScreen] bounds];
pagingScrollViewFrame.origin.x -= 10;
pagingScrollViewFrame.size.width += 20;
pagingScrollView = [[UIScrollView alloc] initWithFrame:pagingScrollViewFrame];
pagingScrollView.contentMode = UIViewContentModeScaleAspectFit;
//CONFIGURE PAGING SCROLL VIEW
pagingScrollView.pagingEnabled = YES;
pagingScrollView.backgroundColor = [UIColor blackColor];
pagingScrollView.contentSize = CGSizeMake(pagingScrollViewFrame.size.width*7, pagingScrollViewFrame.size.height);
//ACTIVATE PAGING SCROLL VIEW
self.view = pagingScrollView;
//ADD PAGES TO SCROLL VIEW
for (int i = 0; i < 7; i++){
ImageScrollView *page = [[[ImageScrollView alloc] init] autorelease];
[self configurePage:page forIndex:i];
[pagingScrollView addSubview:page];
}
}
How do I re-define the size of the frame? What function should I call etc. How do I centre the image?
I'm new to this so I apologise for the ambiguity of my question.
Cheers
I've figured it out. It was the Frame of the individual pages that I needed to change, so (with the help gained from another question) I wrote a re-orient method.
The first step to this came because I figured out that I needed to iterate through and re-size each frame for each of my pages and then re-apply the frames to the view. For this to happen I needed to create an array which I would fill in the For Loop above. I have 7 total pages.
Then I could (on rotate) call the below re-orient method to re-size each view:
- (void) reOrient{
if(UIInterfaceOrientationIsPortrait(self.interfaceOrientation)){
CGRect f;
int i = 0;
for (ImageScrollView *page in pageArray) {
f = page.frame;
f.size.width = 320;
f.origin.x = (f.size.width * i);
page.frame = f;
pagingScrollView.contentSize = CGSizeMake(f.size.width * 7, 480);
i++;
}
}else{
CGRect f;
int i = 0;
for (ImageScrollView *page in pageArray) {
f = page.frame;
f.size.width = 480;
f.origin.x = (f.size.width * i);
page.frame = f;
pagingScrollView.contentSize = CGSizeMake(f.size.width * 7, 480);
i++;
}
}
}
This worked for me:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];
//get current page based on offset before rotation
NSInteger currentPage = self.scrollView.contentOffset.x / self.scrollView.bounds.size.width;
//set anticipated scrollview content size by switching width and height (they will be switched after rotation)
[self.scrollView setContentSize:CGSizeMake(totalPages * self.view.bounds.size.height, self.view.bounds.size.width)];
//set the anticipated content offset based on height before rotation
[self.scrollView setContentOffset:CGPointMake(currentPage * self.scrollView.bounds.size.height, 0.0f)];
}
Basically I am setting the content offset for the new scrollview content size before rotating (I'm switching height and width for the anticipated height and width).
This worked for me when rotating a full-screen paged UIScrollView.
All of the paged subviews have the following autoresizing mask so that they neatly fall into place after rotation:
UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin
I have a UITableView containing a list of maps. When an item is selected a new sub view is added to the main window and the map is shown. In my view controller for the map view the following method gets called each time it's displayed:
- (void)showMap {
UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:mapImage]];
float imageHeight = tempImageView.image.size.height;
float targetHeight = scrollView.frame.size.height - mapNavigationController.navigationBar.frame.size.height;
scrollView.contentSize = tempImageView.image.size;
scrollView.maximumZoomScale = 1.0;
scrollView.minimumZoomScale = targetHeight / imageHeight;
scrollView.clipsToBounds = YES;
self.imageView = tempImageView;
[tempImageView release];
[scrollView addSubview:imageView];
scrollView.zoomScale = scrollView.minimumZoomScale;}
A new UIImageView is added each time to the UIScrollView and when the view disappears the UIImageView is removed. The zoomScale is calculated so that the image fits according to the aspect ratio.
Now to my problem the first time an item is clicked everything works fine and the map image fills the full height of the UIScrollView, but the next time an item is clicked the height of the UIScrollView is smaller. I also should note that the main window contains a tab bar.
So now to my questions:
How can the UIScrollView change it's size?
And is there any other dynamic way to retrieve the targetHeight?
Thanks in advance!
I was having a similar problem. It turns out the issue was that I was subclassing UIScrollView for the main view of my UIViewController, and the UIViewController had its own ideas about the correct size of the scroll view.
I fixed it by making the main view subclass UIView rather than UIScrollView, then adding a UIScrollView* content_view to the view, and adding my subviews to content_view rather than to self.
Not sure if this helps you or not, however...
Ok, i managed to found a solution my self, maybe not the best but it's dynamic and it works.
But i still don't understand why the height of UIScrollView would change. If someone know why please comment.
NSInteger scrollViewHeight = 0;
- (void)showMap {
if (scrollViewHeight == 0) {
scrollViewHeight = scrollView.frame.size.height;
} else {
scrollView.frame.size.height = scrollViewHeight;
}
UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:mapImage]];
float imageWidth = tempImageView.image.size.width;
float imageHeight = tempImageView.image.size.height;
float targetWidth = scrollView.frame.size.width;
float targetHeight = scrollViewHeight - mapNavigationController.navigationBar.frame.size.height;
float scale = targetHeight / imageHeight;
if (scale * imageWidth < targetWidth) {
scale = targetWidth / imageWidth;
}
scrollView.contentSize = tempImageView.image.size;
scrollView.maximumZoomScale = 1.0;
scrollView.minimumZoomScale = scale;
scrollView.clipsToBounds = YES;
self.imageView = tempImageView;
[tempImageView release];
[scrollView addSubview:imageView];
scrollView.zoomScale = scale;}
}