Zaokrąglanie przycisku

Grzudzień – myśli krążą już wokół pomysów na prezenty, choinki, listy składników na bigos etc. 🎄

Myślę więc, że to dobry czas na proste rozszerzenie klasy UIButton, które spowoduje że wasze przyciski zmienią się w pięknę, okrągłe bombki na choinkę 🎄. Funkcja na dziś to:

circled()

Aby twój przysik stał się okrągły, potrzebna jest bardzo prosta matematyka. Otóż API systemu iOS umożliwia ustawianie zaokrągleń rogów widoku. W takim razie musimy tak je zaokrąglić, aby zaokrąglenie kończyło się dokładnie w miejscu, gdzie zaczyna się następne. W ten sposób uzyskamy idealny okrąg.

Zaogrąglenie rogów (cornerRadius) przyjmuje wartości liczbowe, podobnie jak np. CGSize(). Zatem, jeśli chcemy, żeby nasze zaokrąglenie kończyło się w połowie, musimy wyznaczyć połowę szerokości i wysokości. Ponieważ okrąg jest figurą symetryczną – musisz pamiętać żeby twój button miał kształ kwadratu (width = hight). A zatem:


    extension UIButton {
        func circled(){
            self.layer.cornerRadius = 0.5 * self.bounds.size.width
        }
    }

Efekt jest taki:

Okrągły przycisk w ios

Żeby ten efekt był doskonalszy, dorzucam jeszcze linijki odpowiadające za ramkę i jej kolor, jak parametr metody:


    extension UIButton {
        func circled(borderWidth: CGFloat?, borderColor: UIColor?){
            // Set radius
            self.layer.cornerRadius = 0.5 * self.bounds.size.width
            self.clipsToBounds = true
    
            // Check if there should be border and color
            if let width = borderWidth{
                self.layer.borderWidth = width
                
                if let color = borderColor{
                    self.layer.borderColor = color.cgColor
                }else {
                    self.layer.borderColor = UIColor.white.cgColor
                }
            }
        }
    }

Jeśli parametr szerokości będzie nil, nie będzie ramki.
Jeśli parametr kolor będzie nil, a szerokość zostanie podana, to z default’u ramka będzie biała 😎.

Przycisk z szarą ramką

Plik playground oczywiście dostępny na naszym GitHubie.

@jkornat


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *