UITextField - 圆角问题

Question

我提出了我面临的问题。我正在以编程方式创建UITextField，如下所示。

UItextField *mobileNumberField = [[UITextField alloc] initWithFrame:CGRectMake(10, 195, 300, 41)];
mobileNumberField.delegate = self;
mobileNumberField.borderStyle = UITextBorderStyleRoundedRect;
[mobileNumberField.layer setCornerRadius:14.0f];
mobileNumberField.placeholder = @"Mobile Number";
[self.paymentsHomeView addSubview:mobileNumberField];

输出是附加图像。

我不知道为什么它会在拐角处破裂。帮我修改我的文本字段，如下图所示。

提前致谢..！

Answer 1

只需删除此行...

mobileNumberField.borderStyle = UITextBorderStyleRoundedRect;

并添加此代码..

    [mobileNumberField setBackgroundColor:[UIColor whiteColor]];
    [mobileNumberField.layer setBorderColor:[UIColor grayColor].CGColor];
    [mobileNumberField.layer setBorderWidth:1.0];

我希望这可以帮到你..

Answer 2

在下面更新您的内容。

    UITextField *mobileNumberField = [[UITextField alloc] initWithFrame:CGRectMake(10, 195, 300, 41)];
    mobileNumberField.delegate = self;
    mobileNumberField.layer.borderWidth = 1.0f;
    mobileNumberField.layer.borderColor = [UIColor lightGrayColor].CGColor;
    mobileNumberField.
//    mobileNumberField.borderStyle = UITextBorderStyleRoundedRect;
    [mobileNumberField.layer setCornerRadius:14.0f];
    mobileNumberField.placeholder = @"Mobile Number";
    [self.paymentsHomeView addSubview:mobileNumberField];

Answer 3

textField.layer.cornerRadius=textfield.frame.size.height/2;

textField.clipsToBounds=YES;

Answer 4

切角的原因是因为文本字段有一个封闭视图。设置角半径时，应用于那个视图，因此内部文本字段的角落似乎被切割 - 实际上它们甚至没有改变。

解决方案是将UITextField置于UIView内，将textfield borderstyle设置为none。然后将边框和拐角半径规范应用于uiview。注意borderColor，它与UITextField borderColor非常接近（如果不相同）。

编写，测试并在Xcode 7.3.1，Swift 2.2，iOS 8和9中工作。

夫特：

textField.borderStyle = UITextBorderStyle.None
textBorderView.layer.cornerRadius = 5
textBorderView.layer.borderWidth = 1
textBorderView.layer.borderColor = UIColor.lightGrayColor().colorWithAlphaComponent(0.2).CGColor

Answer 5

以下是您的问题的解决方案

UITextField * txtField = [[UITextField alloc]initWithFrame:CGRectMake(0, 0, 200, 50)];

[txtField setBorderStyle:UITextBorderStyleNone];

[txtField.layer setMasksToBounds:YES];
[txtField.layer setCornerRadius:10.0f];
[txtField.layer setBorderColor:[[UIColor lightGrayColor]CGColor]];
[txtField.layer setBorderWidth:1];
[txtField setTextAlignment:UITextAlignmentCenter];
[txtField setContentVerticalAlignment:UIControlContentVerticalAlignmentCenter];
[self.view addSubview:txtField];

Answer 6

Swift 3解决方案：

我已经编写了单独的函数来将边框和角半径设置为swift中的任何图层，您必须将任意视图，边框宽度，边角半径和边框颜色的图层传递给以下函数

` func setBorderAndCornerRadius(layer: CALayer, width: CGFloat, radius: CGFloat,color : UIColor ) {
        layer.borderColor = color.cgColor
        layer.borderWidth = width
        layer.cornerRadius = radius
        layer.masksToBounds = true
    }

`

Answer 7

快速解决方案：

textField.layer.borderWidth = anyWidth
textField.layer.borderColor = anyColor
textField.layer.cornerRadius = textField.frame.size.height/2
textField.clipsToBounds = true

Answer 8

以下代码在Swift 5，XCode 11.4中为我提供了以下结果。
肯定可以添加更多的铃声。我认为这个好MVP

    naviTextField = UITextField.init(frame: CGRect(x: 0, y: 0, width: (self.navigationController?.navigationBar.frame.size.width)!, height: 21))
    self.navigationItem.titleView = naviTextField
    naviTextField.becomeFirstResponder()
    naviTextField.placeholder = "Type target name here"
    naviTextField.borderStyle = .roundedRect
    naviTextField.layer.cornerRadius = 5.0
    naviTextField.textAlignment = .center

Answer 9

以上所有答案都很好，但在这里我通过@IBDesignable 添加代码。

@IBDesignable class DesignableUITextField: UITextField {

// Provides left padding for images
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
    var textRect = super.leftViewRect(forBounds: bounds)
    textRect.origin.x += leftPadding
    return textRect
}

// Provides right padding for images
override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
    var textRect = super.rightViewRect(forBounds: bounds)
    textRect.origin.x -= rightPadding
    return textRect
}

@IBInspectable var leftImage: UIImage? {
    didSet {
        updateView()
    }
}

@IBInspectable var rightImage: UIImage? {
    didSet {
        updateRightView()
    }
}

@IBInspectable var leftPadding: CGFloat = 0
@IBInspectable var rightPadding: CGFloat = 0
@IBInspectable var gapPadding: CGFloat = 0
@IBInspectable var color: UIColor = UIColor.lightGray {
    didSet {
        updateView()
    }
}
@IBInspectable var cornerRadius: CGFloat = 0
@IBInspectable var borderColor: UIColor? = .lightGray

override func draw(_ rect: CGRect) {
    layer.cornerRadius = cornerRadius
    layer.masksToBounds = true
    layer.borderWidth = 1
    layer.borderColor = borderColor?.cgColor
    
}    

//@IBInspectable var roundCornersRadius: CGFloat = 0 {
  //  didSet{
     //   roundCornersRadiusTextField(radius: roundCornersRadius)
  //  }
// }


func roundCornersRadiusTextField(radius:CGFloat) {
       roundCorners(corners: [UIRectCorner.topLeft, UIRectCorner.topRight, UIRectCorner.bottomLeft, UIRectCorner.bottomRight], radius:radius)
   }

   func roundBottomCornersRadius(radius:CGFloat) {
       roundCorners(corners: [UIRectCorner.topLeft, UIRectCorner.topRight], radius:radius)
   }

func updateView() {
    if let image = leftImage {
        leftViewMode = UITextField.ViewMode.always
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
        imageView.contentMode = .scaleAspectFit
        imageView.image = image
        // Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image".
        imageView.tintColor = color
        leftView = imageView
    } else {
        leftViewMode = UITextField.ViewMode.never
        leftView = nil
    }
    
    // Placeholder text color
    attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])
}


func updateRightView() {
    if let image = rightImage {
        rightViewMode = UITextField.ViewMode.always
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
        imageView.contentMode = .scaleAspectFit
        imageView.image = image
        // Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image".
        imageView.tintColor = color
        rightView = imageView
    } else {
        rightViewMode = UITextField.ViewMode.never
        rightView = nil
    }
    
    // Placeholder text color
    attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])
}

func roundCorners(corners:UIRectCorner, radius:CGFloat) {
        let bounds = self.bounds
        
        let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = maskPath.cgPath
        
        self.layer.mask = maskLayer
        
        let frameLayer = CAShapeLayer()
        frameLayer.frame = bounds
        frameLayer.path = maskPath.cgPath
        frameLayer.strokeColor = UIColor.darkGray.cgColor
        frameLayer.fillColor = UIColor.init(red: 247, green: 247, blue: 247, alpha: 0).cgColor
        
        self.layer.addSublayer(frameLayer)
    }

private var textPadding: UIEdgeInsets {
    let p: CGFloat = leftPadding + gapPadding + (leftView?.frame.width ?? 0)
    return UIEdgeInsets(top: 0, left: p, bottom: 0, right: 5)
}
override open func textRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.inset(by: textPadding)
}

override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.inset(by: textPadding)
}

override open func editingRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.inset(by: textPadding)
}}