自定义EditText实现日记本效果，最详细的自定义讲解

个人签名

这两天撸了一个关于日记的demo，今天准备把里面的知识点给整理一下。在整理的过程中，我发现一个类似于笔记本输入效果，今天就研究你了，不看不知道，一看还真有点蒙圈，里面获取view的各种属性，具体指的是哪个？我相信也有不少人搞不太清楚。这个玩意着实让我花了半天时间，最后还是都搞明白了，在这里我会以图片标注的形式告诉大家，具体是哪一部分，让你下次不会再迷糊。

效果图

效果图

看到这个效果，各位大神应该也知道这是自定义view吧！没错，这就是自定义EditText。

使用场景

• 这个效果应用于类似于记事本的页面中，的确看起来有种耳目一新的感觉

涉及知识点

• 自定义view中的onDraw（）
• view各种坐标的获取
• 绘画时的计算

代码展示

代码其实很简单，就一个自定义EditText和一个布局

LinedEditText.java

package com.example.developerhaoz.sleephelper.diary.widget;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.PathEffect;
import android.os.Build;
import android.util.AttributeSet;

/**
 * 自定义EditText实现笔记本效果
 */

public class LinedEditText extends android.support.v7.widget.AppCompatEditText{
    public LinedEditText(Context context) {
        super(context);
        initPaint();
    }

    public LinedEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public LinedEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initPaint();
    }

    private void initPaint() {

    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onDraw(Canvas canvas) {
        //设置画笔
        Paint mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);//描边
        mPaint.setColor(Color.LTGRAY);//画笔颜色
        /*
        * PathEffect有6个子类：
        * CornerPathEffect(float radius)：给path加一些圆角，只有一个构造方法，radius代表圆角半径
        * DashPathEffect(float[] intervals,float phase):实现一个虚实线的效果，intervals就是虚线效果中实线和间隔的长度数组，intervals数组长度至少为2；phase指虚线相位，动态改变它，可是实现虚线移动效果
        * DiscretePathEffect(float segmentLength,float deviation):实现path边界藤蔓丛生的效果；path会被分成长度为segmentLength的碎片，然后在每个碎片上会随机产生以deviation为基数的偏离，这样藤蔓效果就产生了
        * PathDashPathEffect(Path shape,float advance,float phase,Style style):讲path的边界用一下小path首尾相连展现出来；shape就是用来组成path的小图形，advance是shape之间的距离；phase是相位，用来实现path移动的效果
        * ComposePathEffect和SumPathEffect都是讲两个PathEffect组合起来，达到一种组合效果；只不过ComposePahtEffect是两种效果组合起来，而SumPathEffect是将梁红在那个效果叠加起来
        * 值得注意的是，PathEffect虽然名字叫Path的Effect,但它的效果不仅仅局限在path，而是作用paint绘制的所有内容，包括文字
        * 更多详情，自行百度,效果见下图。
        * */
        PathEffect effects = new DashPathEffect(new float[]{5, 5, 5, 5}, 5);
        mPaint.setPathEffect(effects);

        /* 视图的left ， top ， right ， bottom 的值是针对其父视图的相对位置，所有属性均在下图标出*/
        int left = getLeft();//子View左边距离父view原点的距离
        int right = getRight();//子View右边距离父view原点的距离
        int paddingTop = getPaddingTop();//view的内容到view上面的距离
        int paddingBottom = getPaddingBottom();//view的内容到view下面的距离  30
        int paddingLeft = getPaddingLeft();//view的内容到view左边的距离  60
        int paddingRight = getPaddingRight();//右边留白  60
        int height = getHeight();//view高度 996
        int lineHeight = getLineHeight();//返回一行的高度。注意标记内的文本可能高于或低于这个高度，布局可能包含额外的第一行或最后一行填充的部分。我们只是获取一行文字的高度，不计算间距。 74
        int spcingHeight = (int) getLineSpacingExtra();//获取行距，就是每行文字距离上下横线的距离  15

        int count = (height - paddingTop - paddingBottom) / lineHeight;//横线条数  12

        for (int i = 0; i < count; i++) {
            int baseline = lineHeight * (i + 1) + paddingTop - spcingHeight / 2;//得到第一行线，距离view上面的高度 97  171
            canvas.drawLine(paddingLeft, (int) (baseline * 1.0), right - paddingRight * (int) 1.0, (int) (baseline * 1.0), mPaint);//划线
        }
        super.onDraw(canvas);

    }
}

activity_add_diary.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <include layout="@layout/layout_app_toolbar"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:paddingLeft="20dp"
        android:paddingTop="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingRight="20dp">

            <com.example.developerhaoz.sleephelper.diary.widget.LinedEditText
                android:id="@+id/add_diary_et_content"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/shape_add_diary_title"
                android:enabled="true"
                android:gravity="top"
                android:lineSpacingExtra="5dp"
                android:maxLines="10"
                android:minLines="8"
                android:hint="大家好，我是码客Yang。很高兴认识各位大神。"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                android:scrollbars="vertical"
                android:textSize="17sp"/>

        </LinearLayout>

    </RelativeLayout>
</LinearLayout>

效果展示

在onDraw（）方法中我们提到了PathEffect的六个子类分别可以画出不同的效果，下面我把各自效果图给大家展示一下

没做处理，显示生硬 CornerPathEffect效果，圆滑了不少 DiscretePathEffect效果，类似于藤蔓状 DiscretePathEffect效果，把杂点密度设置大一点，比上图有柔和了一点 DashPathEffect效果，虚实线结合，我们应用的就是这个效果 动态改变偏移量，可以实现动画效果

PathDashPathEffect和DashPathEffect是类似的，不同的是PathDashPathEffect可以让我们自己定义路径虚线的样式，比如我们将其换成一个个小圆组成的虚线

PathDashPathEffect效果，跟上图有点类似

ComposePathEffect和SumPathEffect都可以用来组合两种路径效果，就是把两种效果二合一。唯一不同的是组合的方式：

• ComposePathEffect(PathEffect outerpe, PathEffect innerpe)会先将路径变成innerpe的效果，再去复合outerpe的路径效果，即：outerpe(innerpe(Path))；

• SumPathEffect(PathEffect first, PathEffect second)则会把两种路径效果加起来再作用于路径。

view属性标注（今天的主要劳动成果）

这里我把图片放大，方便标出具体位置。

所有属性标注

其中，

• getHeight、getWidth指的是view的高和宽，这里就没标注了
• getRight、getLeft、getTop、getBottom指的是子view的四个边相对于父view左上角的距离
• getPaddingLeft、getPaddingRight、getPaddingTop、getPaddingBottom分别指的是view的内容与view四边的距离
• getLineHeight指的是行高
• getLineSpacingExtra指的是行间距，也就是文字与上下线距离之和（我这么理解的）

有了清晰的坐标，我们就可以清楚的计算出该划线的位置。

总结：自定义控件是安卓开发中经常用到的，也是比较难深刻理解的内容，如果该文让你对自定义view有了更多的了解，不妨点赞加个关注，让我们互相学习，一起交流。