I have a big webview in my iPad app and scrolling performance seems to be a big issue, especially the first time you browse the webview. In mobile Safari, the scrolling is extremely smooth and the page simply appears as a transparent checkerboard pattern and loads in as it comes into view. From what I've read, the way to handle this is using CATiledLayer, but I have no idea how to implement this. Can anyone point me in the right direction? Thanks!
A UIWebView should already do its own tiling behind the scenes. There's no way to manually back a UIWebView with a CATiledLayer that I'm aware of, due to its complex rendering architecture.
If you create a UIWebView that is only the size of the display, the only reason I could think of for slower scrolling than Mobile Safari would be other overlaid views that need to be composited on the web view when scrolling.
Related
I am using a UIWebView in my app and when I rotate my iPhone the webview rotates along with it, works just fine. However, you see the corners of the background view behind my webview as it rotates and it can look a little flickery when rotating.
So I went and tried Safari on my iPhone, using the same website and it different. In Safari if I rotate, its far smoother, I can also see it zooms slightly.
For example, I am on Apple's homepage in portrait mode, fully zoomed out to see the whole page. I rotate to landscape and the contents zooms, as far as I can observe this is why it looks smoother.
So, my question, how can I achieve this in my app?
I have played with the 'Scales Page To Fit' option but had no success.
Currently:
Rotating scales the webpage to fit the view. (Whole page is zoomed out to be seen).
Required:
When rotating, rather than rescaling the page, just let it zoom as required.
Don't know if this will help you, but you might find it useful to change the background color (or even background image) of the view behind your webview, which might mitigate your issue with seeing the corners.
If you haven't found a solution yet... As an alternative you could try refreshing the webview, if you notice that the device has rotated, refresh webview and webkit should renderize it again, also play with the HTML meta viewport tag (initial zoom, scale, etc.) and CSS media queries to support different scales. As for the HTML document, try using em, and pt units in CSS rules.
//reload webview
[self.webView reload];
link Orientation Notifications
hope this help in something
I'm diving into iOS development and I'm building a simple timeline app using a static timeline image that I already have. The timeline image won't fit on the screen. The width of the image is about five times the width of the iPad screen, so I have to allow the user to scroll the image horizontally. Here's a mockup...
For each item on the timeline, the user can tap it to receive a description at the bottom of the screen. My questions are...
I was planning to use a UIScrollView with a PageControl at the bottom. Can a UIScrollView hold a single view that holds the entire timeline image or do I have to break the the timeline image up into multiple views?
Are there any performance issues I need to consider when implementing this with a UIScrollView, using a static image?
Are there other approaches to implementing this scrollable timeline that I should consider other than using a UIScrollView?
Thanks so much in advance for your wisdom!
Yes, you'll need a UIScrollView. However, you could use a CATiledLayer to make it perform well. You would just need to pre-tile your static image. Try out the ShutterStock app in the app store (it's free). They have a really nicely done horizontal scrolling implementation that I believe uses a CATiledLayer (though I'm not completely sure).
I did a tutorial on using the CATiledLayer a while back. You can check it out here: http://www.cimgf.com/2011/03/01/subduing-catiledlayer/
If you are going to support iOS 6 and up only, you could look into using a UICollectionView which is very efficient. It works similarly to a UITableView with the cell re-use pattern, but allows you to have horizontal scrolling like you're looking for.
Feedly for iPhone comes with cool design especially its custom pagecontrol(scrollbar?) placed on the top.
I'm developing an app for iPhone, and to use spaces efficiently as much as it's possible I'm trying to find a way to implement custom pagecontrol like Feedly. I actually think it's possible the app is made with HTML5 and CSS? Although I am not sure. I found some custom opensourced pagecontrol frameworks, but they're to do with something else such as dots' colors either sizes.
Here's example image link to Feedly for iOS http://i.stack.imgur.com/wf595.jpg
Although this is an iPad version, basically iPhone one is the same. You see the green bar just below the status bar, if you slide pages the colored bar scrolls. It's much more like scrollbar.
Thanks.
Okay, so I unarchived the app and it turned out it's mainly made with HTMLs and converted using PhoneGap. I'm not going to use HTML in my app, my journey still goes on...
Putting all contents into an UIWebView (implementing in HTML & CSS) is generally a bad idea performance wise.
What Feedly seems to do is use an UIScrollView.
The ScrollView sends several events including when it's moved and tapped.
They then update the green scroll bar on top whenever the ScrollView is moved.
Likely, they will also load the actual contents within the ScrollView as the user approaches their position to conserve memory.
You can implement something like this yourself in a few days of coding work.
(Disclaimer: This is just how I would implement what you showed. How it is actually done - only Feedly knows.)
I am writing my first iPhone app. I'm looking for direction on how to best accomplish an image zoom animation. I have a thumbnail sized image on the screen, and want to show a larger sized image overlaid on the view when the user taps on the thumbnail.
I've seen some suggestions for using the core animation framework. I saw another suggestion to use ImageKit. Is ImageKit available on iPhone, or just OSX?
Again, I'm just getting started, and looking for some guidance.
ImageKit is not available on iPhoneOS, so you have to use CoreAnimation from these choices.
Or you could try to use UIView animation blocks, which is much simpler (but limited compared with CA).
I need to use a website with quite a bit of content in my App via UIWebView.
When I scroll the page in Mobile Safari everything scrolls smoothly. Even if I scroll fast - the grey squared background appears but is rendered properly after a few moments (less then 0.5 seconds).
The same page in UIWebView scrolls jerkily if scrolled fast and doesn't show the grey squared background.
I guess Mobile Safari shows the grey squared background first and renders after that while UIWebview stops the scrolling until the part which will be shown is rendered.
How to I tell UIWebView to behave like Mobile Safari?
It is already being drawn on it's own custom tiledLayer. The problem is that it is by default attempting to draw itself on the main thread so it locks up when I can't be drawn. There is a private message you can call
-(void)_setDrawInWebThread:(BOOL)arg1
That will work BUT you will see empty space when you scroll too fast and it can't keep up with the drawing until it has time to catch up. They use:
-(void)_setDrawsCheckededPattern:(BOOL)arg1
in mobile safari to help with this.
Found a better solution. CGTiledLayer.
http://developer.apple.com/mac/library/documentation/GraphicsImaging/Reference/CATiledLayer_class/Introduction/Introduction.html