How to show high res images on iphone4
Hello,
I read something about the iPhone 4 having a high-res display (retina). I just created this app which loads several feeds. The most items in these feeds have images. But they look terrible on the iPhone 4. I need my app to be running nice on iPhone(s) and Android. My question:
What is the best way to build in support for high-res remote images on iPhone 4 while i keep supporting other platforms?
3 Answers
-
Accepted Answer
I read a cool tip on another post to use webviews to display an image as high res. Let's say your image from the feed is 100x100. To look good on an iPhone 4, you need to display it as 50x50. Here's how you do that with a webView.
var wv = Ti.UI.createWebView({ html:'<body topmargin=0 leftmargin=0><img src="' + your_100x100_image_url + '" width=50 height=50></body>', left:10, top:6, width:50, height:50, borderRadius:8 });Now just add that to whatever window or view you want it to show up in.
This technique works great and looks real nice on the iPhone 4.
Hope that helps.
Dave
-
Maybe you could do this:
// Check the width of the display if ( Ti.Platform.displayCaps.platformWidth .... ) { // Set a variable width the correct image url from the feed depending on res.. var feedImage = .... } // Then var view = Titanium.UI.createView({ backgroundImage:feedImage, width:'auto', height:'auto' }); win.add(view); -
if the remote images are low quality it;s out of your hands. But if you want to use high res local images just put @2x behind your high res image name. the iPhone4 will automatically use this image instead of the normal 'low-res' image.
e.g.:
var view = Titanium.UI.createView({ backgroundImage:'image.jpg', width:360, height:480 }); window.add(view);make sure you have a low-res image called image.jpg and the same image in high-res called image@2x.jpg