Problem
The backgroundLeftCap is broken on Ti.UI.Views on Retina displays. It works fine on Ti.UI.Buttons.
Reproduction
Drop the following in an app.js, and download the two attached images.
Note that the two search.png and search@2x.png images are color coded so you can see that it is consistently using the @2x image on the Retina device, it's just messing up (miscalculating?) the stretching somehow.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
// WORKS: buttons backgrounds stretch properly on Retina displays!
win.add(Ti.UI.createButton({
top: 10, right: 10, left: 10,
height: 30,
// "search.png" is:
// - On Non-Retina: 35x30
// - On Retina: 70x60
backgroundImage: 'search.png',
// 35 / 2 = 17.5, so use 17, 34 pixels for the edges, with 1 pixel to repeat in the middle.
backgroundLeftCap: 17
}));
// FAILS: ends up distorted on the left and right caps on Retina displays!
win.add(Ti.UI.createView({
top: 50, right: 10, left: 10,
height: 30,
backgroundImage: 'search.png',
backgroundLeftCap: 17
}));
win.open();
Workaround
Use buttons with their touch disabled as backgrounds. Weird, a bit heavier, but... whatever.
Screenshot
Attached as well.
Pull pending https://github.com/appcelerator/titanium_mobile/pull/2510
Reopening to update labels:
Verified with: SDK:3.1.2.v20130718094558 Appcelerator Studio: 3.1.2.201307121651 OS: OSX 10.7.5 Device:iPhone5(ios6) Xcode: 4.6