JVFloatLabeledTextField

                            ?????? 

以下內(nèi)容來源于官方源碼统捶、 README 文檔榆芦、測試 Demo或個人使用總結(jié) !

JVFloatLabeledTextField 是已經(jīng)被稱為“浮動標(biāo)簽?zāi)J健钡腢X模式的第一實(shí)現(xiàn)喘鸟。

由于移動設(shè)備的空間限制匆绣,通常只依靠占位符作為標(biāo)記字段的手段。 這就會產(chǎn)生UX問題迷守,因?yàn)橐坏┯脩糸_始填寫表單犬绒,就不會出現(xiàn)占位符標(biāo)簽旺入。

這個包含 UITextFieldUITextView 子類的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)工程里使用赤屋。

參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末误墓,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子益缎,更是在濱河造成了極大的恐慌谜慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件莺奔,死亡現(xiàn)場離奇詭異欣范,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)令哟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門恼琼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人屏富,你說我怎么就攤上這事晴竞。” “怎么了狠半?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵噩死,是天一觀的道長颤难。 經(jīng)常有香客問我,道長已维,這世上最難降的妖魔是什么行嗤? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮垛耳,結(jié)果婚禮上栅屏,老公的妹妹穿的比我還像新娘。我一直安慰自己堂鲜,他們只是感情好栈雳,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著缔莲,像睡著了一般甫恩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上酌予,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天磺箕,我揣著相機(jī)與錄音,去河邊找鬼抛虫。 笑死松靡,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的建椰。 我是一名探鬼主播雕欺,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼棉姐!你這毒婦竟也來了屠列?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤伞矩,失蹤者是張志新(化名)和其女友劉穎笛洛,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乃坤,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡苛让,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了湿诊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片狱杰。...
    茶點(diǎn)故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖厅须,靈堂內(nèi)的尸體忽然破棺而出仿畸,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布错沽,位于F島的核電站簿晓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏甥捺。R本人自食惡果不足惜抢蚀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一镀层、第九天 我趴在偏房一處隱蔽的房頂上張望镰禾。 院中可真熱鬧,春花似錦唱逢、人聲如沸吴侦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽备韧。三九已至,卻和暖如春痪枫,著一層夾襖步出監(jiān)牢的瞬間织堂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工奶陈, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留易阳,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓吃粒,卻偏偏與公主長得像潦俺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子徐勃,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容