Nút khung tròn trên iOS 7

iOS App Store có nút khung tròn màu xanh lam để mua / tải xuống ứng dụng.

Trong Ứng dụng của tôi, bạn có thể tải xuống nội dung bổ sung và tôi muốn có một nút tương tự, chỉ vì nó trông quen thuộc với người dùng.

Nếu bạn không biết, ý tôi là: các nút này, như "$ 3,99"

Sao có thể như thế được?

Bạn có thể thao tác CALayer của nút để làm điều này khá dễ dàng.

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

bạn có thể tinh chỉnh từng cái đó để có được màu sắc và hiệu ứng đường viền mà bạn muốn.

Bạn cũng sẽ phải thêm nhập vào bất kỳ tệp nào bạn muốn sử dụng CALayers

#import <QuartzCore/QuartzCore.h>

Nếu bạn là người thích sử dụng bảng phân cảnh cho thiết kế giao diện người dùng của mình với iOS .. bạn có thể đặt bán kính góc (và bất kỳ thông số nào khác như đã đề cập trong câu trả lời của dima - mặc dù rất tiếc không phải là màu sắc, vì đó là CGColor và Apple hiện tại không có tùy chọn đó trong cửa sổ bật lên) trong identity inspector-> user defined runtime attributestrong bảng phân cảnh như được hiển thị ở đây:

phần thưởng: bạn sử dụng các thuộc tính thời gian chạy cho UIButtonmàu văn bản giữ chỗ (xem tại đây ) và để thay đổi phông chữ của UILabel, UITextFieldvà UIButtoncũng như (xem tại đây )

Đối với các yếu tố kiểm soát iOS tiêu chuẩn thích UIButton, UILabelthì bạn nên sử dụng UIView tintColorbất động sản:

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

Đối với đường viền đơn giản như bạn đã mô tả, hãy sử dụng câu trả lời từ Dima bằng cách sử dụng CALAyer.

Nếu bạn muốn nhiều hơn, ví dụ như một hình chữ nhật tròn với gradient thì hãy sử dụng cách tiếp cận này làm cơ sở:

Tạo một Chế độ xem tùy chỉnh vẽ một hình chữ nhật tròn và đặt nó lên trên nút. Sử dụng chức năng tìm kiếm ở đây để tìm kiếm vẽ hình chữ nhật tròn. Bản vẽ hoạt động bằng cách vẽ 4 cung tròn với bán kính xác định (các góc) và 4 đoạn thẳng.

FTR, đây là cách bạn tạo một UIView với các góc tròn chính xác của iOS7, theo Alex và Brian.

Tôi khá chắc chắn rằng CGPathCreateWithRoundsRect không cung cấp cho bạn các góc tròn "mới". Bạn phải sử dụng bezierPathWithRoundsRect cho các góc "mới".

#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

Hy vọng nó sẽ giúp ai đó

Tôi đã triển khai nút kiểu AppStore ở đây để bạn tham khảo: ASButton.m

và dự án ở đây

Hy vọng sẽ giúp được:]

Để mở rộng câu trả lời tuyệt vời của @abbood, thực sự có thể đặt màu đường viền và màu nền của lớp của chế độ xem từ IB, nhưng nó yêu cầu một chút công việc chuẩn bị để làm như vậy.

Tôi đã tạo một danh mục tùy chỉnh trên NSView, CALayer + setUIColor.h.

Phương thức đặt màu viền chỉ có một phương thức, setBorderUIColor. Nó lấy một UIColor làm đầu vào, tìm nạp NSColor cơ bản của UIColor và áp dụng màu đó cho lớp của khung nhìn.

Sau đó, trong IB, bạn chỉ cần thêm thuộc tính thời gian chạy do người dùng xác định như sau:

KeyPath layer.borderUIColor Loại màu Giá trị Màu mong muốn.

Trong thời gian chạy, hệ thống gọi phương thức của bạn, truyền vào UIColor được định nghĩa trong IB. Category lấy CGColor từ UIColor và áp dụng nó cho layer.

Bạn có thể thấy điều này trong một dự án đang làm việc trong một dự án github của tôi có tên là

Ngẫu nhiên

Tôi cũng đã làm điều tương tự để thiết lập thuộc tính màu nền của một lớp, nhưng không phải trong dự án trên.

Và đối với phiên bản nhanh chóng của Duncan C mở rộng câu trả lời của abbood:

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

Với Swift 5.1 / iOS 13, bạn có thể tạo một lớp con của UIButton để có một nút tùy chỉnh trông giống như nút viền tròn màu xanh trong ứng dụng iOS AppStore.

Đoạn mã sau đây cho biết cách quản lý đúng màu sắc (khi nút xuất hiện phía sau chế độ xem mờ của a UIAlertController), màu của tiêu đề, màu nền được đánh dấu, kiểu của đường viền, màu của đường viền và nội dung chèn.

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

}

Các hình ảnh dưới đây cho thấy cách nút tùy chỉnh sẽ xuất hiện ở trạng thái bình thường, khi hệ thống tinColorđược thay đổi (đằng sau chế độ xem mờ của a UIAlertController) và ở highlightedtrạng thái.