EditTextビューに罫線を引く

近頃、入力エリアに大学ノートのような横の罫線が引かれているアプリをときどき見かける。
入力エリアというのはアプリの大きな部分を占める割にデザイン性を持たせにくいが、罫線を引くことでシンプルながらもぐっと見栄えがよくなる。

EditTextをカスタマイズ

罫線を引くには、EditTextを継承した独自クラスを作り、onDraw()で罫線を引く処理を記述する。

行の高さはTextView#getLineHeight()メソッドで得ることができるので、ビューの高さを行の高さで割れば罫線の本数が計算できる。注意すべきなのは、パディングをちゃんと考慮することくらいか。

Canvas#drawLines()を使えば高速に複数の直線を描画できる。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.widget.EditText;

//-----------------------------------------------------------------------------
/**
 * 罫線付きのEditText
 */
//-----------------------------------------------------------------------------
public class LinedEditText extends EditText {
    public LinedEditText( Context context ) {
        super( context );
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // EditTextビューのレイアウト後の幅 
        int width = getMeasuredWidth();
        // EditTextビューのレイアウト後の高さ。パディングを考慮する必要がある。
        int height = getMeasuredHeight() - getExtendedPaddingTop() - getExtendedPaddingBottom();
        // パディングを考慮
        int paddingTop = getExtendedPaddingTop();
        // テキストの高さ
        int lineHeight = getLineHeight();
        // 有効な描画領域から行数を計算
        int textCount = height / lineHeight;
        // 入力された行数。画面の高さより大きくなることがある
        int lines = this.getLineCount();
        // 有効な行数と実際に入力された行数のうち、大きい方
        int lineCount = Math.max( textCount , lines );
        
        float[] points = new float[ lineCount << 2 ];
        
        // 複数の直線を一気に描画するので座標位置を計算
        for( int i = 0; i < lineCount; i++ ){
            points[ (i << 2) + 0 ] = 0;
            points[ (i << 2) + 1 ] = i * lineHeight + paddingTop;
            points[ (i << 2) + 2 ] = width; 
            points[ (i << 2) + 3 ] = i * lineHeight;
        }
        
        // 罫線色の設定
        Paint paint = getPaint();
        paint.setColor( getContext().getColor( R.color.linecolor ) );

        // 直線の描画
        canvas.drawLines( points, paint );
        
        // 親クラスの描画処理
        super.onDraw(canvas);
    }
}

罫線の色は、淡ーい灰色、たとえば#acacacとかにするのがよい。あまり濃くすると、小学生の書き取り帳みたいな感じになってカッコ悪くなっちゃうよ。

レイアウトXMLから利用する

ついでに、独自ビュークラスをレイアウトファイルに記述する方法も説明しておこう。
これは実に簡単で、完全修飾名のパッケージがそのままタグに書ける。

jp.dcrew.android.LinedEditTextというクラスだったとしたら、

といった具合だ。EditTextで指定できる属性もすべてそのまんま使える。

2012年3月2日