Jak zrobić prosty zaokrąglony przycisk w Storyboard?

104

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.

wprowadź opis obrazu tutaj

Gintas_
źródło

Odpowiedzi:

82

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
realtimez
źródło
2
dlaczego potrzebne jest clipsToBounds? Wygląda na to, że cień nie działa, dopóki go nie usunę.
Gintas_
1
Dobra odpowiedź, ale możesz to zrobić w IB, bez obrazów. Zobacz poniżej.
zontar
224

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.

wprowadź opis obrazu tutaj

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

Nishant
źródło
9
Prosimy o dodanie komentarza w przypadku głosowania negatywnego.
Nishant
7
rozczarowujące jest to, że IB nie może pokazać tego jak zwykłej aplikacji do rysowania.
William Cerniuk
2
@WilliamCerniuk: Właściwie tak. Sprawdź stronę nshipster.com/ibinspectable-ibdesignable
Nishant
Ustawienie atrybutów środowiska wykonawczego zdefiniowanego przez użytkownika rzeczywiście działa i można je wyświetlić w symulatorze po skompilowaniu.
Cons Bulaquena
Jak mówi zaakceptowana odpowiedź, może być konieczne dodanie ścieżki klucza logicznego, clipsToBoundsaby to zadziałało.
Maksymalnie
87

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ść:

wprowadź opis obrazu tutaj

ChikabuZ
źródło
4
Zdecydowanie najlepsza odpowiedź. Nauczyłem się dziś czegoś nowego, niesamowitego!
Mark
2
Ta odpowiedź nie jest kompletna. Po uruchomieniu aplikacji xCode użyje rozmiaru ramki widoku w narzędziu do tworzenia interfejsów, a nie rzeczywistego rozmiaru ramki, gdy aplikacja jest uruchomiona.
Simon Backx,
2
Możesz także użyć „didSet” zamiast „willSet” i usunąć argument isRounded.
Simon Backx
1
Jeśli używasz obrazu tła, ustaw layer.masksToBounds = truerównież
zontar
34
  1. Utwórz klasę Cocoa Touch.

wprowadź opis obrazu tutaj

  1. 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
            }
        }
    }
    
  2. Odnieś się do obrazu.

wprowadź opis obrazu tutaj

anson
źródło
Przestań wielokrotnie publikować tę samą odpowiedź. Jest to uważane za hałas. Albo dostosuj swoje odpowiedzi do różnych pytań, albo, jeśli są one rzeczywiście tym samym pytaniem, możesz oznaczyć je jako duplikaty (a gdy masz wystarczającą reputację, zagłosuj za zamknięciem).
elixenide
Nie wiem, czy inni też w to wpadli, ale gdy tylko ustawię klasę na przycisk i nadam mu promień, szerokość i kolor obramowania, Xcode (9.2) wyrzuca błąd, że wystąpił błąd renderowania. Tworzenie aplikacji kończy się sukcesem, ale czerwony „!” ciągle się wyświetla. Mówiąc tylko ... przełączyłem się z powrotem na rozwiązanie oparte na samym kodzie (chociaż był to naprawdę elegancki sposób).
Aeger
10

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

button.layer.cornerRadius = button.bounds.size.height/2
FrankkieNL
źródło
Nie zrobiłem. Jeśli twój wzrost i szerokość są takie same (więc byłby kwadratowy), otrzymasz okrąg. Ale jeśli szerokość jest większa niż wysokość, przycisk będzie poprawny.
FrankkieNL
2
Masz rację, przegapiłem obrazek zawarty w pytaniu, który pokazuje, po co tak naprawdę plakat pasuje do twojej odpowiedzi bardziej niż zaakceptowanej odpowiedzi - upvote
Michael Hudson
4

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

Ketan Parmar
źródło
4

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
    }
}
Joseph Shenton
źródło
1

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.

venki mohan
źródło
0

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");
}
Sanjeet verma
źródło
0

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()
muhammad usman
źródło
0

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.

wprowadź opis obrazu tutaj

casillas
źródło
-1
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)
        }
    }
}
Rodrigo Salomao
źródło