Przycisk iOS 7 z okrągłym ramką

Question

Sklep z aplikacjami iOS ma niebieski okrągły przycisk do kupowania/pobierania aplikacji.

W mojej aplikacji możesz pobrać dodatkowe treści i chcę mieć podobny przycisk, tylko dlatego, że wygląda znajomo dla użytkownika.

Jeśli nie wiesz, o co mi chodzi: te przyciski, takie jak "$ 3.99"

Jak to możliwe?

Answer 1

można manipulować CALayer swojego przycisku, aby to zrobić dość łatwo.

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

można dostosować każde z nich, aby uzyskać pożądany kolor i efekt granicy.

Trzeba również dodać import w dowolnym pliku, którego chcesz użyć CALayers

#import <QuartzCore/QuartzCore.h> 

Answer 2

Aby uzyskać prostą granicę, tak jak opisałeś, użyj odpowiedzi od Dima używając CALAyera.

Jeśli chcesz więcej, np zaokrąglony prostokąt gradientem następnie użyć tej metody jako podstawy:

Utwórz niestandardowy widok, który rysuje zaokrąglony prostokąt i umieścić go nad przyciskiem. Skorzystaj z funkcji wyszukiwania, aby wyszukać prostokąt zaokrąglony do wykresu. Rysunek działa poprzez narysowanie 4 łuków o określonym promieniu (narożniki) i 4 linie proste.

---

FTR, oto jak zrobić UIView z prawidłowymi rogami iOS7 za Alexa i Briana.

Jestem prawie pewien, że CGPathCreateWithRoundedRect nie daje "nowych" zaokrąglonych narożników. Musisz użyć bezierPathWithRoundedRect dla "nowych" narożników.

#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 

Nadzieja pomaga ktoś

Answer 3

Do standardowych elementów sterujących iOS jak UIButton, UILabel, należy użyć właściwości UIViewtintColor:

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

Answer 4

Jeśli jesteś wielkim fanem używania storyboardów do projektowania interfejsu użytkownika z iOS ..możesz ustawić promień narożnika (i dowolne inne parametry wymienione w dima's answer - chociaż niestety nie jest to kolor, ponieważ jest to CGColor i Apple obecnie nie ma tej opcji w popup) w tablicy tematycznej jak pokazano tutaj:

premia: użyć atrybutów wykonawcze dla UIButton zastępczy kolor tekstu (zob here) oraz zmianę czcionek UILabel, UITextField i UIButton jak również (patrz here)

Answer 5

I wprowadziły przycisk styl AppStore tutaj odniesienia: ASButton.m

a projekt jest here

nadzieję pomóc:]

Answer 6

Aby przedłużyć doskonałą odpowiedź @abbood „s, to jest faktycznie możliwe jest ustawienie koloru obramowania i koloru tła warstwy widoku z IB, ale wymaga to trochę pracy przygotowawczej.

Utworzono niestandardową kategorię na NSView, CALayer + setUIColor.h.

Ten, który ustawia kolory obramowań, ma tylko jedną metodę, setBorderUIColor. Wymaga UIColor jako danych wejściowych, pobiera podstawowy NSColor UIColor i stosuje ten kolor do warstwy widoku.

Następnie w IB, wystarczy dodać atrybut zdefiniowany przez użytkownika w czasie wykonywania takiego:

keypath layer.borderUIColor Rodzaj kolor Wartość żądany kolor.

W czasie uruchamiania system wywołuje metodę, przekazując wartość UIColor zdefiniowaną w IB. Kategoria pobiera CGColor z UIColor i stosuje ją do warstwy.

Można to zobaczyć w projekcie pracuje w projekcie github kopalni nazywa

RandomBlobs

Ja również zrobić to samo dla ustawienie właściwości koloru tła warstwę, ale nie w powyższym projekcie .

Answer 7

A dla szybkiej wersji rozszerzenia Duncan C jest z abbood za odpowiedź:

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

Answer 8

Z Swift 3/iOS 10, można utworzyć podklasę UIButton aby mieć przycisk niestandardowy, który będzie wyglądać niebieski przycisk z zaokrąglonymi obramowaniami w aplikacji AppStore na iOS.

Poniższy kod ilustruje sposób prawidłowego zarządzania kolorami tinty (gdy przycisk znajduje się za przyciemnionym widokiem UIAlertController), kolor tytułu, podświetlony kolor tła, styl ramki, kolor ramki i wstawki treści.

---

Przycisk niestandardowy.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 (tworzenie zwyczaj przycisku programowego)

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 (alternatywny do tworzenia własnych przycisku w ujęć):

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

} 

---

Poniższy obraz pokazuje, jak niestandardowy przycisk będzie wyświetlany w stanie normalnym, kiedy system tinColor zostanie zmieniony (za przyciemnionym widokiem stanu UIAlertController) oraz w stanie highlighted.