Репликация Facebook с использованием трех20 TTButtonBar, iOS - PullRequest
Новая
       5

Репликация Facebook с использованием трех20 TTButtonBar, iOS

2 голосов
/ 11 февраля 2012

Я искал копию панели сетки кнопок, которую Facebook использует в своем приложении здесь:

enter image description here

Левая кнопка не нажата, правая нажата.

У меня возникли проблемы с воспроизведением состояния «нажатой» кнопки.Кто-нибудь может помочь?Вот что у меня так далеко:

enter image description here

Я доволен большинством из этого.Просто нужно привести в порядок размеры кнопок, но это тривиально.На моей панели инструментов левая кнопка должна быть нажата, а правая - нет.Понятно, что мне не хватает той тени на вершине, которую реализует 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;

Любая помощь будет принята с благодарностью.Спасибо!

Ответы [ 2 ]

1 голос
/ 13 февраля 2012

Действительно, ваш код выглядит немного странно при добавлении TTInnerShadowStyle. Но это, кажется, вызвано вашим стилем двойной границы.

Если после заливки вставить внутреннюю тень, а затем переместить обе градиентные границы, чтобы скрыть внутреннюю тень, она будет выглядеть точно так, как ожидалось. Внутренняя светлая граница выглядит неуместной.

Я бы порекомендовал использовать комбинацию "Точить кнопку" и "Внутренняя тень" из примеров TTCatalog. Это может выглядеть так: 

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

Для нормального состояния просто установите цвет внутренней тени на прозрачный или условно избегайте внутренней тени.

0 голосов
/ 11 февраля 2012

То, что вы могли бы сделать, это пойти прямым путем и реализовать эффект внутренней тени, который вам нужен, через CoreGraphics. Взгляните на это S.O. страница .

...