Android学习小Demo一个显示行线的自定义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" />

结束。