Android学习小Demo（11）一个显示行线的自定义EditText

今天在处理一个EditText的时候，想着把EditText做成像一本作业本上的纸一样，每一行都可以由线条隔开，具体效果如下：

1）最开始的思路

一开始的想法是很简单的，找出每一行的高度，然后一行一行地画线不就好了吗，代码如下：

    viewHeight = getMeasuredHeight();    viewWidth = getMeasuredWidth();    lineHeight = getLineHeight();    int maxLines = viewHeight / lineHeight + 1;    int i = 0;    int currentLineHeight = 0;while(i < maxLines){currentLineHeight += lineHeight;canvas.drawLine(0, currentLineHeight, viewWidth, currentLineHeight, mPaint);i++;}

但是出来的效果一看，高度很明显不够，如下：

看起来好像是高度的问题，那就每一行的高度都加一点呗，再试试：

lineHeight = getLineHeight() + 5;

再来看一下效果，

前面几行好像效果不错呀，但是到后面又挤在一起了，我估计这里面的原因应该是getLineHeight返回来的值不是标准的，而是随着内容的变化而不同，看一下它的函数说明，如下：

    /**     * @return the height of one standard line in pixels.  Note that markup     * within the text can cause individual lines to be taller or shorter     * than this height, and the layout may contain additional first-     * or last-line padding.     */    public int getLineHeight() {        return FastMath.round(mTextPaint.getFontMetricsInt(null) * mSpacingMult + mSpacingAdd);    }

果然是这样，那么通过这个getLineHeight来表示每一行的高度就不可行了。

在android提供的sample里面，有一个是NotePad的小demo，在里面它实现了为EditText里面的每一行添加一条下划线，其代码如下：

    public static class LinedEditText extends EditText {       ...             @Override        protected void onDraw(Canvas canvas) {            int count = getLineCount();            Rect r = mRect;            Paint paint = mPaint;            for (int i = 0; i < count; i++) {                int baseline = getLineBounds(i, r);                canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);            }            super.onDraw(canvas);        }    }

好，我们就用它这个来试试，看效果

不错哦！但是发现一个问题，后面没有字符的它就不划线了，这是因为它划线的基础在于getLineCount这个函数，定义如下：

    /**     * Return the number of lines of text, or 0 if the internal Layout has not     * been built.     */    public int getLineCount() {        return mLayout != null ? mLayout.getLineCount() : 0;    }

就是说，它返回来的值是跟内容有关的的，而getLineBounds的取值则是基于getLineCount的，定义如下（看第一句注释）：

    /**     * Return the baseline for the specified line (0...getLineCount() - 1)     * If bounds is not null, return the top, left, right, bottom extents     * of the specified line in it. If the internal Layout has not been built,     * return 0 and set bounds to (0, 0, 0, 0)     * @param line which line to examine (0..getLineCount() - 1)     * @param bounds Optional. If not null, it returns the extent of the line     * @return the Y-coordinate of the baseline     */    public int getLineBounds(int line, Rect bounds)

所以，只有有内容的行才会画下划线，可是我们的目标是没有内容也想划一条线，如何是好呢？

我的想法一样很简单，在屏幕上显示的线条其实是有限的，那么就分成两部分，前面一部分是有内容的，就拿上面NotePad这种办法画，如果线条的数目已填满这个区域了（其实是达到预先定义的最大数目了），则不必自己再去画，反之，如果还差几样没有画，那么就根据前面已经画出来的平均高度，把剩下的几条线也给画上，因为当输入内容的时候，EditText其实是一直在刷新的，所以自然而然，新添加的内容的线条也是应用上面NotePad那种方法来画的，所以画出来的线也是符合要求的。这个自定义EditText的完整代码如下：

package com.lms.todo.views;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.widget.EditText;/** * @author Linmiansheng */public class CustomEditText extends EditText {//private static final String TAG = "com.lms.todo.views.CustomEditText";private Rect mRect;    private Paint mPaint;        private final int padding = 10;        private int lineHeight;    private int viewHeight,viewWidth;    public CustomEditText(Context context) {        this(context, null);    }    public CustomEditText(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomEditText(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        init(context, attrs);    }    private void init(Context context, AttributeSet attrs) {        mRect = new Rect();        mPaint = new Paint();        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setColor(Color.BLACK);        mPaint.setAntiAlias(true);                setFocusable(true);        setFocusableInTouchMode(true);            }    @Override    protected void onDraw(Canvas canvas) {    int count = getLineCount();        Rect r = mRect;                 Paint paint = mPaint;        int lineHeight = 0;        int i = 0;        while (i < count) {lineHeight = getLineBounds(i, r);canvas.drawLine(r.left, lineHeight + padding, r.right, lineHeight + padding,paint);i++;}int maxLines = 15;int avgHeight = lineHeight / count;int currentLineHeight = lineHeight;while(i < maxLines){currentLineHeight = currentLineHeight + avgHeight + padding;canvas.drawLine(r.left, currentLineHeight, r.right, currentLineHeight, paint);i++;}        super.onDraw(canvas);          }}

不过有一点要注意的就是，这个padding的设置，也就是每一行的高度，其实跟我们在应用的时候设置的字体大小也是有一定的关系的，所以，真正应用的话，可能要去调一下。

在xml布局中的使用如下：

    <com.lms.todo.views.CustomEditText        android:id="@+id/etContent"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:layout_weight="8"        android:background="#00000000"        android:gravity="top"        android:inputType="textMultiLine"        android:padding="5dip"        android:textSize="20sp" />

结束。