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 mod开发者_JAVA技巧e. 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...
Use MFMessageComposeViewController in MessageUI.framework
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.
I would strip down your style… you have 2 insets in a row, a drop shadow and bevel border, and all in a random order too. Any of these could be causing your blurriness. Why don't you start with just a simple TTShapeStyle
, then the TTInnerShadowStyle
.
Try setting your view to not draw opaque. The view is drawing with transparencies.
精彩评论