[iOS][Swift3.0] テキスト入力時のエフェクトが美しいTextFieldEffects

2016.12.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

サインイン画面や登録画面などアプリから文字を入力するケースは多々あります。
今回はテキスト入力時に使われるUITextFieldsをカスタマイズして素敵なエフェクトが追加されたTextFieldEffectsを試してみました。ライセンスはMITです。

https://github.com/raulriera/TextFieldEffects

このTextFieldEffectsですが、何よりまず目を引くのがその名称です。

  • Kaede
  • Hoshi
  • Jiro
  • Isao
  • Minoru
  • Yoko
  • Madoka
  • Akira
  • Yoshiko

README.mdを見るとこちらを気に入ってSwift版を作成したとあったので、元々の名称が日本人名?だった様です。

検証環境

今回は下記環境で試しています。

Xcode 8.2
Swift 3.0.2
CocoaPods 1.0.0

準備

導入

CocoaPodsで追加します。

use_frameworks!
target "ターゲット名"
pod 'TextFieldEffects'

post_install do |installer|
    installer.pods_project.targets.each do |target|
target.build_configurations.each do |configuration|
    configuration.build_settings['SWIFT_VERSION'] = "3.0"
end
    end
end

storyboardから利用する

TextFieldEffectsでは(現時点で)9種類のエフェクトがあります。
どのエフェクトタイプを使うにしても基本的に使い方は一緒です。

1.UITextFieldを置く

storyboard上にUITextFieldを配置します。

01.UITextFieldを置く

2.制約をつける

適宜、制約を設定します。
ここでポイントなのは、高さを指定することです。エフェクトによって差異はありますが40程度を設定すると良いかもしれません。

02_制約をつける

3.カスタムクラスを設定する

カスタムクラスを設定します。Classには使いたいエフェクトを設定します。(下の画像ではKaedeTextFieldを設定しています)
また、ModuleにはTextFieldEffectsを設定しましょう。

03.classを設定する

4.borderStyleを設定

borderStyleは無しにしましょう。

04.borderStyleを設定

5.ClipToBoundsのチェックを外す

表示が切れてしまうなどする場合はClipToBoundsのチェックを外します。(チェックをつけたままでも表示上問題が無いようでしたらそのままでもかまいません)

05.ClipToBoundsのチェックを外す

6.Placeholderの入力

TextFieldEffectsで重要なのはPlaceholderの入力です。項目名などを必要に応じで入力します。

06.Placeholderの設定

これで共通する設定は終わりです。次から各エフェクト別にプロパティを設定しましょう。

7.エフェクト別にプロパティを設定する

KaedeTextField

kaede

プロパティ名 備考
placeholderColor UIColor
foregroundColor UIColor
placeholderFontScale CGFloat デフォルトは0.8
フォントの大きさに問題が無ければ設定しなくてOK
backgroundColor UIColor 標準のプロパティ
設定した方が良さそう

HoshiTextField

hoshi1

hoshi2

プロパティ名 備考
borderInactiveColor UIColor
borderActiveColor UIColor
placeholderColor UIColor デフォルトは黒(.black)
placeholderFontScale CGFloat デフォルトは0.65
フォントの大きさに問題が無ければ設定しなくてOK

JiroTextField

jiro

プロパティ名 備考
borderColor UIColor
placeholderColor UIColor
placeholderFontScale CGFloat デフォルトは0.65
フォントの大きさに問題が無ければ設定しなくてOK

IsaoTextField

isao1

isao2

プロパティ名 備考
inactiveColor UIColor
activeColor UIColor
placeholderFontScale CGFloat デフォルトは0.65
フォントの大きさに問題が無ければ設定しなくてOK

MinoruTextField

minoru

プロパティ名 備考
placeholderColor UIColor
placeholderFontScale CGFloat デフォルトは0.65
フォントの大きさに問題が無ければ設定しなくてOK
Color UIColor 標準のプロパティ
入力文字の色、枠の色にもなる
backgroundColor UIColor 標準のプロパティ
設定した方が良さそう

YokoTextField

yoko

プロパティ名 備考
placeholderColor UIColor
foregroundColor UIColor デフォルトは黒(.black)
placeholderFontScale CGFloat デフォルトは0.7
フォントの大きさに問題が無ければ設定しなくてOK

MadokaTextField

madoka

プロパティ名 備考
placeholderColor UIColor デフォルトは黒(.black)
borderColor UIColor
placeholderFontScale CGFloat デフォルトは0.65
フォントの大きさに問題が無ければ設定しなくてOK

AkiraTextField

akira

プロパティ名 備考
placeholderColor UIColor デフォルトは黒(.black)
borderColor UIColor
placeholderFontScale CGFloat デフォルトは0.7
フォントの大きさに問題が無ければ設定しなくてOK

YoshikoTextField

yoshihiko1

yoshihiko2

プロパティ名 備考
activeBorderColor UIColor デフォルトは透明(.clear)
inactiveBorderColor UIColor デフォルトは透明(.clear)
activeBackgroundColor UIColor デフォルトは透明(.clear)
placeholderColor UIColor デフォルトはダークグレー(.darkGray)
borderSize CGFloat デフォルトは2.0
placeholderFontScale CGFloat デフォルトは0.7
フォントの大きさに問題が無ければ設定しなくてOK

実行イメージ

シミュレーターで実行してみました。

preview

さいごに

エフェクトのサンプルはGithubのREADME.mdにアニメーションGIFが載っているので、それを確認すると良いと思います。
また、元になったHTML版のTextInputEffectsも素晴らしいので、こちらもぜひチェックしてみてください。

HTML版 TextInputEffects