Блог

Главная - Вопросы по программированию - UIButton с GradientLayer затемняет изображение и затемняет градиент

UIButton с GradientLayer затемняет изображение и затемняет градиент

#ios #uibutton #calayer #cagradientlayer

#iOS #uibutton #calayer #cagradientlayer

Вопрос:

У меня есть UIButton здесь, где я хотел бы иметь градиент в качестве фона под изображением (символ с прозрачным фоном), но я сталкиваюсь с двумя разными проблемами.

Кажется, что первый из CAGradientLayer накладывается поверх изображения, независимо от того, как я пытаюсь его добавить, полностью скрывая изображение.

Во-вторых, сам градиент, похоже, сильно затемнен, как будто кнопка была отключена, но это не так.

Вот мой код:

 self.backButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 35, 28, 28)];
[backButton addTarget:self
               action:@selector(goBack)
     forControlEvents:UIControlEventTouchUpInside];
[backButton setBackgroundColor:[UIColor clearColor]];
CAGradientLayer *buttonGradient = [CAGradientLayer layer];
buttonGradient.frame = backButton.bounds;
buttonGradient.colors = [NSArray arrayWithObjects:
                         (id)[[UIColor colorWithRed:.0
                                              green:.166
                                               blue:.255
                                              alpha:1] CGColor], 
                         (id)[[UIColor colorWithRed:.0
                                              green:.113
                                               blue:.255
                                              alpha:1] CGColor], 
                         nil];
[buttonGradient setCornerRadius:backButton.frame.size.width / 2];
[backButton.layer insertSublayer:buttonGradient
                         atIndex:0];
[backButton setImage:[UIImage imageNamed:@"backarrow.png"]
            forState:UIControlStateNormal];
[backButton setEnabled:NO];
[topbarView addSubview:backButton];

Ответ №1:

Итак, мне удалось обойти это, выполнив [button bringSubviewToFront:button.ImageView] после добавления градиента. Кажется, что независимо от того, что я делаю, новый слой будет добавлен поверх ImageView, поэтому мне нужно перенести его на передний план впоследствии.

Objective-C:

 [button bringSubviewToFront:button.imageView]

Swift 4.1:

 button.bringSubview(toFront:button.imageView!)

Ответ №2:

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

 CAGradientLayer* gradient = [CAGradientLayer layer];
// ...
[button.layer insertSublayer:gradient below:button.imageView.layer];

Комментарии:

1. Вы буквально только что спасли мне жизнь! 😉 Изображение не было показано после того, как я добавил слой с градиентом, потому что слой был, конечно, выше слоя изображения. Спасибо

2. Отлично! Сэкономьте мое время

Ответ №3:

SWIFT 3

Вот пример: (На основе ответа Нила)

     let layer = CAGradientLayer()
    layer.frame = CGRect(x: 0, y: 0, width: myButtonOutlet.layer.frame.size.width, height: myButtonOutlet..layer.frame.size.height)
    layer.colors = [UIColor.white.cgColor, pixelColorReceta.cgColor]
    layer.masksToBounds = true
    layer.cornerRadius = myButtonOutlet.layer.cornerRadius
    myButtonOutlet.layer.insertSublayer(layer, below: myButtonOutlet..imageView?.layer)

Удачного кодирования 🙂

Ответ №4:

Swift 3

Вы можете переместить изображение над градиентом:

 button.imageView?.layer.zPosition = 1

или вставьте градиент под изображение:

 button.layer.insertSublayer(gradientLayer, below: button.imageView?.layer)