Jak zaokrąglać rogi przycisku

182

Mam obraz prostokątny (jpg) i chcę go użyć do wypełnienia tła przycisku zaokrąglonym rogiem w kodzie xcode.

Napisałem następujące:

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
CGRect frame = CGRectMake(x, y, cardWidth, cardHeight);
button.frame = frame;
[button setBackgroundImage:backImage forState:UIControlStateNormal];

Jednak przycisk, który otrzymuję przy takim podejściu, nie ma zaokrąglonych rogów: jest to zwykły prostokąt, który wygląda dokładnie tak, jak mój oryginalny obraz. Jak mogę zamiast tego uzyskać obraz z zaokrąglonym rogiem przedstawiający mój przycisk?

Dzięki!

double07
źródło

Odpowiedzi:

436

Wydaje mi się, że mam problem, wypróbowałem następujące rozwiązanie z UITextArea i przypuszczam, że będzie to również działać z UIButton.

przede wszystkim zaimportuj to do pliku .m -

#import <QuartzCore/QuartzCore.h>

a następnie w loadViewmetodzie dodaj następujące wiersze

    yourButton.layer.cornerRadius = 10; // this value vary as per your desire
    yourButton.clipsToBounds = YES;

Mam nadzieję, że to zadziała dla ciebie, a jeśli tak, komunikuj się.

devsri
źródło
6
Współpracuje również z inspektorem „User Defined Runtime Attributes”
Avi Cherry
Działa również szybko! Po prostu zmień TAK na true.
Andrew Thomas
119

Możesz to osiągnąć dzięki tym atrybutom RunTime

wprowadź opis zdjęcia tutaj

możemy zrobić niestandardowy przycisk. wystarczy zobaczyć zrzut ekranu w załączeniu.

uprzejmie zwróć uwagę:

w atrybutach środowiska wykonawczego, aby zmienić kolor obramowania, postępuj zgodnie z tą instrukcją

  1. utwórz klasę kategorii CALayer

  2. w pliku h

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. w pliku m:

    -(void)setBorderIBColor:(UIColor*)color {
        self.borderColor = color.CGColor;
    }
    
    -(UIColor*)borderIBColor {
        return [UIColor colorWithCGColor:self.borderColor];
    }

teraz, aby ustawić zrzut ekranu sprawdzania koloru obramowania

zaktualizowana odpowiedź

dzięki

Krutarth Patel
źródło
4
Tylko ja czy informacje w odpowiedzi są niepełne? To naprawdę nie działa. Aktualizacja: działa tak długo, jak nie określam borderColor. Ale wtedy zawsze używa czarnego dla borderColor.
Jonny
3
Rozszerzona odpowiedź: zestaw kolorów w IB prawdopodobnie jest typu UIColor, który nie działa z borderColor, który jest w CGColorRef. Czy jakoś tak. Tak więc rozwiązaniem jest utworzenie kategorii w CALayer, z czymś takim @property(nonatomic, assign) UIColor* borderIBColor;(co nie koliduje z inną nazwą) w pliku nagłówkowym, a implementacja jest następująca:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny
1
Jeśli nie chcesz koloru obramowania, ustaw borderRadius na 0, a nie będziesz go mieć!
Jungledev
Co z Swift?
Jayprakash Dubey,
1
@JayprakashDubey i tworzę rozszerzenie CALayer.
Krutarth Patel
14

Możesz sprawdzić moją bibliotekę o nazwie DCKit . Jest napisany w najnowszej wersji Swift .

Za pomocą narzędzia do tworzenia interfejsów można bezpośrednio utworzyć zaokrąglony narożny przycisk / pole tekstowe:

DCKit: zaokrąglony przycisk

Posiada również wiele innych fajnych funkcji, takich jak pola tekstowe z weryfikacją, elementy sterujące z ramkami, linie przerywane, widoki kół i linii włosów itp.

Andrey Gordeev
źródło
11

Przesunięcie do granicy promienia narożnika w górę, aby uzyskać okrąg:

    self.btnFoldButton.layer.cornerRadius = self.btnFoldButton.frame.height/2.0;

wprowadź opis zdjęcia tutaj

Jeśli ramka przycisku jest kwadratem, nie ma znaczenia frame.height ani frame.width. W przeciwnym razie użyj największego z obu.

Javier Calatrava Llavería
źródło
7

Zaimportuj środowisko QuartCore, jeśli nie ma go w istniejącym projekcie, a następnie zaimportuj #import <QuartzCore/QuartzCore.h>w viewcontroller.m

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect]];
CGRect frame = CGRectMake(x, y, width, height); // set values as per your requirement
button.layer.cornerRadius = 10;
button.clipsToBounds = YES;
iAnkit
źródło
6
UIButton* closeBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 50, 90, 35)];
//Customise this button as you wish then
closeBtn.layer.cornerRadius = 10;
closeBtn.layer.masksToBounds = YES;//Important
Vinay Mahipal
źródło
4

Najpierw ustaw szerokość = 100 i wysokość = 100 guzika

Cel C Rozwiązanie

YourBtn1.layer.cornerRadius=YourBtn1.Frame.size.width/2;
YourBtn1.layer.borderColor=[uicolor blackColor].CGColor;
YourBtn1.layer.borderWidth=1.0f;

Rozwiązanie Swift 4

YourBtn1.layer.cornerRadius = YourBtn1.Frame.size.width/2
YourBtn1.layer.borderColor = UIColor.black.cgColor
YourBtn1.layer.borderWidth = 1.0
iOS Lifee
źródło
2

Jeśli chcesz zaokrąglony narożnik tylko do jednego lub dwóch rogów itp. ... przeczytaj ten post:

[ObjC] - UIButton z zaokrąglonym rogiem - http://goo.gl/kfzvKP

To podklasa XIB / Storyboard. Importuj i ustawiaj granice bez pisania kodu.

elp
źródło
2

Dla Swift:

button.layer.cornerRadius = 10.0
pableiros
źródło
2

zaktualizowano dla Swift 3:

użyte poniżej kodu, aby zrobić rundę narożną UIButton:

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height
Kiran Jadhav
źródło
2

Wypróbuj mój kod. Tutaj możesz ustawić wszystkie właściwości przycisku UIB, takie jak kolor tekstu, kolor tła, promień narożnika itp.

extension UIButton {
    func btnCorner() {
        layer.cornerRadius = 10
        clipsToBounds = true
        backgroundColor = .blue
    }
}

Teraz zadzwoń tak

yourBtnName.btnCorner()
iOS
źródło
0

W systemie iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;
Jayesh Nai
źródło
0

wprowadź opis zdjęcia tutaj

Dla celu C :

submitButton.layer.cornerRadius = 5;
submitButton.clipsToBounds = YES;

Dla Swift :

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true
Mr.Javed Multani
źródło
0

Aktualizacja Swift 4

Wypróbowałem też wiele opcji, ale nie byłem w stanie uzyskać rundy UIButton. Dodałem kod promienia narożnika wewnątrz viewDidLayoutSubviews()Rozwiązanego problemu.

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = anyButton.frame.height / 2
    }

Możemy również dostosować cornerRadius w następujący sposób

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
Adwait Gaikwad
źródło