个人签名
这两天撸了一个关于日记的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指的是行间距，也就是文字与上下线距离之和（我这么理解的）
有了清晰的坐标，我们就可以清楚的计算出该划线的位置。
