Using Scroll View and Page Controller for tutorial screen - ios

I want to make a tutorial screen and have put a scroll view and a Page Controller. I want to put image so that the user can swipe through the tutorial screen on first boot. However I can put labels like this
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
float defWidth = _scrollView.frame.size.width;
float defHeight = _scrollView.frame.size.height;
_scrollView.pagingEnabled = YES;
_scrollView.contentSize = CGSizeMake(defWidth * _pageControl.numberOfPages, _scrollView.frame.size.height);
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.scrollsToTop = NO;
_scrollView.bounces = NO;
_scrollView.delegate = self;
UIColor *bgColor[] = {[UIColor orangeColor],[UIColor brownColor],[UIColor grayColor],[UIColor darkGrayColor],[UIColor blackColor]};
for (int i = 0; i < _pageControl.numberOfPages; i++) {
UILabel *label = [[UILabel alloc] init];
float x = (defWidth * (float)i);
label.frame = CGRectMake(x, 0.0f, defWidth, defHeight);
label.backgroundColor = bgColor[i];
label.textColor = [UIColor whiteColor];
label.font = [UIFont fontWithName:#"AppleGothic" size:20];
NSLog(#"%d,%f", i, x);
label.text = [NSString stringWithFormat:#"hogehoge%d", (i + 1)];
NSLog(#"%#", label.text);
[_scrollView addSubview:label];
}
}
But I cannot put images instead of labels. How can I put images in the scroll view so that it will be a slide show of few pictures?

to create a sliding image show so the user can swipe through the the images or images of the tutorials as you say, i find ray's tutorial very helpful. it also comes with the project sample code that has four different ways of sliding images. here is the link for that tutorial which is going to help you understand how it can be done.
http://www.raywenderlich.com/10518/how-to-use-uiscrollview-to-scroll-and-zoom-content
in adition if you want to just have a slide show there is a great control done by kirualex that is a nifty control and you can download it here:
https://github.com/kirualex/KASlideShow
i could have done a run down of these methods but it would be very lengthy and i think by going through the tutorial and looking at the codes you will understand this subject much better.

Related

How to start an animation when a child view controller's view actually appears?

I am building a tutorial that uses custom subclasses of UIViewController to supply views for the tutorial. I would like to have a subview with instructions appear and then slowly fade out. I am trying to do it this way: a wrapper page controller class, custom UIViewController classes added as child view controllers, and an animation added to the custom UIViewController class's view.
Here is an example of how I add a child view controller to a tutorial page view:
else if(index==2)
{
FollowTutorViewController *next1 = [[FollowTutorViewController alloc] init];
next1.view.userInteractionEnabled = NO;
next1.typeDisplay = 1;
next1.index = index;
[page addChildViewController:next1];
next1.view.frame = page.view.frame;
[page.view addSubview:next1.view];
}
And here is an example of how I do the animation within the subclassed UIViewController:
- (void)messageTutorial
{
CGFloat height = [[UIScreen mainScreen] bounds].size.height;
CGFloat width = [[UIScreen mainScreen] bounds].size.width;
UILabel *directionsLabel = [[UILabel alloc] initWithFrame:CGRectMake(width/2, height/2, 100, 100)];
directionsLabel.backgroundColor = ORANGE_COLOR;
directionsLabel.textColor = BACKGROUND_COLOR;
directionsLabel.text = #"Follower pages show who you're following and who's following you\n\nYou can also see a list of most-controversial posters when you look for New People \n\nBuzz and Judge to gain followers";
directionsLabel.font = [UIFont systemFontOfSize:SMALL_FONT_SIZE];
[directionsLabel setLineBreakMode: UILineBreakModeWordWrap];
[directionsLabel setNumberOfLines:0];
CGSize constraint = CGSizeMake(width*.8 , 200000.0f);
CGSize size = [directionsLabel.text sizeWithFont:[UIFont systemFontOfSize:SMALL_FONT_SIZE] constrainedToSize:constraint];
directionsLabel.alpha = .8;
CGRect f = directionsLabel.frame;
f.size = size;
directionsLabel.frame = f;
directionsLabel.center = self.view.center;
[self.tableView addSubview:directionsLabel];
[UIView animateWithDuration:15 animations:^{
directionsLabel.alpha = 0;
} completion:^(BOOL finished) {
[directionsLabel removeFromSuperview];
}];
}
I would like to make the label disappear slowly starting when the user sees that view, but now when I run this code, regardless of where I call it, the view is gone by the time the user looks at the page. I have tried running this code in viewWillAppear, viewDidAppear, viewDidLayoutSubviews of the child custom UIViewController. Any other suggestions?

MarqueeLabel not working , its just showing as an UILabel on screen

I have included the files from the link https://github.com/cbpowell/MarqueeLabel in my project
MarqueeLabel *continuousLabel2 = [[MarqueeLabel alloc] initWithFrame:CGRectMake(10, 440, self.view.frame.size.width-20, 20) rate:10 andFadeLength:10.0f];
continuousLabel2.tag = 101;
continuousLabel2.marqueeType = MLContinuous;
continuousLabel2.animationCurve = UIViewAnimationOptionCurveLinear;
continuousLabel2.continuousMarqueeExtraBuffer = 50.0f;
continuousLabel2.numberOfLines = 1;
continuousLabel2.opaque = YES;
continuousLabel2.enabled = YES;
continuousLabel2.textAlignment = NSTextAlignmentLeft;
continuousLabel2.textColor = [UIColor colorWithRed:0.234 green:0.234 blue:0.234 alpha:1.000];
continuousLabel2.backgroundColor = [UIColor clearColor];
continuousLabel2.font = [UIFont fontWithName:#"Helvetica-Bold" size:14.000];
continuousLabel2.text = #"This is another long label that scrolls continuously with a custom space between labels! You can also tap it to pause and unpause it!"
[self.view addSubview :continuousLabel2];
I have pasted the above code in my project but the text just appears as an UILabel and not as marquee. Please advice
Put this at the end of your code
[continuousLabel2 restartLabel];
OR
[self performSelector:#selector(startlabel) withObject:nil afterDelay:1.0];
-(void)startlabel{
[continuousLabel2 restartLabel];
}
I use resetLabel to start the marquee animation.
Also don't forget to set the labelize property to NO. i.e.
[self.marqueeLabel resetLabel];
self.marqueeLabel.labelize= NO;
Courtesy of Github documentation of Marquee Label
"MarqueeLabel tries its best to automatically begin scrolling when appropriate, but sometimes the way your view/view controller appears onscreen can trip it up.
Using the restartLabel instance method to "manually" start scrolling on a MarqueeLabel"
[yourMarqueeLabel restartLabel];

Display Content on Sections of UIScrollView

I am trying to hide content on only one section (one photo) of my UIScrollView and am using a contentOffsetto access that section like below. If the content offset is between 0 and 320 (the size of my image) I am hiding various elements on the screen. However when the user swipes over to the next photo (i.e. content offset greater than 320) I would like to show the content again. The first portion of my code works great, however I am not sure that there is any detection of the content offset being greater than 320 when the user swipes. I am fairly new with ScrollViews and am not sure if they update the content offset constantly or whether they detect user swipe that would cause an update. Are there any ideas on how I can get the elements hidden to equal NO after the user has scrolled beyond my first image?
if (scroller.contentOffset.x >=0<=320)
{
preview.hidden = YES;
share.hidden = YES;
barView.hidden = YES;
saveButton.hidden = YES;
shaddows.hidden = YES;
}
else if (scroller.contentOffset.x >320)
{
//This part does not work
preview.hidden = NO;
share.hidden = NO;
barView.hidden = YES;
saveButton.hidden = YES;
shaddows.hidden = YES;
}
Here is the rest of my scroller code:
int PageCount = 2;
NSMutableArray *myArray =[[NSMutableArray alloc]initWithObjects:#"12-4.png",#"13-4.png",nil];
scroller = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
scroller.scrollEnabled=YES;
scroller.backgroundColor = [UIColor clearColor];
scroller.pagingEnabled = YES;
[self.view addSubview:scroller];
width=scroller.frame.size.width;
xPos=0;
for (int i=0; i<PageCount; i++)
{
ImgView = [[UIImageView alloc]initWithFrame:CGRectMake(xPos, 0, scroller.frame.size.width, scroller.frame.size.height)];
[ImgView setImage:[UIImage imageNamed:[myArray objectAtIndex:i]]];
[scroller addSubview:ImgView];
scroller.contentSize = CGSizeMake(width, 0);
width +=scroller.frame.size.width;
xPos +=scroller.frame.size.width;
}
Thank you!
Change this line
if (scroller.contentOffset.x >=0<=320)
To
if (scroller.contentOffset.x <= 320)
Because the original doesn't do what you think it will.
This code should be in the scrollViewDidScroll: delegate method (make sure your controller is the scroll view delegate).
Add some log statements so it prints out as the user is scrolling what the content offset it and what page your code thinks it is.

iOS Nested UIScrollViews Not Responding

I've been searching around on how to nest UIScrollViews.
It seems like it should be as easy as adding the inner scroll views by using addSubview: of the container scroll view. I have everything showing up visually correct but the functionality of the inner scroll views is non existent despite supplying them with proper frames and content sizes.
My code below shows what I have so far. Only the outer scroll view scrolls. I want it so that the outer scroll view controls left to right scrolling and each inner scroll view controls vertical scrolling of their related page content.
self.containerScroll = [[UIScrollView alloc]init];
self.containerScroll.frame = CGRectMake(0,(self.headerView.frame.size.height + self.pageControl.frame.size.height),screenWidth, (screenHeight - (self.headerView.frame.size.height + self.pageControl.frame.size.height)));
self.containerScroll.backgroundColor = [UIColor clearColor];
self.containerScroll.alpha = 1;
self.containerScroll.pagingEnabled = YES;
self.containerScroll.contentSize = CGSizeMake(self.containerScroll.bounds.size.width*3,1);
self.containerScroll.bounces = NO;
self.containerScroll.delegate = self;
[self.view addSubview:self.containerScroll];
self.page1Scroll = [[UIScrollView alloc]init];
self.page1Scroll.frame = CGRectMake(0,0,self.containerScroll.bounds.size.width,self.containerScroll.bounds.size.height);
self.page1Scroll.backgroundColor = [UIColor redColor];
self.page1Scroll.alpha = 1;
[self.page1Scroll addSubview:self.feedPageVC.view];
self.page1Scroll.contentSize = CGSizeMake(320,500);
self.page1Scroll.delegate = self;
[self.containerScroll addSubview:self.page1Scroll];
self.page2Scroll = [[UIScrollView alloc]init];
self.page2Scroll.frame = CGRectMake(self.containerScroll.bounds.size.width,0,self.containerScroll.bounds.size.width,self.containerScroll.bounds.size.height);
self.page2Scroll.backgroundColor = [UIColor greenColor];
self.page2Scroll.delegate = self;
[self.containerScroll addSubview:self.page2Scroll];
self.page3Scroll = [[UIScrollView alloc]init];
self.page3Scroll.frame = CGRectMake(self.containerScroll.bounds.size.width*2,0,self.containerScroll.bounds.size.width,self.containerScroll.bounds.size.height);
self.page3Scroll.backgroundColor = [UIColor blueColor];
[self.page3Scroll addSubview:self.detailsPageVC.view];
self.page3Scroll.contentSize = CGSizeMake(320,500);
self.page3Scroll.delegate = self;
[self.containerScroll addSubview:self.page3Scroll];
self.containerScroll.contentSize = CGSizeMake(self.containerScroll.bounds.size.width*3,1);
Looks like the height of your content is set to 1. If a child is larger than its parent, it won't function correctly (works the same for buttons).
Also, make sure you know which scrollview you're handling in the delegate methods. All the scrollviews will be handled in the same method and it could cause you problems.

Xcode: UIScrollView with Paging Tweak

I found a great tutorial online that shows you how to page through different pages, well kind of. Here is the link to the tutorial here: http://www.iosdevnotes.com/2011/03/uiscrollview-paging/
The question I have is, how can I tweak his code so that instead of loading "colors" it loads different independent views or view controller files I create? Like I see it loads it's information from the NSArray, but how do you code it so that you include views or view controllers inside that array, and do you have to add anything else special to make this happen?
Here is the code I'm referring to from his tutorial which is in the implementation file:
- (void)viewDidLoad {
[super viewDidLoad];
pageControlBeingUsed = NO;
NSArray *colors = [NSArray arrayWithObjects:[UIColor redColor], [UIColor greenColor], [UIColor blueColor], nil];
for (int i = 0; i < colors.count; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIView *subview = [[UIView alloc] initWithFrame:frame];
subview.backgroundColor = [colors objectAtIndex:i];
[self.scrollView addSubview:subview];
[subview release];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * colors.count, self.scrollView.frame.size.height);
self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = colors.count;
}
As a quick thought, you could try creating an array or similar of views instead of colours.
Then in the for loop get the views out of the array and use this in the addSubView: message.
This would work for a few views but would not scale well.
I do something similar to this but with UIImageViews to be able to scroll a few images.

Resources