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.