のカスタム背景を使用したいと思いましたUITextFields
。これは、UITextBorderStyleNone
見栄えをよくするために使用する必要があるという事実を除いて、正常に機能します。これにより、テキストはパディングなしで左に固定されます。
UITextBorderStyleRoundedRect
カスタムの背景画像を使用することを除いて、パディングを手動で設定して似たようにすることはできますか?
のカスタム背景を使用したいと思いましたUITextFields
。これは、UITextBorderStyleNone
見栄えをよくするために使用する必要があるという事実を除いて、正常に機能します。これにより、テキストはパディングなしで左に固定されます。
UITextBorderStyleRoundedRect
カスタムの背景画像を使用することを除いて、パディングを手動で設定して似たようにすることはできますか?
回答:
私はこの正確な状況のために左パディングを設定するためのきちんとした小さなハックを見つけました。
基本的に、のleftViewプロパティを、UITextField
必要なパディングのサイズの空のビューになるように設定します。
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)];
textField.leftView = paddingView;
textField.leftViewMode = UITextFieldViewModeAlways;
私の魅力のように働いた!
でスウィフト3 /スウィフト4は、それがあることをすることによって行うことができます
let paddingView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 5, height: 20))
textField.leftView = paddingView
textField.leftViewMode = .always
*paddingView
して、複数のテキストフィールドで再利用すると、なぜアプリがハングし、多くのCPUを使用するのですか?
このカテゴリの実装を作成し、.m
ファイルの先頭に追加しました。
@implementation UITextField (custom)
- (CGRect)textRectForBounds:(CGRect)bounds {
return CGRectMake(bounds.origin.x + 10, bounds.origin.y + 8,
bounds.size.width - 20, bounds.size.height - 16);
}
- (CGRect)editingRectForBounds:(CGRect)bounds {
return [self textRectForBounds:bounds];
}
@end
Piotr Blasiakが提供したリンクに基づいています。まったく新しいサブクラスを作成するよりも簡単に見え、さらにを追加するよりも簡単に思えましたUIView
。それでも、テキストフィールド内のパディングを制御できないために何かが欠けているようです。
Swift 4ソリューション:
class CustomTextField: UITextField {
struct Constants {
static let sidePadding: CGFloat = 10
static let topPadding: CGFloat = 8
}
override func textRect(forBounds bounds: CGRect) -> CGRect {
return CGRect(
x: bounds.origin.x + Constants.sidePadding,
y: bounds.origin.y + Constants.topPadding,
width: bounds.size.width - Constants.sidePadding * 2,
height: bounds.size.height - Constants.topPadding * 2
)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return self.textRect(forBounds: bounds)
}
}
Xcode> 6のSwift 3バージョン。InterfaceBuilder / Storyboardでインセット値を編集できます。
import UIKit
@IBDesignable
class FormTextField: UITextField {
@IBInspectable var inset: CGFloat = 0
override func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: inset, dy: inset)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return textRect(forBounds: bounds)
}
}
override func placeholderRectForBounds(bounds: CGRect) -> CGRect { return CGRectInset(bounds, inset, inset) }
return super.textRectForBounds(CGRectInset(bounds, inset, inset))
、アクセサリビューからのオフセットを適切に処理します。
編集:iOS 11.3.1でも動作します
iOS 6 myTextField.leftView = paddingView;
で問題が発生しています
これは問題を解決します
myTextField.layer.sublayerTransform = CATransform3DMakeTranslation(5, 0, 0)
コメントでlatenitecoderがCATransform3DMakeTranslation(-5, 0, 0)
言及した、右揃えのテキストフィールドの使用
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 = UIEdgeInsetsZero;
}
return self;
}
-(id)initWithCoder:(NSCoder *)aDecoder{
self = [super initWithCoder:aDecoder];
if(self){
self.edgeInsets = UIEdgeInsetsZero;
}
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
目的Cコード
MyTextField.h
#import <UIKit/UIKit.h>
@interface MyTextField : UITextField
@property (nonatomic) IBInspectable CGFloat padding;
@end
MyTextField.m
#import "MyTextField.h"
IB_DESIGNABLE
@implementation MyTextField
@synthesize padding;
-(CGRect)textRectForBounds:(CGRect)bounds{
return CGRectInset(bounds, padding, padding);
}
-(CGRect)editingRectForBounds:(CGRect)bounds{
return [self textRectForBounds:bounds];
}
@end
PaddingTextField.swift
import UIKit
class PaddingTextField: UITextField {
@IBInspectable var paddingLeft: CGFloat = 0
@IBInspectable var paddingRight: CGFloat = 0
override func textRectForBounds(bounds: CGRect) -> CGRect {
return CGRectMake(bounds.origin.x + paddingLeft, bounds.origin.y,
bounds.size.width - paddingLeft - paddingRight, bounds.size.height);
}
override func editingRectForBounds(bounds: CGRect) -> CGRect {
return textRectForBounds(bounds)
}}
Evil Troutの回答に基づいて、カテゴリを作成して、複数のアプリケーションで使いやすくすることができます。
ヘッダーファイル:
@interface UITextField (PaddingText)
-(void) setLeftPadding:(int) paddingValue;
-(void) setRightPadding:(int) paddingValue;
@end
実装ファイル:
#import "UITextField+PaddingText.h"
@implementation UITextField (PaddingText)
-(void) setLeftPadding:(int) paddingValue
{
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, paddingValue, self.frame.size.height)];
self.leftView = paddingView;
self.leftViewMode = UITextFieldViewModeAlways;
}
-(void) setRightPadding:(int) paddingValue
{
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, paddingValue, self.frame.size.height)];
self.rightView = paddingView;
self.rightViewMode = UITextFieldViewModeAlways;
}
@end
使用例
#import "UITextField+PaddingText.h"
[self.YourTextField setLeftPadding:20.0f];
皆さんのお役に立てば幸いです
乾杯
Swiftバージョン:
extension UITextField {
@IBInspectable var padding_left: CGFloat {
get {
LF.log("WARNING no getter for UITextField.padding_left")
return 0
}
set (f) {
layer.sublayerTransform = CATransform3DMakeTranslation(f, 0, 0)
}
}
}
IBで値を割り当てることができるように
IBInspectable
実行時にセッターコードを適用できるため、数値を入力するだけでInterface Builder
機能します。
Clear Button
。このソリューションを適用すると、クリアボタンは表示されません。
パディングは設定できません。代わりに、UIView
あなたの背景画像とそのUITextField
内部を持つを持っています。設定しUITextField
て幅をUIViewWidth-(paddingSize x 2)
、高さは、同様に、その後の時点でそれを設定しますpaddingSize,paddingSize
。
次のようにUITextFieldをサブクラス化するだけです(Swiftバージョン):
import UIKit
class CustomTextField: UITextField {
override func textRectForBounds(bounds: CGRect) -> CGRect {
return CGRectInset(bounds, 25.0, 0)
}
override func editingRectForBounds(bounds: CGRect) -> CGRect {
return self.textRectForBounds(bounds)
}
}
これにより、両側に25.0ポイントの水平パディングが追加されます。
私はNateの解決策に基づいていましたが、leftView / rightViewプロパティを使用すると問題が発生することがわかりました。そのため、superの実装をより適切に調整します。これは、left / rightビューを考慮に入れるためです。
- (CGRect)textRectForBounds:(CGRect)bounds {
CGRect ret = [super textRectForBounds:bounds];
ret.origin.x = ret.origin.x + 5;
ret.size.width = ret.size.width - 10;
return ret;
}
- (CGRect)editingRectForBounds:(CGRect)bounds {
return [self textRectForBounds:bounds];
}
Swift 3の更新バージョン:
@IBDesignable
class FormTextField: UITextField {
@IBInspectable var paddingLeft: CGFloat = 0
@IBInspectable var paddingRight: CGFloat = 0
override func textRect(forBounds bounds: CGRect) -> CGRect {
return CGRect(x: bounds.origin.x + paddingLeft, y: bounds.origin.y, width: bounds.size.width - paddingLeft - paddingRight, height: bounds.size.height)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return textRect(forBounds: bounds)
}
}
@Evil Troutの最も投票された回答に基づいて、以下に示すように、ViewControllerクラスにカスタムメソッドを作成しました。
- (void) modifyTextField:(UITextField *)textField
{
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)];
textField.leftView = paddingView;
textField.leftViewMode = UITextFieldViewModeAlways;
textField.rightView = paddingView;
textField.rightViewMode = UITextFieldViewModeAlways;
[textField setBackgroundColor:[UIColor whiteColor]];
[textField setTextColor:[UIColor blackColor]];
}
次のように、内部でそのメソッドを呼び出し(viewDidLoadメソッド)、任意のTextFieldをそのメソッドに送信し、右と左の両方にパディングを追加し、コードを1行だけ記述することでテキストと背景色を指定できます。
[self modifyTextField:self.firstNameTxtFld];
これはiOS 7で完全に機能しました。ビューを追加しすぎると、これがロードされるクラスが少し重くなる可能性があることを知っています。しかし、他のソリューションの難しさを気にしたとき、私はこの方法に偏りがあり、この方法を使用することでより柔軟になりました。;)
ハック「邪悪なマス」をありがとう!(弓)
私はこの回答のコードスニペットをSwiftで更新する必要があると思いました:
Swiftでは既存のクラスの拡張機能を記述できるため、そのように記述しましょう。
extension UITextField {
func addPaddingToTextField() {
let paddingView: UIView = UIView.init(frame: CGRectMake(0, 0, 8, 20))
self.leftView = paddingView;
self.leftViewMode = .Always;
self.rightView = paddingView;
self.rightViewMode = .Always;
self.backgroundColor = UIColor.whiteColor()
self.textColor = UIColor.blackColor()
}
}
使用法:
self.firstNameTxtFld.addPaddingToTextField()
これが他の誰かに役立つことを願っています!
乾杯!
SWIFTでこれを実現する方法は次のとおりです
@IBOutlet weak var yourTextField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
let paddingView = UIView(frame: CGRectMake(0, 0, 10, self.yourTextField.frame.height))
yourTextField.leftView = paddingView
yourTextField.leftViewMode = UITextFieldViewMode.Always
}
}
^これらの提案は、プログラムでインターフェイスを作成しているユーザーに最適です。
しかし、Xcodeインターフェースビルダーを使用する私たちには、2つのLAZY EASY WAYSがあります。
簡単:UIImageViewをテキストフィールドの後ろに配置
最も簡単:上のボーダースタイルをシンプルな黒い四角形(左から2番目のオプション)に変更し、画像を背景画像として追加します。画像は正方形よりも優先されるため、正方形が実際に描画されていなくても、通常の画像の背景に必要なパディングが得られます。
編集:黒い球体(IBでUITextBoxを選択するときに左から3番目のオプション)を使用することもできます。これは、右端の「グラフィックス球体」スタイルでは機能しません。
誰かがSwift 4.0
バージョンを探しているなら、以下extension
が仕事です。これには、Left
との両方のRight
パディングがありますUITextField
。実際にはIBInspectable
、ストーリーボード構成用です。Interface Builder / Storyboardから直接値を設定できます。これはSwift 4.0バージョンとXcode 9.0でテストされたコードです
これを有効Clear Button
にする場合UITextField
は、右パディングを空白にしておく必要があることに注意してください。
import UIKit
extension UITextField {
@IBInspectable var paddingLeft: CGFloat {
get {
return leftView!.frame.size.width
}
set {
let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: frame.size.height))
leftView = paddingView
leftViewMode = .always
}
}
@IBInspectable var paddingRight: CGFloat {
get {
return rightView!.frame.size.width
}
set {
let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: frame.size.height))
rightView = paddingView
rightViewMode = .always
}
}
}
これを行う最善の方法は、UITextFieldのサブクラスを使用してクラスを作成し、.mファイルで作成することです。
#import "CustomTextField.h"
#import <QuartzCore/QuartzCore.h>
@implementation CustomTextField
- (id)initWithCoder:(NSCoder*)coder
{
self = [super initWithCoder:coder];
if (self) {
//self.clipsToBounds = YES;
//[self setRightViewMode:UITextFieldViewModeUnlessEditing];
self.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,15,46)];
self.leftViewMode=UITextFieldViewModeAlways;
}
return self;
}
これを行うには、ストーリーボードまたはxibに移動し、IDインスペクターをクリックして、UITextfieldをクラスオプションの独自の "CustomTextField"に置き換えます。
注:テキストフィールドの自動レイアウトでパディングを指定するだけの場合、アプリケーションは実行されず、空白の画面のみが表示されます。
Swift 3バージョン:
class CustomTextField:UITextField{
required init?(coder aDecoder: NSCoder){
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
override func textRect(forBounds bounds: CGRect) -> CGRect {
return CGRect.init(x: bounds.origin.x + 8, y: bounds.origin.y, width: bounds.width, height: bounds.height)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return self.textRect(forBounds:bounds)
}
}
ネイト・フリンクの 答えは私のお気に入りですが、右/左のビューを忘れないでください。例:UITextField
サブクラス:
override func rightViewRectForBounds(bounds: CGRect) -> CGRect {
let rightViewBounds = super.rightViewRectForBounds(bounds)
return CGRectMake(CGRectGetMinX(rightViewBounds) - 10, CGRectGetMinY(rightViewBounds), CGRectGetWidth(rightViewBounds), CGRectGetHeight(rightViewBounds))
}
上記のコードのための右のパディングを設定rightView
しますUITextField
。
Swift 3ソリューション
class CustomTextField: UITextField {
override func textRect(forBounds bounds: CGRect) -> CGRect {
return CGRect(x: bounds.origin.x + 10, y: bounds.origin.y + 8, width: bounds.size.width - 20, height: bounds.size.height - 16)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return self.textRect(forBounds: bounds)
}
}
UITextfieldにパディングを与えるSwiftコードは次のとおりです
func txtPaddingVw(txt:UITextField) {
let paddingView = UIView(frame: CGRectMake(0, 0, 10, 10))
txt.leftViewMode = .Always
txt.leftView = paddingView
}
を使用して呼び出す
self.txtPaddingVw(txtPin)
カテゴリを使用できます。左右にパディングを設定する
UITextField + Padding.h
@interface UITextField (Padding)
@property (nonatomic, assign) CGFloat paddingValue;
@property (nonatomic, assign) CGFloat leftPadding;
@property (nonatomic, assign) CGFloat rightPadding;
//overwrite
-(CGRect)textRectForBounds:(CGRect)bounds;
-(CGRect)editingRectForBounds:(CGRect)bounds;
@end
UITextField + Padding.m
#import "UITextField+Padding.h"
#import <objc/runtime.h>
static char TAG_LeftPaddingKey;
static char TAG_RightPaddingKey;
static char TAG_Left_RightPaddingKey;
@implementation UITextField (Padding)
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wobjc-protocol-method-implementation"
-(CGRect)textRectForBounds:(CGRect)bounds {
CGFloat offset_Left=0;
CGFloat offset_Right=0;
if (self.paddingValue>0) {
offset_Left=self.paddingValue;
offset_Right=offset_Left;
}else{
if (self.leftPadding>0){
offset_Left=self.leftPadding;
}
if (self.rightPadding>0){
offset_Right=self.rightPadding;
}
}
if (offset_Left>0||offset_Right>0) {
return CGRectMake(bounds.origin.x+ offset_Left ,bounds.origin.y ,
bounds.size.width- (offset_Left+offset_Right), bounds.size.height-2 );
}else{
return bounds;
}
}
-(CGRect)editingRectForBounds:(CGRect)bounds {
return [self textRectForBounds:bounds];
}
#pragma clang diagnostic pop
#pragma maek -setter&&getter
- (CGFloat)paddingValue
{
return [objc_getAssociatedObject(self,&TAG_Left_RightPaddingKey) floatValue];
}
-(void)setPaddingValue:(CGFloat)paddingValue
{
objc_setAssociatedObject(self, &TAG_Left_RightPaddingKey, @(paddingValue), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(CGFloat)leftPadding
{
return [objc_getAssociatedObject(self,&TAG_LeftPaddingKey) floatValue];
}
-(void)setLeftPadding:(CGFloat)leftPadding
{
objc_setAssociatedObject(self, &TAG_LeftPaddingKey, @(leftPadding), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(CGFloat)rightPadding
{
return [objc_getAssociatedObject(self,&TAG_RightPaddingKey) floatValue];
}
-(void)setRightPadding:(CGFloat)rightPadding
{
objc_setAssociatedObject(self, &TAG_RightPaddingKey, @(rightPadding), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
@end
このようにパディングを設定できます 。self.phoneNumTF.paddingValue= 10.f; またはself.phoneNumTF.leftPadding = 10.f;
@邪悪なマスの答えは素晴らしいです。私はこのアプローチをかなり長い間使用しています。それが欠けている唯一のものは、「多数のテキストフィールドを扱う」ことです。他の方法を試しましたが、うまくいかないようです。
パディングを追加するためだけにUITextFieldをサブクラス化しても、私には意味がありませんでした。そこで、すべてのUITextFieldを繰り返し処理して、パディングを追加しました。
-(void) addPaddingToAllTextFields:(UIView*)view {
for(id currentView in [view subviews]){
if([currentView isKindOfClass:[UITextField class]]) {
// Change value of CGRectMake to fit ur need
[currentView setLeftView:[[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 20)]];
[currentView setLeftViewMode:UITextFieldViewModeAlways];
}
if([currentView respondsToSelector:@selector(subviews)]){
[textfieldarray addObjectsFromArray:[self addPaddingToAllTextFields:currentView]];
}
}
}
textfieldarray
秒で定義されていないif
ブロック、私は2番目の内容を交換した後、成功とこのスニペット(!ありがとう)を使用if
してfor(id subSubView in [view subviews]){[self addPaddingToAllTextFields:subSubView];}
これまでに見つけた最良の解決策はカテゴリです。これが、5ポイントのパディングを左右に追加する方法です。
@implementation UITextField (Padding)
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wobjc-protocol-method-implementation"
- (CGRect)textRectForBounds:(CGRect)bounds {
return CGRectMake(bounds.origin.x + 5, bounds.origin.y,
bounds.size.width - 10, bounds.size.height);
}
- (CGRect)editingRectForBounds:(CGRect)bounds {
return [self textRectForBounds:bounds];
}
#pragma clang diagnostic pop
@end
#pragmaは、迷惑な警告を削除するためのものです
別の考慮事項は、UITextField
パディングを追加する場所が複数ある場合は、UIView
テキストフィールドごとに個別に作成することです。これらは共有できないためです。