Кнопка в круглому обрамленні iOS 7

Question 1

в iOS App Store є синя кнопка в круглому обрамленні для покупки / завантаження програм.

У моєму додатку ви можете завантажити додатковий вміст, і я хочу мати схожу кнопку, просто тому, що вона видається користувачеві знайомою.

Якщо ви не знаєте, що я маю на увазі: ці кнопки, наприклад "$ 3,99"

введіть тут опис зображення

Як це можливо?

Question 2

Ви можете маніпулювати CALayer вашої кнопки, щоб зробити це досить легко.

// assuming you have a UIButton or more generally a UIView called buyButton

buyButton.layer.cornerRadius = 2;
buyButton.layer.borderWidth = 1;
buyButton.layer.borderColor = [UIColor blueColor].CGColor;
// (note - may prefer to use the tintColor of the control)

Ви можете налаштувати кожен з них, щоб отримати бажаний колірний та кордонний ефект.

Вам також доведеться додати імпорт у будь-який файл, який ви хочете використовувати CALayers

#import <QuartzCore/QuartzCore.h>

Question 3

Якщо ви великий шанувальник використання сторибордів для оформлення інтерфейсу користувача з iOS .., ви можете встановити радіус кута (та будь-які інші параметри, як зазначено у відповіді Діми, - хоча, на жаль, це не колір, оскільки це CGColor, а Apple зараз не мати цю опцію у спливаючому вікні) у identity inspector-> user defined runtime attributesв розкадруванні, як показано тут:

введіть тут опис зображення

бонус: ви використовуєте атрибути виконання для UIButtonкольору тексту заповнювача (див. тут ) і для зміни шрифтів UILabel, UITextFieldа UIButtonтакож (див. тут )

Question 4

Для стандартних елементів управління iOS, таких як UIButton, UILabelслід використовувати UIView tintColorвластивість:

buyButton.layer.borderColor = buyButton.tintColor.CGColor;

Question 5

Для простої межі, як ви описали, використовуйте відповідь Діми за допомогою CALAyer.

Якщо ви хочете більше, наприклад, округлий прямокутник з градієнтом, використовуйте цей підхід як основу:

Створіть власний вигляд, який малює округлий прямокутник, і розмістіть його над кнопкою. Використовуйте тут функцію пошуку, щоб знайти закруглений прямокутник із закругленням. Малюнок працює, малюючи 4 дуги з визначеним радіусом (кутами) і 4 прямими лініями.

FTR, ось як ви створюєте UIView з правильними закругленими кутами iOS7, за Алексом та Брайаном.

Я майже впевнений, що CGPathCreateWithRoundedRect не дає вам "нових" закруглених кутів. Ви повинні використовувати bezierPathWithRoundedRect для "нових" кутів.

#import "UIViewWithIOS7RoundedCorners.h"
@implementation UIViewWithIOS7RoundedCorners
-(void)drawRect:(CGRect)rect
    {
    // for a filled shape...

    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:4];
    [[UIColor blueColor] setFill];
    [path fill];

    // for just a border...

    int thickness=2;
    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:
            CGRectInset(self.bounds, thickness/2, thickness/2)
            cornerRadius: 4];
    path.lineWidth = thickness;
    [[UIColor blueColor] setStroke];
    [path stroke];
    }

@end
// ps don't forget to set .backgroundColor=[UIColor clearColor]
// perhaps in initWithCoder/initWithFrame

введіть тут опис зображення

Сподіваюся, це комусь допомагає

Question 6

Я застосував тут кнопку стилю AppStore для довідки: ASButton.m

і проект тут

Сподіваюся допомогти:]

Question 7

Щоб розширити чудову відповідь @abbood, насправді можна встановити колір межі та колір тла шару подання з IB, але для цього потрібна невелика підготовча робота.

Я створив спеціальну категорію на NSView, CALayer + setUIColor.h.

Те, що встановлює кольори меж, має лише один метод, setBorderUIColor. Він бере UIColor як вхідні дані, отримує базовий NIColor UIColor і застосовує цей колір до шару подання.

Потім, в IB, ви просто додаєте визначений користувачем атрибут виконання, як це:

KeyPath layer.borderUIColor Тип кольору Значення Бажаний колір.

Під час виконання система викликає ваш метод, передаючи UIColor, який визначено в IB. Категорія отримує CGColor від UIColor і застосовує його до шару.

Ви можете побачити це в робочому проекті у моєму проекті github, який називається

RandomBlobs

Я також зробив те саме для встановлення властивості кольору тла шару, але не у наведеному вище проекті.

Question 8

А щодо швидкої версії розширення відповіді Abbood від Duncan C:

extension CALayer {
    var borderUIColor: UIColor? {
        get {
            if let borderColor = borderColor {
                return UIColor(CGColor: borderColor)
            }
            return nil
        }
        set {
            borderColor = newValue?.CGColor ?? nil
        }
    }
}

Question 9

За допомогою Swift 5.1 / iOS 13 ви можете створити підклас для UIButtonтого, щоб мати власну кнопку, яка виглядатиме як синя кнопка із заокругленою межею в додатку iOS AppStore.

Наступний код показує, як правильно керувати кольором відтінку (коли кнопка з’являється за затемненим видом а UIAlertController), кольором заголовка, виділеним кольором тла, стилем межі, кольором межі та вставками вмісту.

CustomButton.swift:

import UIKit

class CustomButton: UIButton {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setProperties()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setProperties()
    }

    func setProperties() {
        // Set the layer's properties
        layer.borderColor = tintColor?.cgColor
        layer.borderWidth = 1
        layer.cornerRadius = 4

        // Set colors for title's states
        setTitleColor(tintColor, for: .normal)
        setTitleColor(.white, for: .highlighted)

        // Add some margins between the title (content) and the border
        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    override var isHighlighted: Bool {
        didSet {
            // Toggle the background color according to button's highlighted state
            backgroundColor = super.isHighlighted ? tintColor : nil
        }
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        // When the tint color is changed by the system (e.g. when the button appears below the dimmed view of a UIAlertController), we have to manually update border color and title's text color
        layer.borderColor = tintColor?.cgColor
        setTitleColor(tintColor, for: .normal)
    }

}

ViewController.swift:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .secondarySystemBackground

        let button = CustomButton()
        button.setTitle("Normal", for: .normal)
        button.setTitle("Highlighted", for: .highlighted)
        button.addTarget(self, action: #selector(presentAlert(_:)), for: .touchUpInside)
        view.addSubview(button)

        // auto layout
        button.translatesAutoresizingMaskIntoConstraints = false
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
    }

    /// Present alert when button is tapped
    @objc func presentAlert(_ sender: UIButton) {
        let alertController = UIAlertController(title: "Title", message: "Message", preferredStyle: .alert)
        let alertAction = UIAlertAction(title: "OK", style: .default)
        alertController.addAction(alertAction)
        present(alertController, animated: true, completion: nil)
    }

}

На малюнках нижче показано, як користувацька кнопка відображатиметься у звичайному стані, коли система tinColorбуде змінена (за затемненим видом а UIAlertController) та в highlightedстані.