[iOS][Android] テキストフィールドに入力可能文字数を設定する

文字数制限

UI コンポーネントのひとつである テキストフィールド。
ここではユーザーが文字列を入力することができます。
通常、このテキストフィールドに入力できる文字数の制限はありませんが、最大文字数を指定してそれより多い文字数の入力を禁止することができます。

今回は iOS と Android においての テキストフィールド である UITextField と EditText について、入力できる文字数を設定する方法をご紹介します。

iOS

iOS でテキストフィールドを表現するには UITextField クラスを利用します。

入力文字数を制御するためには UITextFieldDelegate プロトコルの - textField:shouldChangeCharactersInRange:replacementString: メソッドを実装します。
このメソッドはテキストが変更される直前に呼ばれ、YES を返せばテキストの変更を許可し、NO を返せば変更を禁止します。

サンプルコード

- (BOOL)textField:(UITextField *)textField
shouldChangeCharactersInRange:(NSRange)range
replacementString:(NSString *)string
{
    // 入力前の文字列
    NSMutableString *str = [textField.text mutableCopy];

    // 入力後の文字列
    [str replaceCharactersInRange:range withString:string];

    // 最大入力可能文字数
    NSInteger maxTextLength = 5;

    return (str.length <= maxTextLength);
}

このデリゲートメソッドはあくまで テキストの変更を許可するか否か を決めるものです。
サンプルコードではメソッド内で UI 上の文字列更新は行っていません。
やっていることは、文字が入力された場合の文字数を計算して、それが最大入力可能文字数を超えていなければテキストの変更を許可するというものです。

Android

Android でテキストフィールドを表現するには EditText クラスを利用します。

入力文字数を制御するためには layout の xml ファイルで maxLength を指定するだけです。
簡単ですね！

サンプルコード

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="text"
    android:maxLength="20"  // <- 最大入力可能文字数
    />

また、コードで設定する場合は以下のようにします。

// 最大入力可能文字数
int maxTextLength = 20;

InputFilter.LengthFilter lengthFilter = new InputFilter.LengthFilter(maxTextLength);
mEditText.setFilters(new InputFilter[]{lengthFilter});

この場合は setFilters というメソッドを利用します。
ここでテキスト長に関する入力フィルターを指定することで最大入力可能文字数を設定できます。

setFilters は EditText の継承元である TextView が持つメソッドで、入力フィルターのリストを指定することができます。
バッファが Editable インタフェースを実装している場合は効果が適用され、実装していない場合は何も起きません。

InputFilter インターフェースは Editable インタフェースを実装している要素に対して制約をつけることができるメソッドを提供します。
LengthFilter の他に AllCaps というクラスも存在し、小文字を全て大文字にする という制約をつけることも可能です。

以上です。
iOS, Android 共にこれだけのコードでお手軽に実現できるので、制御をかけたい場合は試してみてください。

リンク

• UITextViewDelegate Protocol Reference
• InputFilter | Android Developers

ミレニアム・ファルコン製作日記 #29

29 号 表紙

パーツ

成果

今回の作業は以下の 1 つでした。

• 砲塔リングを取り付ける

これまで組み立てた船体下部フレームの中央に砲塔リングを設置しました。
これによってフレーム全体がかなり安定した気がします。

ミレニアム・ファルコンの船体下部中央には上部と同様に 4 連レーザー砲がついています。
エピソード 7 で敵の攻撃を受けたレーザー砲が操作不能になった時に、レイが船体を反転させてフィンがタイ・ファイターを撃ちぬくシーンはカッコ良かったです。
（もうエピソード 7 のネタバレ書いてもいいですよね）

エピソード 8 でもミレニアム・ファルコンの活躍に期待しています！

それではまた次回。

May the Force be with you!