Jak zrobić prosty zaokrąglony przycisk w Storyboard?

Właśnie zacząłem uczyć się programowania na iOS, nie mogę znaleźć prostego zaokrąglonego przycisku. Znajduję zasoby dla starszych wersji. Czy muszę ustawić niestandardowe tło dla przycisku? W Androidzie użyłbym po prostu łatki 9, ale wiem, że iOS nie ma takiej możliwości.

Aby to zrobić w serii ujęć, musisz użyć obrazu dla przycisku.

Alternatywnie możesz to zrobić w kodzie:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

Krótka odpowiedź: TAK

Możesz absolutnie zrobić prosty zaokrąglony przycisk bez potrzeby dodatkowego obrazu tła lub pisania kodu do tego samego. Wystarczy postępować zgodnie z poniższym zrzutem ekranu, aby ustawić atrybuty środowiska wykonawczego dla przycisku, aby uzyskać pożądany efekt.

Nie pojawi się w, Storyboardale będzie działać dobrze po uruchomieniu projektu.

Uwaga: „Key Path” i wartość wynosi 5. Wartość musi być zmieniony w zależności od wysokości i szerokości przycisku. Formuła na to to wysokość przycisku * 0,50. Więc baw się wokół wartości, aby zobaczyć oczekiwany zaokrąglony przycisk w symulatorze lub na urządzeniu fizycznym. Ta procedura będzie wyglądać na żmudną, gdy masz więcej niż jeden przycisk do zaokrąglenia w serii ujęć.
layer.cornerRadius

Możesz zrobić coś takiego:

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

Ustaw klasę na MyButtonin, Identity Inspectoraw IB będziesz mieć roundedwłaściwość:

1. Utwórz klasę Cocoa Touch.

2. Wstaw kod w klasie RoundButton.

   import UIKit
   
   @IBDesignable
   class RoundButton: UIButton {
   
       @IBInspectable var cornerRadius: CGFloat = 0{
           didSet{
           self.layer.cornerRadius = cornerRadius
           }
       }
   
       @IBInspectable var borderWidth: CGFloat = 0{
           didSet{
               self.layer.borderWidth = borderWidth
           }
       }
   
       @IBInspectable var borderColor: UIColor = UIColor.clear{
           didSet{
               self.layer.borderColor = borderColor.cgColor
           }
       }
   }
   

3. Odnieś się do obrazu.

Najłatwiej to zrobiłem, ustawiając cornerRadius na połowę wysokości widoku.

button.layer.cornerRadius = button.bounds.size.height/2

Możesz podłączyć swój IBOutletprzycisk ze scenorysu.

Następnie możesz ustawić corner radiusprzycisk, aby był zaokrąglony w rogu.

na przykład twój outletjest myButtonwtedy,

Przedmiot - C.

 self.myButton.layer.cornerRadius = 5.0 ;

Szybki

  myButton.layer.cornerRadius = 5.0

Jeśli chcesz dokładny okrągły przycisk wówczas przycisk jest widthi heightmusi być equali cornerRadiusmusi być równa wysokości lub szerokości / 2 (połowa szerokości lub wysokości).

Jak sugerowała inna odpowiedź, aby wykonać większość tej pracy w kodzie, tylko jedna odpowiedź faktycznie zapewniła sposób wyświetlenia zmian w interfejsie IB Storyboard. Moja odpowiedź wykracza poza tę odpowiedź, umożliwiając zmianę kąta promienia widoku, przycisku, obrazu itp.

Proszę spojrzeć na poniższy kod. Aby użyć tego kodu, utwórz nowy plik Swift o nazwie RoundedView lub jakkolwiek chcesz go nazwać, a następnie przejdź do swojego storyboardu i zmień klasę na „RoundedView”, „RoundedImageView” lub „RoundedButton”.

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

Dodając layer.cornerRadiusscenorys, upewnij się, że nie masz spacji wiodących ani końcowych. Jeśli skopiujesz wklej, możesz wstawić spacje. Byłoby miło, gdyby XCode powiedział jakieś ostrzeżenie lub błąd.

Spróbuj tego!!

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}

Rozszerzenie jest najlepszą opcją dla tego problemu. Utwórz rozszerzenie widoku lub przycisku

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

Zadzwoń z kodu

button.roundCorners()

Używam Xcode w wersji 11.4

W inspektorze atrybutów możesz zdefiniować promień narożnika.

Nie pojawi się w Storyboard, ale będzie działać dobrze po uruchomieniu projektu.

import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}