it-swarm.com.ru

iOS 7 круглая кнопка в рамке

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

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

Если вы не знаете, что я имею в виду: эти кнопки, такие как «$ 3,99»

enter image description here

Как это возможно?

77
h345k34cr

Вы можете манипулировать 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>
198
Dima

Если вы большой поклонник использования раскадровок для вашего дизайна пользовательского интерфейса с iOS ... вы можете установить угловой радиус (и любые другие параметры, как указано в dima's answer - хотя, к сожалению, это не цвет, так как это CGColor и У Apple в настоящее время нет этой опции во всплывающем окне) в identity inspector-> user defined runtime attributes в раскадровке, как показано здесь:

enter image description here

bonus: Вы используете атрибуты времени выполнения для цвета текста UIButton (см. здесь ), а также для изменения шрифтов UILabel, UITextField и UIButton (см. здесь )

90
abbood

Для стандартных элементов управления iOS, таких как UIButton, UILabel, Вы должны использовать свойство UIViewtintColor:

buyButton.layer.borderColor = buyButton.tintColor.CGColor;
17
Gideon King

Для простой границы, как вы описали, используйте ответ от Димы с помощью 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

enter image description here

enter image description here

Надеюсь, это поможет кому-то

8
AlexWien

Я реализовал кнопку стиля App Store здесь для вашей справки: AS Button.m

и проект здесь

Надеюсь помочь:]

2
jianpx

Чтобы расширить превосходный ответ @abbood, на самом деле можно установить цвет границы и цвет фона слоя представления из IB, но для этого требуется небольшая подготовительная работа.

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

У объекта, устанавливающего цвета границ, есть только один метод setBorderUIColor. Он принимает UIColor в качестве входных данных, выбирает базовый NIColor UIColor и применяет этот цвет к слою представления.

Затем в IB вы просто добавляете пользовательский атрибут времени выполнения, например так:

.__ ключевого ресурса. layer.borderUIColor Введите цвет Значение Желаемый цвет.

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

Вы можете увидеть это в рабочем проекте в моем проекте github под названием 

RandomBlobs

Я также сделал то же самое для установки свойства цвета фона слоя, но не в вышеупомянутом проекте.

2
Duncan C

В Swift 3/iOS 10 вы можете создать подкласс 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)

        // Make sure to set CustomButton as the class of the UIButton in Identity inspector of storyboard
        // Make sure to set Custom as the type of the UIButton in Attributes inspector of storyboard
        setProperties()
    }

    func setProperties() {
        // Set tintColor (only if you want to replace the system default tintColor)
        // tintColor = .red

        // Set the border's color
        layer.borderColor = tintColor?.cgColor

        // 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 (eg 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
        titleLabel?.textColor = tintColor
    }

    override func draw(_ rect: CGRect) {
        // Draw the border
        layer.borderWidth = 1
        layer.cornerRadius = 4
        layer.masksToBounds = true
    }

}

ViewController.Swift (создание пользовательской кнопки программно):

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        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
    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)
    }

}

ViewController.Swift (альтернатива для создания пользовательской кнопки в раскадровке):

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var button: CustomButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        button.setTitle("Normal", for: .normal)
        button.setTitle("Highlighted", for: .highlighted)
    }

    /// Present alert when button is tapped
    @IBAction 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.

 enter image description here

0
Imanou Petit

А для версии Swift от Duncan C ответ abbood:

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