- GitHub源碼：JVFloatLabeledTextField
- star: 6000+
??????
以下內(nèi)容來源于官方源碼统捶、 README 文檔榆芦、測試 Demo或個人使用總結(jié) ！
JVFloatLabeledTextField 是已經(jīng)被稱為“浮動標(biāo)簽?zāi)Ｊ健钡腢X模式的第一實(shí)現(xiàn)喘鸟。
由于移動設(shè)備的空間限制匆绣，通常只依靠占位符作為標(biāo)記字段的手段。 這就會產(chǎn)生UX問題迷守，因?yàn)橐坏┯脩糸_始填寫表單犬绒，就不會出現(xiàn)占位符標(biāo)簽旺入。
這個包含 UITextField 和 UITextView 子類的UI組件庫旨在通過將占位符轉(zhuǎn)換為懸停在浮動標(biāo)簽之上的浮動標(biāo)簽來改善用戶體驗(yàn)兑凿。
可以有效解決移動設(shè)備上進(jìn)行表單輸入時,無法邊看表單提示邊進(jìn)行輸入的困境凯力。
以下是兩個頭文件的源碼：
JVFloatLabeledTextField.h
IB_DESIGNABLE
@interface JVFloatLabeledTextField : UITextField
/**
* 只讀的浮動式標(biāo)簽.
*/
@property (nonatomic, strong, readonly) UILabel * floatingLabel;
/**
* 浮動標(biāo)簽距離內(nèi)容的垂直距離(Y坐標(biāo)).
* 默認(rèn)是 0.
*/
@property (nonatomic) IBInspectable CGFloat floatingLabelYPadding;
/**
* 浮動標(biāo)簽距離內(nèi)容的水平距離(X坐標(biāo)).
* 默認(rèn)是 0.
*/
@property (nonatomic) IBInspectable CGFloat floatingLabelXPadding;
/**
* 用于修改浮動標(biāo)簽字體大小的比例.
* 默認(rèn)是 70%.
*/
@property (nonatomic) IBInspectable CGFloat floatingLabelReductionRatio;
/**
* 占位符內(nèi)容的垂直距離(Y坐標(biāo)).
* 默認(rèn)是 0.
*/
@property (nonatomic) IBInspectable CGFloat placeholderYPadding;
/**
* 浮動式標(biāo)簽的字體.
* 默認(rèn)值有兩個,按優(yōu)先順序排列:
* - 自定義的占位符內(nèi)容字體的70%.
* - 自定義的輸入框內(nèi)容字體的70%.
*/
@property (nonatomic, strong) UIFont * floatingLabelFont;
/**
* 浮動式標(biāo)簽的正常字體顏色.
* 默認(rèn)是 [UIColor grayColor].
*/
@property (nonatomic, strong) IBInspectable UIColor * floatingLabelTextColor;
/**
* 輸入框成為第一響應(yīng)者時,浮動標(biāo)簽的文字顏色.
* 如未設(shè)置，默認(rèn)是 Tint color.
*/
@property (nonatomic, strong) IBInspectable UIColor * floatingLabelActiveTextColor;
/**
* 指明浮動式標(biāo)簽的外觀是否只在輸入框成為第一響應(yīng)者時才使用動態(tài)變化效果.
* 默認(rèn)情況下,僅在輸入框成為第一響應(yīng)者時,浮動式標(biāo)簽的外觀才會有動態(tài)變化的效果.
*/
@property (nonatomic, assign) IBInspectable BOOL animateEvenIfNotFirstResponder;
/**
* 顯示浮動式標(biāo)簽的動畫時長.
* 默認(rèn)0.3秒.
*/
@property (nonatomic, assign) NSTimeInterval floatingLabelShowAnimationDuration;
/**
* 隱藏浮動式標(biāo)簽時的動畫時長.
* 默認(rèn)0.3秒.
*/
@property (nonatomic, assign) NSTimeInterval floatingLabelHideAnimationDuration;
/**
* 指明清除按鈕是否自動和文本對齊.
* 默認(rèn)值:YES.
*/
@property (nonatomic, assign) IBInspectable BOOL adjustsClearButtonRect;
/**
* 指明當(dāng)輸入文字時,是否下調(diào)基準(zhǔn)線(baseline).設(shè)置為YES(非默認(rèn)值),意味著占位內(nèi)容會和輸入內(nèi)容對齊.
* 默認(rèn)為 NO（標(biāo)準(zhǔn)占位符內(nèi)容將高于任何輸入的文本）
*/
@property (nonatomic, assign) IBInspectable BOOL keepBaseline;
/**
* 強(qiáng)制浮動式標(biāo)簽始終可見.
* 默認(rèn)為 NO.
*/
@property (nonatomic, assign) BOOL alwaysShowFloatingLabel;
/**
* 占位符文本的顏色
*/
@property (nonatomic, strong) IBInspectable UIColor * placeholderColor;
/**
* 設(shè)置占位符文字和浮動式標(biāo)簽的文字.
*
* @param placeholder 沒有文字輸入時,默認(rèn)顯示的內(nèi)容.
* @param floatingTitle 當(dāng)用戶輸入文本后礼华，文本字段上方顯示的浮動式標(biāo)簽字符串咐鹤。
*/
- (void)setPlaceholder:(NSString *)placeholder floatingTitle:(NSString *)floatingTitle;
/**
* 設(shè)置 attributed 占位符文字和浮動式標(biāo)簽的文字.
*
* @param attributedPlaceholder 沒有文字輸入時,默認(rèn)顯示的內(nèi)容.
* @param floatingTitle 當(dāng)用戶輸入文本后，文本字段上方顯示的浮動式標(biāo)簽字符串圣絮。
*/
- (void)setAttributedPlaceholder:(NSAttributedString *)attributedPlaceholder floatingTitle:(NSString *)floatingTitle;
JVFloatLabeledTextView.h
IB_DESIGNABLE
@interface JVFloatLabeledTextView : UITextView
/**
* 當(dāng)沒有其他文本存在時祈惶，在文本視圖中顯示的占位符字符串。
*/
@property (nonatomic, copy) IBInspectable NSString * placeholder;
/**
* 只讀屬性的占位符文本框
*/
@property (nonatomic, strong, readonly) UILabel * placeholderLabel;
/**
* 只讀屬性的浮動式標(biāo)簽文本框
*/
@property (nonatomic, strong, readonly) UILabel * floatingLabel;
/**
* 浮動標(biāo)簽距離內(nèi)容的垂直距離(Y坐標(biāo)).
*/
@property (nonatomic) IBInspectable CGFloat floatingLabelYPadding;
/**
* 浮動標(biāo)簽距離內(nèi)容的水平距離(X坐標(biāo)).
*/
@property (nonatomic) IBInspectable CGFloat floatingLabelXPadding;
/**
* 占位符內(nèi)容的垂直距離(Y坐標(biāo)).
*/
@property (nonatomic) IBInspectable CGFloat placeholderYPadding;
/**
* 浮動標(biāo)簽文本的字體. 默認(rèn) [UIFont boldSystemFontOfSize:12.0f].
* 提供方便的外觀代理方法
*/
@property (nonatomic, strong) UIFont * floatingLabelFont;
/**
* 浮動式標(biāo)簽的正常字體顏色.
* 默認(rèn) [UIColor grayColor].
* 提供方便的外觀代理方法
*/
@property (nonatomic, strong) IBInspectable UIColor * floatingLabelTextColor;
/**
* 輸入框成為第一響應(yīng)者時,浮動標(biāo)簽的文字顏色.
* 如未設(shè)置扮匠，默認(rèn)是 Tint color.
*/
@property (nonatomic, strong) IBInspectable UIColor * floatingLabelActiveTextColor;
/**
* 浮動標(biāo)簽是否應(yīng)鎖定到文本視圖的頂部捧请，或者當(dāng)文本視圖是可滾動的時，可以使浮動標(biāo)簽跟隨文本滾動棒搜。 默認(rèn)情況下疹蛉，浮動標(biāo)簽將鎖定到文本視圖的頂部，并將其背景顏色設(shè)置為文本視圖的背景顏色
* 請注意力麸，當(dāng)浮動標(biāo)簽具有非清晰的背景顏色時可款，效果最佳。
*/
@property (nonatomic, assign) IBInspectable BOOL floatingLabelShouldLockToTop;
/**
* 占位符文本的字體顏色.
* 默認(rèn) [[UIColor lightGrayColor] colorWithAlphaComponent:0.65f].
*/
@property (nonatomic, strong) IBInspectable UIColor * placeholderTextColor;
/**
* 指明浮動式標(biāo)簽的外觀是否只在輸入框成為第一響應(yīng)者時才使用動態(tài)變化效果.
* 默認(rèn)情況下,僅在輸入框成為第一響應(yīng)者時,浮動式標(biāo)簽的外觀才會有動態(tài)變化的效果.
*/
@property (nonatomic, assign) IBInspectable BOOL animateEvenIfNotFirstResponder;
/**
* 顯示浮動式標(biāo)簽的動畫時長.
* 默認(rèn)0.3秒.
*/
@property (nonatomic, assign) NSTimeInterval floatingLabelShowAnimationDuration UI_APPEARANCE_SELECTOR;
/**
* 隱藏浮動式標(biāo)簽時的動畫時長.
* 默認(rèn)0.3秒.
*/
@property (nonatomic, assign) NSTimeInterval floatingLabelHideAnimationDuration UI_APPEARANCE_SELECTOR;
/**
* 強(qiáng)制浮動式標(biāo)簽始終可見.
* 默認(rèn) NO
*/
@property (nonatomic, assign) BOOL alwaysShowFloatingLabel;
/**
* 文本容器插入的頂部值
* 如果你需要在文本輸入框和浮動標(biāo)簽之間有更多填充空間克蚂，請更改此值
*/
@property (nonatomic) CGFloat startingTextContainerInsetTop;
/**
* 設(shè)置占位符文字和浮動式標(biāo)簽的文字.
*
* @param placeholder 沒有文字輸入時,默認(rèn)顯示的內(nèi)容.
* @param floatingTitle 當(dāng)用戶輸入文本后闺鲸，文本字段上方顯示的浮動式標(biāo)簽字符串.
*/
- (void)setPlaceholder:(NSString *)placeholder floatingTitle:(NSString *)floatingTitle;
使用
- (JVFloatLabeledTextField *)idNumberTextField {
if (!_idNumberTextField) {
_idNumberTextField = [[JVFloatLabeledTextField alloc] initWithFrame:CGRectZero];
_idNumberTextField.font = FONT_THEME;
// 浮動式標(biāo)簽的正常字體顏色
_idNumberTextField.floatingLabelTextColor = COLOR_THEME;
// 輸入框成為第一響應(yīng)者時,浮動標(biāo)簽的文字顏色.
_idNumberTextField.floatingLabelActiveTextColor = [UIColor blueColor];
// 指明當(dāng)輸入文字時,是否下調(diào)基準(zhǔn)線(baseline).設(shè)置為YES(非默認(rèn)值),意味著占位內(nèi)容會和輸入內(nèi)容對齊.
_idNumberTextField.keepBaseline = YES;
// 設(shè)置占位符文字和浮動式標(biāo)簽的文字.
[_idNumberTextField setPlaceholder:@"請輸入身份證號碼"
floatingTitle:@"身份證號碼"];
_idNumberTextField.clearButtonMode = UITextFieldViewModeWhileEditing;
_idNumberTextField.delegate = self;
}
return _idNumberTextField;
}
XIB問題
在Xcode 8 環(huán)境下使用 Cocoapods 導(dǎo)入該框架，使用xib文件創(chuàng)建TextField就會報(bào)錯：
IB Designables: Failed to update auto layout status: Failed to load designables from path (null)
IB Designables: Failed to render instance of TTTAttributedLabel: Failed to load designables from path (null)
- 參考TTTAttributedLabel的文檔埃叭，如果想要用 xib 方式創(chuàng)建TextField摸恍，就不能用Cocoapods 將其作為靜態(tài)庫導(dǎo)入項(xiàng)目中，解決方式是：下載源碼后手動拖進(jìn)工程里使用赤屋。
