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!

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


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


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.


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.


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;

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

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

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.



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

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


0

W systemie iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;

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

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 
    }
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.