web-dev-qa-db-ja.com

UITextFieldのテキストをインデントする

私の質問はタイトルと同じくらい簡単ですが、ここにもう少しあります：

背景画像を設定したUITextFieldがあります。問題は、テキストが画像のエッジでもあるエッジに非常に近いことです。テキストフィールドをAppleのように見せたいです。背景画像とテキストの開始位置との間にわずかな水平スペースがあります。

iphoneobjective-cioscocoa-touchuitextfield
76
Dyldo42

これは、サブクラスを実行せずに見つけた最も速い方法です。

UIView *spacerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
[textfield setLeftViewMode:UITextFieldViewModeAlways];
[textfield setLeftView:spacerView];

Swiftの場合：

let spacerView = UIView(frame:CGRect(x:0, y:0, width:10, height:10))
textField.leftViewMode = UITextFieldViewMode.Always
textField.leftView = spacerView
232
adjwilli

サブクラス化し、textRectForBounds：およびEditingRectForBounds：をオーバーライドする必要があります。カスタム背景と垂直および水平パディングを備えたUITextfieldサブクラスを次に示します。

@interface MyUITextField : UITextField 
@property (nonatomic, assign) float verticalPadding;
@property (nonatomic, assign) float horizontalPadding;
@end

#import "MyUITextField.h"
@implementation MyUITextField
@synthesize horizontalPadding, verticalPadding;
- (CGRect)textRectForBounds:(CGRect)bounds {
    return CGRectMake(bounds.Origin.x + horizontalPadding, bounds.Origin.y + verticalPadding, bounds.size.width - horizontalPadding*2, bounds.size.height - verticalPadding*2);
}
- (CGRect)editingRectForBounds:(CGRect)bounds {
    return [self textRectForBounds:bounds];
}
@end

使用法：

UIImage *bg = [UIImage imageNamed:@"textfield.png"];
CGRect rect = CGRectMake(0, 0, bg.size.width, bg.size.height);
MyUITextField *textfield = [[[MyUITextField alloc] initWithFrame:rect] autorelease];
textfield.verticalPadding = 10; 
textfield.horizontalPadding = 10;
[textfield setBackground:bg];
[textfield setBorderStyle:UITextBorderStyleNone];
[self.view addSubview:textfield];
42
Jano

UITextFieldにパディングを追加する良い方法は、UITextFieldをサブクラス化して、四角形のメソッドをオーバーライドし、edgeInsetsプロパティを追加することです。その後、edgeInsetsを設定すると、それに応じてUITextFieldが描画されます。これは、カスタムのleftViewまたはrightViewセットでも正しく機能します。

OSTextField.h

#import <UIKit/UIKit.h>

@interface OSTextField : UITextField

@property (nonatomic, assign) UIEdgeInsets edgeInsets;

@end

OSTextField.m

#import "OSTextField.h"

@implementation OSTextField

- (id)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.edgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
    }
    return self;
}

-(id)initWithCoder:(NSCoder *)aDecoder{
    self = [super initWithCoder:aDecoder];
    if(self){
        self.edgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
    }
    return self;
}

- (CGRect)textRectForBounds:(CGRect)bounds {
    return [super textRectForBounds:UIEdgeInsetsInsetRect(bounds, self.edgeInsets)];
}

- (CGRect)editingRectForBounds:(CGRect)bounds {
    return [super editingRectForBounds:UIEdgeInsetsInsetRect(bounds, self.edgeInsets)];
}

@end
26
Brody Robertson

私はこれをストーリーボード内で使用するための素敵な小さな拡張に変えました：

public extension UITextField {
    @IBInspectable public var leftSpacer:CGFloat {
        get {
            if let l = leftView {
                return l.frame.size.width
            } else {
                return 0
            }
        } set {
            leftViewMode = .Always
            leftView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: frame.size.height))
        }
    }
}
11
Oxcug

私の2セント：

class PaddedTextField : UITextField {
    var insets = UIEdgeInsets.zero
    var verticalPadding:CGFloat = 0
    var horizontalPadding:CGFloat = 0

    override func textRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.Origin.x + insets.left, y: bounds.Origin.y + insets.top, width: bounds.size.width - (insets.left + insets.right), height: bounds.size.height - (insets.top + insets.bottom));
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return textRect(forBounds: bounds)
    }
}
2
Chris Prince

UITextFieldをUITextViewに変換し、contentInsetを設定することをお勧めします。たとえば、10スペース分インデントするには：

textview.contentInset=UIEdgeInsetsMake(0, 10, 0, 0);
1
user790072

@IBOutletのサブクラスを作成したくない場合は（Swiftで答えてください）：

class PaddedTextField: UITextField {

  override func awakeFromNib() {
      super.awakeFromNib()

      let spacerView = UIView(frame:CGRect(x: 0, y: 0, width: 10, height: 10))
      leftViewMode = .always
      leftView = spacerView
   }
}
0
Vrutin Rathod

TextFieldのleftViewがAppleの虫眼鏡画像である場合があります。その場合、次のようなインデントを設定できます。

    UIView *leftView = textField.leftView;
    if (leftView && [leftView isKindOfClass:[UIImageView class]]) {
        leftView.contentMode = UIViewContentModeCenter;
        leftView.width = 20.0f;  //the space you want indented.
    }
0
Lirik