iOS 7 круглая кнопка в рамке
в магазине приложений iOS есть синяя круглая кнопка в рамке для покупки / загрузки приложений.
в моем приложении вы можете скачать дополнительный контент, и я хочу иметь аналогичную кнопку, просто потому, что она выглядит знакомой пользователю.
Если вы не знаете, что я имею в виду: эти кнопки, как "$3.99"
Как это возможно?
8 ответов:
вы можете управлять 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>
если вы большой поклонник использования раскадровки для вашего дизайна пользовательского интерфейса с iOS.. вы можете установить радиус угла (и любые другие параметры, как указано в Диме ответ -- хотя, к сожалению, не цвет, так как это CGColor и Apple в настоящее время не имеет этой опции во всплывающем окне) в
identity inspector
->user defined runtime attributes
в раскадровке, как показано ниже:бонус: вы используете атрибуты времени выполнения для
UIButton
текст-заполнитель цвет (см. здесь) и менять шрифтыUILabel
,UITextField
иUIButton
(см. здесь)
для стандартных элементов управления iOS, таких как
UIButton
,UILabel
, вы должны использоватьUIView
tintColor
свойства:buyButton.layer.borderColor = buyButton.tintColor.CGColor;
для простой границы, как вы описали, используйте ответ от Димы с помощью 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
надеюсь, что это поможет кому-то
я реализовал кнопку стиля AppStore здесь для вашей справки:ASButton.м
и здесь
надеюсь на помощь :]
чтобы расширить отличный ответ @abbood, на самом деле можно установить цвет границы и цвет фона слоя представления из IB, но для этого требуется небольшая подготовительная работа.
Я создал пользовательскую категорию на NSView, CALayer+setUIColor.з.
то, что устанавливает цвета границы имеет только один метод, setBorderUIColor. Он принимает UIColor в качестве входных данных, извлекает базовый NSColor UIColor и применяет этот цвет к слою представления.
тогда, в IB, вы просто добавляете пользовательский атрибут времени выполнения следующим образом:
KeyPath слой.borderUIColor Тип цвет Значение Желаемый цвет.
во время выполнения система вызывает ваш метод, передавая в UIColor, который определен в IB. Категория получает CGColor из UIColor и применяет его к слою.
вы можете увидеть это в рабочем проекте в моем проекте github под названием
Я тоже сделано то же самое для установки свойства цвета фона слоя, но не в приведенном выше проекте.
и для быстрой версии расширения Duncan C ответа abbood:
extension CALayer { var borderUIColor: UIColor? { get { if let borderColor = borderColor { return UIColor(CGColor: borderColor) } return nil } set { borderColor = newValue?.CGColor ?? nil } } }
С Swift 3 / iOS 10, вы можете создать подкласс
UIButton
чтобы иметь пользовательскую кнопку,которая будет выглядеть как синяя закругленная кнопка границы в приложении iOS AppStore.следующий код показывает, как правильно управлять цветом оттенка (когда кнопка появляется за затемненным видом
UIAlertController
), цвет заголовка, выделенный цвет фона, стиль границы, цвет границы и содержание вставки.
CustomButton.Свифт:
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.Свифт (вариант для создания пользовательской кнопки в раскадровке):
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
государство.