ios - 使用 three20 TTButtonBar, iOS 复制 Facebook

Question

我想在这里复制 Facebook 在他们的应用程序中使用的按钮网格栏:

左键未按下，右键已按下。

我在复制“按下”按钮状态时遇到问题。谁能帮忙？这是我到目前为止所得到的:

我对其中的大部分内容都非常满意。只需刷一下按钮的大小，但那是微不足道的。在我的工具栏上，左边的按钮应该被按下，而右边的则不是。显然，我错过了 Facebook 在顶部实现的阴影。我怎样才能复制这个？我正在考虑使用 TTInnerShadowStyle 但似乎无法正确使用。这是为每个按钮生成样式的代码:

UIColor *gradientFill1 = RGBCOLOR(249, 250, 252),*gradientFill2 = RGBCOLOR(225, 228, 235);

if (state != UIControlStateNormal) {
    gradientFill1 = RGBCOLOR(233, 234, 237);
    gradientFill2 = RGBCOLOR(214, 217, 223);
}

TTStyle *style= [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:3] next:
        [TTInsetStyle styleWithInset:UIEdgeInsetsMake(1, 0, 1, 0) next:
         [TTLinearGradientBorderStyle styleWithColor1:RGBCOLOR(140, 144, 150)
                                               color2:RGBCOLOR(175, 179, 186) width:0.5 next:
         [TTLinearGradientBorderStyle styleWithColor1:RGBCOLOR(184, 186, 192)
                                               color2:RGBCOLOR(208, 212, 218) width:0.5 next:
            [TTLinearGradientFillStyle styleWithColor1:gradientFill1
                                              color2:gradientFill2 next:
             [TTShadowStyle styleWithColor:RGBACOLOR(253,254,254,1.0) blur:0
                                  offset:CGSizeMake(0, 1) next:
              [TTImageStyle styleWithImageURL:nil defaultImage:nil
                              contentMode:UIViewContentModeScaleToFill
                                       size:CGSizeZero next:
               [TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:12.0f]
                                color:RGBCOLOR(81, 91, 120)
                            shadowColor:nil
                         shadowOffset:CGSizeMake(0, 0) next:nil]]]]]]]];


return style;

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

确实，在添加 TTInnerShadowStyle 时，您的代码呈现出一点奇怪。但这似乎是由您的双边框样式引起的。

如果我在填充后插入一个内部阴影，然后移动两个渐变边框以隐藏内部阴影，它看起来完全符合预期。较浅的内部边框看起来错位了。

我建议结合使用 TTCatalog 中的“Chiseled button”和“Inner shadow”示例。它可能看起来像这样:

[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:3] next:
[TTShadowStyle styleWithColor:RGBACOLOR(255,255,255,0.9) blur:1
                       offset:CGSizeMake(0, 1) next:
[TTLinearGradientFillStyle styleWithColor1:gradientFill1
                           color2:gradientFill2 next:
[TTInnerShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.7) blur:7
                            offset:CGSizeMake(0, 0) next:
[TTSolidBorderStyle styleWithColor:black width:1 next:
[TTImageStyle styleWithImageURL:nil defaultImage:nil
                    contentMode:UIViewContentModeScaleToFill
                           size:CGSizeZero next:                      
[TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:12.0f]
                     color:RGBCOLOR(81, 91, 120)
               shadowColor:nil
              shadowOffset:CGSizeMake(0, 0) next:nil]]]]]]]

对于正常状态只需将内阴影颜色设置为透明，或者有条件地完全避免内阴影。