如何让我的 iOS TTTextEditor 圆角在 Three20 中减少锯齿？

发布于 2024-11-08 15:12:15 字数 1790 浏览 0 评论 0原文

我正在尝试在我的应用程序中重现 iphone/iOS SMS 应用程序的 UI。我正在调整 Three20 TTTextBarController。不幸的是，由于圆角附近出现锯齿，我的努力导致条形变得更加难看。

在此处输入图像描述

（StackOverflow 缩小了上面的图像 - 请在全屏模式下查看上面的图像。在该分辨率下，您将看到别名）。

我用来创建文本栏元素的 Three20 样式代码如下：

- (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]]]]]]];
}

谁能建议如何提高圆角的质量？或者，有人知道如何逐像素模拟 iOS 短信聊天栏吗？

谢谢！

更新

我的原始代码来自TTDefaultStyles.m。

简化后，我得出了这种样式：

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
     ]]]]];

据我所知，TTInnerShadowStyle 是导致锯齿在左上角和右上角可见的原因。我很想获得 Apple 用于其无缝 UITextField 阴影的代码......

原文

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.

enter image description here

(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...

分享到QQ

分享到微博