I am trying to reproduce the UI for the iphone/iOS SMS app in my application. I am adapting the Three20 TTTextBarController. Unfortunately, my efforts have resulted in a bar that is substantially uglier because of aliasing near the rounded corners.
(StackOverflow shrinks the above image - please view the above image in full-screen mode. At that resolution you will see the aliasing).
The Three20 style code I have used to create the text bar element is as follows:
- (TTStyle*)textBarTextField {
return
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:13] next:
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(6, 0, 3, 6) next:
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(1, 0, 1, 0) next:
[TTShadowStyle styleWithColor:RGBACOLOR(255,255,255,0.4) blur:0 offset:CGSizeMake(0, 1) next:
[TTSolidFillStyle styleWithColor:RGBACOLOR(255,255,255,1.0) next:
[TTInnerShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.4) blur:3 offset:CGSizeMake(0, 2) next:
[TTBevelBorderStyle styleWithHighlight:RGBACOLOR(0,0,0,0.25) shadow:RGBACOLOR(0,0,0,0.2)
width:1 lightSource:270 next:nil]]]]]]];
}
Can anyone advise how to improve the quality of the rounded corners? Alternatively, has anyone figured out how to pixel-for-pixel emulate the iOS SMS chat bar?
Thanks!
Update
My original code came from TTDefaultStyles.m.
After simplifying I came to this style:
return
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:13] next:
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(6, 0, 4, 6) next:
[TTLinearGradientBorderStyle styleWithColor1:RGBCOLOR(51,51,51)
color2:RGBCOLOR(102, 102, 102) width:1 next:
[TTSolidFillStyle styleWithColor:RGBACOLOR(255,255,255,1.0) next:
[TTInnerShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.8) blur:3 offset:CGSizeMake(0, 2) next:nil
]]]]];
From what I can tell, the TTInnerShadowStyle is what is causing the aliasing to be visible on the top left and right. I'd love to get the code that Apple is using for their seamless UITextField shadow...
Check out the HPGrowingTextView and GrowingTextView sample code here: http://www.hanspinckaers.com/multi-line-uitextview-similar-to-sms
Not only does it look like the iOS messages app, but it also grows to multilines.