繁体   English   中英

如何使用图标向UITextField添加填充

[英]How do I add padding to a UITextField with an icon

我目前有以下代码来设置密码文本字段:

  self.passwordTextField = [UITextField new];
  self.passwordTextField.placeholder = @"Password";
  self.passwordTextField.font = [UIFont systemFontOfSize:18.f];
  self.passwordTextField.secureTextEntry = YES;
  self.passwordTextField.returnKeyType = UIReturnKeyDone;
  self.passwordTextField.delegate = self;
  self.passwordTextField.backgroundColor = [UIColor colorWithRed:255 green:255 blue:255 alpha:0.64];
  self.passwordTextField.layer.borderColor = [[UIColor lightGrayColor] CGColor];
  self.passwordTextField.layer.borderWidth = 1.0f;

  CGFloat textFieldHeight = 45.f;
  CGFloat textFieldWidth = 300.f;
  self.passwordTextField.frame = CGRectMake(DIALOG_VIEW_WIDTH/2.f - textFieldWidth / 2.f, 240.f, textFieldWidth, textFieldHeight);

  UIImageView *icon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"text-input-icon-password-key.png"]];
  icon.frame = CGRectMake(0, 0, 45.f, 45.f);
  icon.backgroundColor = [UIColor lightGrayColor];
  self.passwordTextField.leftView = icon;
  self.passwordTextField.leftViewMode = UITextFieldViewModeAlways;

  [self.dialogView addSubview:self.passwordTextField];

这给了我这个:

在此输入图像描述

但是,我想在占位符文本的左侧和显示图标的图像视图的右侧添加一些更透明的填充。 有什么想法可以做到这一点?


更新:感谢您的回复。 我最终通过为整个对象创建一个UIView来实现这一点,其中UIImageView用于图标,UITextField嵌入另一个UIView用于文本。 结果如下:

在此输入图像描述

更新:感谢您的回复。我最终通过为整个对象创建了一个UIView来实现这一目标,其中包含用于图标的UIImageView和用于文本的另一个UIView中嵌入的UITextField。

您可以继续使用UITextFieldleftView属性:

UIView *vwContainer = [[UIView alloc] init];
[vwContainer setFrame:CGRectMake(0.0f, 0.0f, 50.0f, 45.0f)];
[vwContainer setBackgroundColor:[UIColor clearColor]];

UIImageView *icon = [[UIImageView alloc] init];
[icon setImage:[UIImage imageNamed:@"text-input-icon-password-key.png"]];
[icon setFrame:CGRectMake(0.0f, 0.0f, 45.0f, 45.0f)];
[icon setBackgroundColor:[UIColor lightGrayColor]];

[vwContainer addSubview:icon];

[self.passwordTextField setLeftView:vwContainer];
[self.passwordTextField setLeftViewMode:UITextFieldViewModeAlways];

如果要完全控制自定义布局,则应该leftViewRectForBounds: UITextField并覆盖leftViewRectForBounds:placeholderRectForBounds:方法。 然后,您可以返回两个区域的帧,从而指定它们之间的填充。

这是一个UITextField子类,允许在leftView(图标),文本和占位符文本上使用insets。 这些都可以在IB中配置

class UITextFieldWithInsets: UITextField {
    @IBInspectable var horizontalInset:CGFloat = 0
    @IBInspectable var verticalInset:CGFloat = 0

    @IBInspectable var leftViewHorizontalInset:CGFloat = 0
    @IBInspectable var leftViewVerticalInset:CGFloat = 0

    override func textRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectInset(bounds , horizontalInset , verticalInset)
    }

    override func editingRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectInset(bounds , horizontalInset + leftViewHorizontalInset + leftViewWidth, verticalInset)
    }

    override func placeholderRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectInset(bounds, horizontalInset + leftViewHorizontalInset + leftViewWidth, verticalInset)
    }

    override func leftViewRectForBounds(bounds: CGRect) -> CGRect {
        let verticalInsetForCentered = (bounds.height - leftViewHeight) / 2
        return CGRect(x: leftViewHorizontalInset, y: leftViewVerticalInset > 0 ? leftViewVerticalInset : verticalInsetForCentered, width: leftViewWidth, height: leftViewHeight)
    }

    private var leftViewWidth : CGFloat { get { return leftView?.frame.width ?? 0 } }
    private var leftViewHeight : CGFloat { get { return leftView?.frame.width ?? 0 } }
}

您可以使用更宽的图像作为带有右透明列的图标。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM