Cách làm tròn các góc của nút


182

Tôi có một hình ảnh hình chữ nhật (jpg) và muốn sử dụng nó để lấp đầy nền của một nút với góc tròn trong xcode.

Tôi đã viết như sau:

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

Tuy nhiên, nút tôi nhận được với cách tiếp cận đó không có các góc được làm tròn: thay vào đó là một hình chữ nhật đơn giản trông giống hệt hình ảnh gốc của tôi. Làm thế nào tôi có thể nhận được thay vì một hình ảnh với góc tròn để đại diện cho nút của tôi?

Cảm ơn!

Câu trả lời:


436

Tôi nghĩ rằng tôi đã gặp vấn đề của bạn, tôi đã thử giải pháp sau với UITextArea và tôi cho rằng điều này cũng sẽ hoạt động với UIButton.

trước hết nhập cái này trong tệp .m của bạn -

#import <QuartzCore/QuartzCore.h>

và sau đó trong loadViewphương thức của bạn thêm các dòng sau

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

Hy vọng điều này làm việc cho bạn và nếu có làm giao tiếp.


6
Cũng hoạt động với thanh tra "Thuộc tính thời gian chạy do người dùng xác định"
Avi Cherry

Làm việc cho swift cũng! Chỉ cần thay đổi CÓ thành đúng.
Andrew Thomas

119

Bạn có thể đạt được bằng các thuộc tính RunTime này

nhập mô tả hình ảnh ở đây

chúng ta có thể thực hiện tùy chỉnh button.just xem ảnh chụp màn hình đính kèm.

vui lòng chú ý:

trong các thuộc tính thời gian chạy để thay đổi màu của đường viền theo hướng dẫn này

  1. tạo lớp thể loại của CALayer

  2. trong tập tin h

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. trong tập tin m:

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

bây giờ trở đi để thiết lập ảnh chụp màn hình màu kiểm tra

cập nhật câu trả lời

cảm ơn


4
Chỉ tôi hoặc là thông tin trong câu trả lời không đầy đủ? Nó không thực sự hoạt động. Cập nhật: nó hoạt động miễn là tôi không chỉ định borderColor. Nhưng sau đó, nó luôn sử dụng màu đen cho BorderColor.
Jonny

3
Câu trả lời mở rộng: Màu được đặt trong IB có thể thuộc loại UIColor không hoạt động với BorderColor, thuộc CGColorRef. Hoặc điều tương tự. Vì vậy, một giải pháp là tạo một danh mục trên CALayer, với một cái gì đó như @property(nonatomic, assign) UIColor* borderIBColor;(không đụng độ với một tên khác) trong tệp tiêu đề và việc thực hiện là:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny

1
Nếu bạn không muốn màu đường viền, hãy đặt BorderRadius thành 0 và bạn sẽ không có màu!
jungledev


1
@JayprakashDubey tôi tạo phần mở rộng của CALayer.
Krutarth Patel

14

Bạn có thể muốn kiểm tra thư viện của tôi được gọi là DCKit . Nó được viết trên phiên bản mới nhất của Swift .

Bạn có thể tạo trực tiếp nút góc / trường văn bản từ trình tạo Giao diện:

DCKit: nút tròn

Nó cũng có nhiều tính năng thú vị khác, chẳng hạn như các trường văn bản có xác thực, điều khiển với các đường viền, đường viền nét đứt, hình tròn và đường viền tóc, v.v.


11

Đẩy đến bán kính góc giới hạn lên để có được một vòng tròn:

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

nhập mô tả hình ảnh ở đây

Nếu khung nút là một hình vuông thì nó không quan trọng frame.height hay frame. Thong. Nếu không sử dụng lớn nhất của cả hai.


7

Nhập khung QuartCore nếu nó không có trong dự án hiện tại của bạn, sau đó nhập #import <QuartzCore/QuartzCore.h>vào viewcontroll.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

Chiều rộng đặt đầu tiên = 100 và Chiều cao = 100 nút

Giải pháp khách quan C

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

Giải pháp Swift 4

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

2

Nếu bạn muốn một góc tròn chỉ đến một góc hoặc hai góc, v.v ... hãy đọc bài đăng này:

[ObjC] - UIButton với góc tròn - http://goo.gl/kfzvKP

Đó là một lớp con XIB / Storyboard. Nhập và đặt đường viền mà không cần viết mã.



2

cập nhật cho Swift 3:

được sử dụng dưới đây để làm cho góc UIButton:

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

2

Hãy thử mã của tôi. Tại đây bạn có thể đặt tất cả các thuộc tính của UIButton như màu văn bản, màu nền, bán kính góc, v.v.

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

Bây giờ gọi như thế này

yourBtnName.btnCorner()


0

Dành cho iOS SWift 4

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

0

nhập mô tả hình ảnh ở đây

Đối với mục tiêu C :

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

Dành cho Swift :

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

0

Cập nhật Swift 4

Tôi cũng đã thử nhiều lựa chọn nhưng tôi vẫn không thể có được vòng UIButton của mình. Tôi đã thêm mã bán kính góc bên trong viewDidLayoutSubviews()vấn đề Solved My.

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

Ngoài ra, chúng ta có thể điều chỉnh angleRadius như sau

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.