How to use scroll view on iPhone? - iphone

I want to display a text with a lot of lines. I added a multiline-label to a scroll view, but it didn't show anything. Looks like this is not the correct way to use the scroll view. How to use scroll view so that users can drag down to see more text?

Apple's UIScollView documentation is quite good, you should start there and understand the class.
Think of a Scrollview as a large view surface over which the screen slides*. You can add subviews to the scrollview and then scrolling is like positioning the screen over the scrollview - the screen acts like a window you can see through to part of the scroll view's content below.
To do this, a scrollview has a few extra properties over a normal UIView - but it is like a UIView in one imprtant respect: it doesn't render any content directly itself. You need to add a subview to draw your text. A scrollview is set up and displayed in exactly the same way as a UIView - i.e. you set the frame add it to another view and to show your text you need to add subviews to the UIScrollView that can actualy render the text.
In order to set up a basic UIScrollView you request, you should just create it like a normal full screen view - set the frame to be the same size as the window and add the scrollview to the window as a subview. Then make a large UITextView to hold your text. The UIText view can be as large as you like - specifically it can be bigger than the screen. set the contentSize property of the UIScrollView to be the same as the frame of the UITextView and then add the UIText view as a subview of the UIScrollView.
Once you have this working, you can move the content automatically with the contentOffset property, controll zooming and set up a delegate to observe scrolling events.
* more accurately, over which the frame slides but I'm assuming you are making a full screen UIScrollView. I'm sure you can generalise it if you want a smaller view.

You can just use a UITextView. It's a child of UIScrollView, and if you set it's text property to an amount of text that does not fit within it's frame, the view will become scrollable.

I used UIScrollView this way for an instructions pane in one of my applications. It worked but I was unhappy with the result. I then switched to using a UIWebView and have been much happier with the result. It handles sizing the scroll view automatically, I get all the formatting capabilities of HTML and I can have links that go to additional information (or external sites) with no more than adding another HTML file and maybe some delegate code. Here is the code I used (and I added the HTML file to my app as a resource):
NSString *path = [[NSBundle mainBundle] pathForResource:#"instructions" ofType:#"html"];
NSFileHandle *readHandle = [NSFileHandle fileHandleForReadingAtPath:path];
NSString *htmlString = [[NSString alloc] initWithData: [readHandle readDataToEndOfFile] encoding:NSUTF8StringEncoding];
[self.instructionsView loadHTMLString:htmlString baseURL:nil];

U may refer to this website http://www.edumobile.org/iphone/iphone-programming-tutorials/scrollview-example-in-iphone/
U follow the step by step to make the scroll view in iphone...good luck:)

Related

How to adjust webview inside a parent scrollview?

I have a ScrollView within which I am adding TextViews, ImageViews and a UIWebView. I am able to dynamically adjust the height of all these views except the UIWebView.
I have turned off the scrolling of the UIWebView, and want to resize the WebView according to its content. And at the same time resize the scrollview according to the resized WebView.
The scrollview should contain the resized WebView. I think there is much discussion about and around this but I haven't been able to reach a concrete solution. So any help would be appreciated.
here is what you can try
After you have loaded content in the UIWebView you can use it's stringByEvaluatingJavaScriptFromString: method to ask the html document for its height. This is a little tricky but should work.
You can do something like this:
NSInteger height = [[webView stringByEvaluatingJavaScriptFromString:
#"document.body.scrollHeight"] integerValue];
The scrollheight mught not be the best. You have a couple of options. Experiment with the document properties mentioned in http://james.padolsey.com/javascript/get-document-height-cross-browser/
after that u can resize you scrollview to the content,
this is the only method seems working, till now. Good- luck

How to set UITextView's content inset like Notes App

I am working in an app in which I need to give feature like Notes App in iphone. as shown in first screen shot , initially , notes leaves a tab before the content starts, I also wanted to do the same and for that when I set Left Content inset (of UITextView) by 25 , it shows like in screenshot 2, here you may see the image also gets shifted. I have set image as background. I don't know how to solve this problem.
I also tried by adding image as subview of UITextview but it won't repeat the lines, while scrolling (image of lines) like notes app.
I'm setting the background of Textview by following code.
[textView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"line_image.png"]]];
Please tell me if I am going wrong or any extra effort needed to get desired output.
Thanks
UITextView is UIScrollView subclass so all relevant delegate method are available for you (e.g. scrollViewDidScroll:) - you can adjust your custom background in that method.
There's very nice post on Dr.Touch blog about recreating Notes app interface - you can get general idea about how it is done from it. Basically what is done there is adding custom view that draws background behind the text view and adjust it in text view's delegate methods and also using KVO on its 'contentSize' property.
#Dinesh gave nice solution but it doesn't sound to be generic as I want to use image of lines instead of drawing them. Image has some special effects that can not be achieved by drawing. So to solve it I created a table view below the textview keeping textview's background transparent. Now just added the image of line to my tableview's custom cell and set content offset of UItableview same as of the scrollview (subview of text view ,refering to the answer of #Vladimir ) .
And used the following code to scroll my tableview with scrolling the textview and got the desired output.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
tableView.contentOffset =scrollView.contentOffset;
}
Keeping my tableview's number of rows at a very large number.
PS: instead of setting the content inset of textview, i set its frame's X position and decreased the width relaively.

iPhone: How can I turn a flipside view into a scrolling UIScroll view?

This should be simple.
I'm making a very basic app, based on the Utility Application template of XCode.
On the flipside, I have more content than fits the screen.
The flipside is a UIView. I think it should be a UIScrollView, but somehow I don't get it to work.
Can anybody here advise me on this?
With a UIScrollView it is not enough just to place the control into Interface Builder and place the items within it; you have to set its content size in code.
Therefore in the -viewWillAppear method (or similar) you should have something like:
[scrollView setContentSize:CGSizeMake(320, 600];
This would make the content size inside the scroll view 600 pixels high (ie larger than the height of your iPhone display). If everything else is wired up correctly, this shoud now work.
Note: You may also then need to reposition your objects within the view. Set frame.origin for the objects that require this...

iPhone Horizontal Scrolling

I am trying to create an app with horizontal scrolling, so that one would be able to scroll horizontally through a series of images. I watched the WWDC Session 104 video on this, and while they made an interesting app, they flew through the basics of it very quickly.
I understand using the UIScrollView, and that I have to enable paging. After that they say that I should add more views as subviews of the scrollview, but I am not clear on how to do that. I am also not clear on how I add my images to those views.
As you can probably tell I am pretty new at this so any help would be appreciated.
You want to look into UIImageView. It's a view specifically for holding images.
When you add your images, you want to set their rects (probably using initWithFrame: for each UIImageView) so that:
the first image is at 0,0
the second image is at 320,0
third is at 640,0 (etc)
I.e. each image is 320 pixels right of the previous.
The final step is to set the contentSize for your UIScrollView -- this is a CGSize which describes the total size of the scroll view.
If you have 3 images, you would then set it to (320*3) * 480 using e.g.
myScrollView.contentSize = CGSizeMake(320*3, 480);
A lot of people, when they initialize the scroll view, have a for loop or similar which steps through the images they want to display. These for loops tend to look something like this:
CGFloat scrollWidth = 0.f;
for (UIImage *someImage in someNSArrayWithImages) {
UIImageView *theView = [[UIImageView alloc] initWithFrame:
CGRectMake(scrollWidth, 0, 320.f, 480.f)];
theView.image = someImage;
[myScrollView addSubview:theView];
[theView release];
scrollWidth += 320.f;
}
myScrollView.contentSize = CGSizeMake(scrollWidth, 480.f);
This way you'll get things lined up and you'll get the content size for you at the same time.
If you want to make it so that the scroll view "intelligently" scrolls to each image and stops when people slide left/right, you can do myScrollView.pagingEnabled = YES.
Hope that helps get you going.
Assuming you have "infinite" images, putting them all there at or before launch time in a huge UIScrollView will not be an option. (there is a limit to the size of a UIView)
The way I solved it: Make a UIScrollView covering the whole screen. It's content should be a UIView of 3*320 width and 480 height, extending 320px left and 320px right.
Put 3 UIImageView's in it, left, middle and right. Set paging=YES, so the uiscrollview clips to the 3 "pages" you've created.
Make sure your class is the delegate of the uiscrollview, and listen for
-(void)scrollViewDidEndDragging:(UIScrollView*)sv willDecelerate:(BOOL)notFinished
-(void)scrollViewDidEndDecelerating:(UIScrollView*)sv
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView*)sv
and make the appropriate transitions on hitting paging boundaries; shift images and set ContentOffset so you're looking at the center image again.
I suggest you make this first, and only then read on...
Then you will hit on a bug, documented here UIScrollView - (bounces = NO) seems to override (pagingEnabled = YES) and here http://www.iphonedevsdk.com/forum/iphone-sdk-development/935-paging-uiscrollview.html, which makes that you cannot disable bouncing and have paging enabled at the same time. So enable bouncing, and subclass UIScrollView, overruling setContentOffset in there to prevent bouncing. (having bouncing really enabled will make for a rather unusual user experience)
Have a look at Apple's PageControl sample code. It's fairly short and easy to follow so you'll get the gist of setting up a project where multiple view controllers are loaded as you swipe horizontally.
Once you have this setup then it's the view controller's responsibility to load its own content (in your case, an image). You should make sure you understand how to load images first (using threads, etc) before you tackle paging, etc.
Think of it as two independent tasks. The view control is responsible for loading and displaying an image. The scroll view with paging just tells the appropriate view controller when to load itself (it doesn't care what the view controller does once its loaded)
Good luck!

Iphone Custom Scrollview indicator

I am currently working on an application for a client, and they have made an odd request. The request involves putting a custom image as the indicator for the scrollview. I am not even sure if this is possible but if it is can you please let me know how one would go about doing that.
Thanks
UIScrollView streches a small, semi-transparent circle image to generate its scrollbars. You can find this image as the first subview of a UIScrollView:
UIImageView *circle = [scrollView.subviews objectAtIndex:0];
However, as I said this image is stretched, and as far as I can tell, only the alpha values are considered when drawing the scroll bars.
So for example if you're only interested in changing the top/bottom ends of the scroll bar, you can try to change this image. However, I doubt you'll be able to do anything interesting.
A possible solution that comes to mind, and this is only a theory, is to add a custom, transparent UIView on top of a UIScrollView. Then you can hide the default scroll bar (by using showsHorizontalScrollIndicator and showsVerticalScrollIndicator), pass the necessary touch events to the UIScrollView to scroll the content, and draw the scrollbars in your custom view.