iphone - 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、textfieldborderstyleをnoneに設定することです。次に、境界線とコーナーの半径の指定をuiviewに適用します。同じではないにしても、UITextFieldborderColorに非常に近い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

次のコードは、Swift 5、XCode11.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 6

これがあなたの問題の解決策です

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 7

Swift 3ソリューション：

境界線と角の半径を任意のレイヤーにすばやく設定する別の関数を作成しました。任意のビューの層、境界線の幅、角の半径、境界線の色を次の関数に渡すだけです。

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

`

Answer 8

迅速な解決策：

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

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