버튼 모서리를 둥글게하는 방법


182

직사각형 이미지 (jpg)가 있고 xcode에서 모서리가 둥근 버튼의 배경을 채우는 데 사용하고 싶습니다.

나는 다음과 같이 썼다.

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

그러나 그 접근법으로 얻은 버튼에는 모서리가 둥글 지 않습니다. 대신 원래 이미지와 똑같이 보이는 일반 사각형입니다. 모서리가 둥근 이미지를 버튼 대신 표시하려면 어떻게해야합니까?

감사!

답변:


436

나는 당신의 문제가 있다고 생각하고 UITextArea로 다음 솔루션을 시도했으며 이것이 UIButton에서도 작동한다고 생각합니다.

우선 .m 파일로 가져옵니다.

#import <QuartzCore/QuartzCore.h>

그런 다음 loadView메소드 에서 다음 줄을 추가 하십시오.

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

이것이 당신을 위해 작동하고 예라면 의사 소통을하기를 바랍니다.


6
"사용자 정의 런타임 속성"인스펙터와 함께 작동
Avi Cherry

신속하게 작동합니다! YES를 true로 변경하십시오.
앤드류 토마스

119

이 런타임 속성으로 달성 할 수 있습니다

여기에 이미지 설명을 입력하십시오

우리는 사용자 정의 버튼을 만들 수 있습니다. 첨부 된 스크린 샷을 참조하십시오.

친절하게주의하십시오 :

런타임 속성에서 테두리의 색을 변경하려면 다음 지침을 따르십시오.

  1. CALayer의 카테고리 클래스 작성

  2. h 파일에서

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. m 파일에서 :

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

이제 테두리 색상 확인 스크린 샷을 설정합니다

업데이트 된 답변

감사


4
나만 아니면 대답의 정보가 불완전합니까? 실제로 작동하지 않습니다. 업데이트 : 지정하지 않는 한 작동합니다 borderColor. 그러나 borderColor에 항상 검은 색을 사용합니다.
Jonny

3
확장 답변 : IB에 설정된 색상은 CGColorRef 인 borderColor와 작동하지 않는 UIColor 유형일 가능성이 높습니다. 아니면 그런 것. 따라서 해결책은 @property(nonatomic, assign) UIColor* borderIBColor;헤더 파일에 (다른 이름과 충돌하지 않는) CALayer에 카테고리를 작성하는 것이며 구현 방식은 다음과 같습니다.-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny

1
테두리 색을 원하지 않으면 borderRadius를 0으로 설정하면 색이 없습니다!
jungledev

스위프트는 어떻습니까?
Jayprakash Dubey

1
@JayprakashDubey 나는 CALayer의 확장을 만듭니다.
Krutarth Patel

14

DCKit 이라는 내 라이브러리를 확인하고 싶을 수도 있습니다 . 최신 버전의 Swift 에 작성되었습니다 .

인터페이스 빌더에서 둥근 모서리 버튼 / 텍스트 필드를 직접 만들 수 있습니다.

DCKit : 둥근 버튼

또한 유효성 검사가 포함 된 텍스트 필드, 테두리가있는 컨트롤, 점선 테두리, 원 및 헤어 라인보기와 같은 다른 멋진 기능도 많이 있습니다.


11

원을 얻기 위해 한계 모서리 반경까지 밀기 :

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

여기에 이미지 설명을 입력하십시오

버튼 프레임이 정사각형 인 경우 frame.height 또는 frame.width는 중요하지 않습니다. 그렇지 않으면 두 가지 중 가장 큰 것을 사용하십시오.


7

기존 프로젝트에 QuartCore 프레임 워크 가없는 경우 가져 오기를 수행 한 다음 viewcontroller.m#import <QuartzCore/QuartzCore.h> 에서 가져 오십시오 .

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

먼저 버튼의 너비 = 100 및 높이 = 100을 설정하십시오.

목표 C 솔루션

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

스위프트 4 솔루션

YourBtn1.layer.cornerRadius = YourBtn1.Frame.size.width/2
YourBtn1.layer.borderColor = UIColor.black.cgColor
YourBtn1.layer.borderWidth = 1.0

2

한 모서리 또는 두 모서리에만 둥근 모서리를 원하면이 게시물을 읽으십시오.

[ObjC] – 모서리가 둥근 UIButton- http : //goo.gl/kfzvKP

XIB / Storyboard 서브 클래스입니다. 쓰기 코드없이 테두리를 가져오고 설정합니다.



2

스위프트 3 업데이트 :

아래 코드를 사용하여 UIButton 모서리를 둥글게 만듭니다.

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height

2

내 코드를 사용해보십시오. 여기서 텍스트 색상, 배경 색상, 모서리 반경 등과 같은 UIButton의 모든 속성을 설정할 수 있습니다.

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

이제 이렇게 불러

yourBtnName.btnCorner()


0

iOS SWift 4의 경우

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

0

여기에 이미지 설명을 입력하십시오

대한 목표 C :

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

대한 스위프트 :

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true

0

스위프트 4 업데이트

나는 또한 많은 옵션을 시도했지만 여전히 UIButton을 모서리로 볼 수 없었습니다. viewDidLayoutSubviews()Solved My issue 안에 모서리 반경 코드를 추가했습니다 .

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

또한 다음과 같이 코너 반경을 조정할 수 있습니다

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.