一:TextView的onDraw()方法:
1.第一句restartMarqueeIfNeeded()绘制字幕滚动。
protected void onDraw(Canvas canvas) {
restartMarqueeIfNeeded(); // Draw the background for this view
super.onDraw(canvas);
...
}
首先我们看一个东西:
android.text.TextUtils.java
public enum TruncateAt {
START,
MIDDLE,
END,
MARQUEE,
/**
* @hide
*/
END_SMALL
}
很熟悉对不对,这就是平常在TextView的android:ellipsize属性,当字符显示不下的时候省略号所在的位置,有开始/结束/中间/滚动四个枚举值。每次onDraw的时候都检测是否需要滚动字幕,重新滚幕的条件就是android:ellipsize属性是MARQUEE(也就是滚动字幕)和mRestartMarquee 布尔值。
private void restartMarqueeIfNeeded() {
if (mRestartMarquee && mEllipsize == TextUtils.TruncateAt.MARQUEE) {
mRestartMarquee = false;
startMarquee();
}
}
关于这部分就讲这么多,知道这个是滚动字幕的就行了,若对滚幕感兴趣自行研究canMarquee()/startMarquee()/stopMarquee()/startStopMarquee(boolean start)/Marquee类。
2.compoundDrawable的绘制,也就是drawableTop/Bottom/Left/Right属性。
// Draw the background for this view
super.onDraw(canvas); final int compoundPaddingLeft = getCompoundPaddingLeft();
final int compoundPaddingTop = getCompoundPaddingTop();
final int compoundPaddingRight = getCompoundPaddingRight();
final int compoundPaddingBottom = getCompoundPaddingBottom();
....
final Drawables dr = mDrawables;
if (dr != null) {
/*
* Compound, not extended, because the icon is not clipped
* if the text height is smaller.
*/ int vspace = bottom - top - compoundPaddingBottom - compoundPaddingTop;
int hspace = right - left - compoundPaddingRight - compoundPaddingLeft; // IMPORTANT: The coordinates computed are also used in invalidateDrawable()
// Make sure to update invalidateDrawable() when changing this code.
if (dr.mShowing[Drawables.LEFT] != null) {
canvas.save();
canvas.translate(scrollX + mPaddingLeft + leftOffset,
scrollY + compoundPaddingTop +
(vspace - dr.mDrawableHeightLeft) / 2);
dr.mShowing[Drawables.LEFT].draw(canvas);
canvas.restore();
} // IMPORTANT: The coordinates computed are also used in invalidateDrawable()
// Make sure to update invalidateDrawable() when changing this code.
if (dr.mShowing[Drawables.RIGHT] != null) {
canvas.save();
canvas.translate(scrollX + right - left - mPaddingRight
- dr.mDrawableSizeRight - rightOffset,
scrollY + compoundPaddingTop + (vspace - dr.mDrawableHeightRight) / 2);
dr.mShowing[Drawables.RIGHT].draw(canvas);
canvas.restore();
} // IMPORTANT: The coordinates computed are also used in invalidateDrawable()
// Make sure to update invalidateDrawable() when changing this code.
if (dr.mShowing[Drawables.TOP] != null) {
canvas.save();
canvas.translate(scrollX + compoundPaddingLeft +
(hspace - dr.mDrawableWidthTop) / 2, scrollY + mPaddingTop);
dr.mShowing[Drawables.TOP].draw(canvas);
canvas.restore();
} // IMPORTANT: The coordinates computed are also used in invalidateDrawable()
// Make sure to update invalidateDrawable() when changing this code.
if (dr.mShowing[Drawables.BOTTOM] != null) {
canvas.save();
canvas.translate(scrollX + compoundPaddingLeft +
(hspace - dr.mDrawableWidthBottom) / 2,
scrollY + bottom - top - mPaddingBottom - dr.mDrawableSizeBottom);
dr.mShowing[Drawables.BOTTOM].draw(canvas);
canvas.restore();
}
}
Drawables是TextView下的静态类,持有着mShowing(drawable数组)上下左右四个drawable,这四个drawable绘制在不同的位置。 3.TextPaint和Layout,其实还有mEditor,也就是可编辑状态下的情况(EditText)。这部分先初始化画笔TextPaint,Cavans画布,最重要的就是Layout,由它负责文字绘制。
Path highlight = getUpdatedHighlightPath();
if (mEditor != null) {
mEditor.onDraw(canvas, layout, highlight, mHighlightPaint, cursorOffsetVertical);
} else {
layout.draw(canvas, highlight, mHighlightPaint, cursorOffsetVertical);
}
二:Layout类
Layout是android.text下的一个抽象类,负责文字布局绘画,它有两个子类分别是DynamicLayout和StaticLayout,前者是可编辑状态下的(EditText),后者是静态的。
/**
* Draw this Layout on the specified Canvas.
绘制在指定的画布
*/
public void draw(Canvas c) {
draw(c, null, null, 0);
} /**
* Draw this Layout on the specified canvas, with the highlight path drawn
* between the background and the text.
在背景和文字之间绘制高亮
*
* @param canvas the canvas
* @param highlight the path of the highlight or cursor; can be null
* @param highlightPaint the paint for the highlight
* @param cursorOffsetVertical the amount to temporarily translate the
* canvas while rendering the highlight
*/
public void draw(Canvas canvas, Path highlight, Paint highlightPaint,
int cursorOffsetVertical) {
final long lineRange = getLineRangeForDraw(canvas);//获取需要绘制的区间行
int firstLine = TextUtils.unpackRangeStartFromLong(lineRange);//第一行
int lastLine = TextUtils.unpackRangeEndFromLong(lineRange);//最后一行
if (lastLine < 0) return; drawBackground(canvas, highlight, highlightPaint, cursorOffsetVertical,
firstLine, lastLine);
drawText(canvas, firstLine, lastLine);
}
1.先看画背景:
public void drawBackground(Canvas canvas, Path highlight, Paint highlightPaint,
int cursorOffsetVertical, int firstLine, int lastLine) {
// First, draw LineBackgroundSpans.//首先,绘制LineBackgroundSpans(不是View的Backgrond哦)
// LineBackgroundSpans know nothing about the alignment, margins, or?/它不需要自动对齐方式,间距或方向
// direction of the layout or line. XXX: Should they?//xxx:需要吗?
// They are evaluated at each line.//将会应用在每一行。
if (mSpannedText) {//SpannedText才能设置Span
if (mLineBackgroundSpans == null) {
mLineBackgroundSpans = new SpanSet<LineBackgroundSpan>(LineBackgroundSpan.class);
} Spanned buffer = (Spanned) mText;
int textLength = buffer.length();
mLineBackgroundSpans.init(buffer, 0, textLength); if (mLineBackgroundSpans.numberOfSpans > 0) {//行背景span数量
int previousLineBottom = getLineTop(firstLine);//记录上一行的top
int previousLineEnd = getLineStart(firstLine);//记录上一行的end
ParagraphStyle[] spans = NO_PARA_SPANS;//段落样式
int spansLength = 0;
TextPaint paint = mPaint;
int spanEnd = 0;
final int width = mWidth;
for (int i = firstLine; i <= lastLine; i++) {//遍历每行
int start = previousLineEnd;
int end = getLineStart(i + 1);//下一行的end
previousLineEnd = end; int ltop = previousLineBottom;
int lbottom = getLineTop(i + 1);//获取下一行的top,也就是本行的bottom
previousLineBottom = lbottom;
int lbaseline = lbottom - getLineDescent(i); if (start >= spanEnd) {
// These should be infrequent, so we'll use this so that
// we don't have to check as often.
spanEnd = mLineBackgroundSpans.getNextTransition(start, textLength);
// All LineBackgroundSpans on a line contribute to its background.
spansLength = 0;
// Duplication of the logic of getParagraphSpans
if (start != end || start == 0) {
// Equivalent to a getSpans(start, end), but filling the 'spans' local
// array instead to reduce memory allocation
for (int j = 0; j < mLineBackgroundSpans.numberOfSpans; j++) {//如果设置了多个LineBackgroundSpan将一一画上
// equal test is valid since both intervals are not empty by
// construction
if (mLineBackgroundSpans.spanStarts[j] >= end ||
mLineBackgroundSpans.spanEnds[j] <= start) continue;
spans = GrowingArrayUtils.append(
spans, spansLength, mLineBackgroundSpans.spans[j]);
spansLength++;
}
}
} for (int n = 0; n < spansLength; n++) {//所有的行数和行背景(line.number*span.number)
LineBackgroundSpan lineBackgroundSpan = (LineBackgroundSpan) spans[n];
lineBackgroundSpan.drawBackground(canvas, paint, 0, width,
ltop, lbaseline, lbottom,
buffer, start, end, i);
}
}
}
mLineBackgroundSpans.recycle();//SpanSet回收
} // There can be a highlight even without spans if we are drawing
// a non-spanned transformation of a spanned editing buffer.
if (highlight != null) {//绘制hightlight路径(比如光标)
if (cursorOffsetVertical != 0) canvas.translate(0, cursorOffsetVertical);
canvas.drawPath(highlight, highlightPaint);
if (cursorOffsetVertical != 0) canvas.translate(0, -cursorOffsetVertical);
}
}
至于lineBottom和linrEnd是由子类(DynamicLayout和StaticLayout)的getLineTop和getLineStart方法获取的,很复杂很复杂。
2.画字drawText:
public void drawText(Canvas canvas, int firstLine, int lastLine) {
int previousLineBottom = getLineTop(firstLine);
int previousLineEnd = getLineStart(firstLine);
ParagraphStyle[] spans = NO_PARA_SPANS;
int spanEnd = 0;
TextPaint paint = mPaint;
CharSequence buf = mText; Alignment paraAlign = mAlignment;
TabStops tabStops = null;
boolean tabStopsIsInitialized = false; TextLine tl = TextLine.obtain(); // Draw the lines, one at a time.
// The baseline is the top of the following line minus the current line's descent.
for (int lineNum = firstLine; lineNum <= lastLine; lineNum++) {//遍历每行
int start = previousLineEnd;//开始
previousLineEnd = getLineStart(lineNum + 1);//记录end
int end = getLineVisibleEnd(lineNum, start, previousLineEnd);//结束 int ltop = previousLineBottom;//行top
int lbottom = getLineTop(lineNum + 1);//行bottom,也就是下一行的top
previousLineBottom = lbottom;//记录行Bottom
int lbaseline = lbottom - getLineDescent(lineNum);//行基线,bottom-descent int dir = getParagraphDirection(lineNum);//段乱排版方向
int left = 0;
int right = mWidth;
//一:画LeadingMargin
if (mSpannedText) {//是spannedText
Spanned sp = (Spanned) buf;//text
int textLength = buf.length();
boolean isFirstParaLine = (start == 0 || buf.charAt(start - 1) == '\n');//段落第一行 // New batch of paragraph styles, collect into spans array.
// Compute the alignment, last alignment style wins.
// Reset tabStops, we'll rebuild if we encounter a line with
// tabs.
// We expect paragraph spans to be relatively infrequent, use
// spanEnd so that we can check less frequently. Since
// paragraph styles ought to apply to entire paragraphs, we can
// just collect the ones present at the start of the paragraph.
// If spanEnd is before the end of the paragraph, that's not
// our problem.
if (start >= spanEnd && (lineNum == firstLine || isFirstParaLine)) {
spanEnd = sp.nextSpanTransition(start, textLength,
ParagraphStyle.class);
spans = getParagraphSpans(sp, start, spanEnd, ParagraphStyle.class);//获取段落样式 paraAlign = mAlignment;//段落对齐方式
for (int n = spans.length - 1; n >= 0; n--) {
if (spans[n] instanceof AlignmentSpan) {
paraAlign = ((AlignmentSpan) spans[n]).getAlignment();
break;
}
} tabStopsIsInitialized = false;
}
//画出LeadingMarginSpan
// Draw all leading margin spans. Adjust left or right according
// to the paragraph direction of the line.
final int length = spans.length;
boolean useFirstLineMargin = isFirstParaLine;
for (int n = 0; n < length; n++) {
if (spans[n] instanceof LeadingMarginSpan2) {
int count = ((LeadingMarginSpan2) spans[n]).getLeadingMarginLineCount();
int startLine = getLineForOffset(sp.getSpanStart(spans[n]));
// if there is more than one LeadingMarginSpan2, use
// the count that is greatest
if (lineNum < startLine + count) {
useFirstLineMargin = true;
break;
}
}
}
for (int n = 0; n < length; n++) {
if (spans[n] instanceof LeadingMarginSpan) {//LeadingMarginSpan
LeadingMarginSpan margin = (LeadingMarginSpan) spans[n];
if (dir == DIR_RIGHT_TO_LEFT) {//右往左
margin.drawLeadingMargin(canvas, paint, right, dir, ltop,
lbaseline, lbottom, buf,
start, end, isFirstParaLine, this);
right -= margin.getLeadingMargin(useFirstLineMargin);
} else {//正常阅读顺序
margin.drawLeadingMargin(canvas, paint, left, dir, ltop,
lbaseline, lbottom, buf,
start, end, isFirstParaLine, this);
left += margin.getLeadingMargin(useFirstLineMargin);
}
}
}
}
//二:Tab或Emoji
boolean hasTabOrEmoji = getLineContainsTab(lineNum);
// Can't tell if we have tabs for sure, currently
if (hasTabOrEmoji && !tabStopsIsInitialized) {
if (tabStops == null) {
tabStops = new TabStops(TAB_INCREMENT, spans);
} else {
tabStops.reset(TAB_INCREMENT, spans);
}
tabStopsIsInitialized = true;
} // Determine whether the line aligns to normal, opposite, or center.
//三:对齐方式
Alignment align = paraAlign;
if (align == Alignment.ALIGN_LEFT) {
align = (dir == DIR_LEFT_TO_RIGHT) ?
Alignment.ALIGN_NORMAL : Alignment.ALIGN_OPPOSITE;
} else if (align == Alignment.ALIGN_RIGHT) {
align = (dir == DIR_LEFT_TO_RIGHT) ?
Alignment.ALIGN_OPPOSITE : Alignment.ALIGN_NORMAL;
}
//四:获取x轴,然后写字。
int x;
if (align == Alignment.ALIGN_NORMAL) {
if (dir == DIR_LEFT_TO_RIGHT) {
x = left + getIndentAdjust(lineNum, Alignment.ALIGN_LEFT);
} else {
x = right + getIndentAdjust(lineNum, Alignment.ALIGN_RIGHT);
}
} else {
int max = (int)getLineExtent(lineNum, tabStops, false);
if (align == Alignment.ALIGN_OPPOSITE) {
if (dir == DIR_LEFT_TO_RIGHT) {
x = right - max + getIndentAdjust(lineNum, Alignment.ALIGN_RIGHT);
} else {
x = left - max + getIndentAdjust(lineNum, Alignment.ALIGN_LEFT);
}
} else { // Alignment.ALIGN_CENTER
max = max & ~1;
x = ((right + left - max) >> 1) +
getIndentAdjust(lineNum, Alignment.ALIGN_CENTER);
}
} paint.setHyphenEdit(getHyphen(lineNum));
Directions directions = getLineDirections(lineNum);
//阅读方式从左向右的,没有tab和emoji表情,非SpannedText,就是最原始最传统最简单画文字cavans.drawText
if (directions == DIRS_ALL_LEFT_TO_RIGHT && !mSpannedText && !hasTabOrEmoji) {
// XXX: assumes there's nothing additional to be done
canvas.drawText(buf, start, end, x, lbaseline, paint);
} else {//复杂的交给TextLine
tl.set(paint, buf, start, end, dir, directions, hasTabOrEmoji, tabStops);
tl.draw(canvas, x, ltop, lbaseline, lbottom);
}
paint.setHyphenEdit(0);
} TextLine.recycle(tl);
}
遍历每一行,主要是由四个流程:画LeadingMargin——>确认tab/emoji(TextLine来画)——>根据对齐方式确定从x轴哪个位置开始画(比如居左x就是0咯)——>
根据条件判断是交给cavans直接drawText还是TextLine来画字。
三:Canvas&TextLine
1.先看Canvas的drawText方法,就看方法doc。
/**
* Draw the specified range of text, specified by start/end, with its
* origin at (x,y), in the specified Paint. The origin is interpreted
* based on the Align setting in the Paint.
*
* @param text The text to be drawn
* @param start The index of the first character in text to draw
* @param end (end - 1) is the index of the last character in text
* to draw
* @param x The x-coordinate of origin for where to draw the text
* @param y The y-coordinate of origin for where to draw the text
* @param paint The paint used for the text (e.g. color, size, style)
*/
public void drawText(@NonNull CharSequence text, int start, int end, float x, float y,
@NonNull Paint paint)
这个注释说了三个点,一是画多少个字(start-end),二是从哪开始画,即原点(origin),这个有xy坐标轴来确定,基于对齐方式的设定,最后就是画笔paint。
说明一下,start和end是从text里面的所以区段,而原点的x轴跟对齐方式相关,y轴一般是baseline。
2.TextLine的draw流程:
void draw(Canvas c, float x, int top, int y, int bottom) {
//drawRun画字
if (!mHasTabs) {
if (mDirections == Layout.DIRS_ALL_LEFT_TO_RIGHT) {
drawRun(c, 0, mLen, false, x, top, y, bottom, false);
return;
}
if (mDirections == Layout.DIRS_ALL_RIGHT_TO_LEFT) {
drawRun(c, 0, mLen, true, x, top, y, bottom, false);
return;
}
}
//根据字符转成emoji位图
float h = 0;
int[] runs = mDirections.mDirections;
RectF emojiRect = null; int lastRunIndex = runs.length - 2;
for (int i = 0; i < runs.length; i += 2) {
...for (int j = mHasTabs ? runStart : runLimit; j <= runLimit; j++) {
int codept = 0;
Bitmap bm = null; ...
bm = Layout.EMOJI_FACTORY.getBitmapFromAndroidPua(codept);
...
emojiRect.set(x + h, y + bmAscent,
x + h + width, y);
c.drawBitmap(bm, null, emojiRect, mPaint);
...
}
}
}
}
转入drawRun方法
/**
* Draws a unidirectional (but possibly multi-styled) run of text.
*
*
* @param c the canvas to draw on
* @param start the line-relative start
* @param limit the line-relative limit
* @param runIsRtl true if the run is right-to-left
* @param x the position of the run that is closest to the leading margin
* @param top the top of the line
* @param y the baseline
* @param bottom the bottom of the line
* @param needWidth true if the width value is required.
* @return the signed width of the run, based on the paragraph direction.
* Only valid if needWidth is true.
*/
private float drawRun(Canvas c, int start,
int limit, boolean runIsRtl, float x, int top, int y, int bottom,
boolean needWidth)
而真正的方法还得往下走:
private float handleRun(int start, int measureLimit,
int limit, boolean runIsRtl, Canvas c, float x, int top, int y,
int bottom, FontMetricsInt fmi, boolean needWidth) { // Case of an empty line, make sure we update fmi according to mPaint
//空行,更新FontMetricsInt
if (start == measureLimit) {
TextPaint wp = mWorkPaint;
wp.set(mPaint);
if (fmi != null) {
expandMetricsFromPaint(fmi, wp);
}
return 0f;
}
//无mSpanned,直接handleText
if (mSpanned == null) {
TextPaint wp = mWorkPaint;
wp.set(mPaint);
final int mlimit = measureLimit;
return handleText(wp, start, mlimit, start, limit, runIsRtl, c, x, top,
y, bottom, fmi, needWidth || mlimit < measureLimit);
}
//初始化MetricAffectingSpan和CharacterStyleSpan
mMetricAffectingSpanSpanSet.init(mSpanned, mStart + start, mStart + limit);
mCharacterStyleSpanSet.init(mSpanned, mStart + start, mStart + limit); // Shaping needs to take into account context up to metric boundaries,
// but rendering needs to take into account character style boundaries.
// So we iterate through metric runs to get metric bounds,
// then within each metric run iterate through character style runs
// for the run bounds.
final float originalX = x;
for (int i = start, inext; i < measureLimit; i = inext) {
TextPaint wp = mWorkPaint;
wp.set(mPaint); inext = mMetricAffectingSpanSpanSet.getNextTransition(mStart + i, mStart + limit) -
mStart;
int mlimit = Math.min(inext, measureLimit); ReplacementSpan replacement = null;
//遍历MetrixAffectingSpan
for (int j = 0; j < mMetricAffectingSpanSpanSet.numberOfSpans; j++) {
// Both intervals [spanStarts..spanEnds] and [mStart + i..mStart + mlimit] are NOT
// empty by construction. This special case in getSpans() explains the >= & <= tests
if ((mMetricAffectingSpanSpanSet.spanStarts[j] >= mStart + mlimit) ||
(mMetricAffectingSpanSpanSet.spanEnds[j] <= mStart + i)) continue;
MetricAffectingSpan span = mMetricAffectingSpanSpanSet.spans[j];
if (span instanceof ReplacementSpan) {//ReplacementSpan特俗处理
replacement = (ReplacementSpan)span;
} else {
// We might have a replacement that uses the draw
// state, otherwise measure state would suffice.
span.updateDrawState(wp);//TextPaint抛出去
}
}
//处理ReplacementSpan
if (replacement != null) {
x += handleReplacement(replacement, wp, i, mlimit, runIsRtl, c, x, top, y,
bottom, fmi, needWidth || mlimit < measureLimit);
continue;
}
//遍历CharecterStyleSpan
for (int j = i, jnext; j < mlimit; j = jnext) {
jnext = mCharacterStyleSpanSet.getNextTransition(mStart + j, mStart + mlimit) -
mStart; wp.set(mPaint);
for (int k = 0; k < mCharacterStyleSpanSet.numberOfSpans; k++) {
// Intentionally using >= and <= as explained above
if ((mCharacterStyleSpanSet.spanStarts[k] >= mStart + jnext) ||
(mCharacterStyleSpanSet.spanEnds[k] <= mStart + j)) continue; CharacterStyle span = mCharacterStyleSpanSet.spans[k];
span.updateDrawState(wp);//更新draw状态
} // Only draw hyphen on last run in line
if (jnext < mLen) {
wp.setHyphenEdit(0);
}
//渲染文字...
x += handleText(wp, j, jnext, i, inext, runIsRtl, c, x,
top, y, bottom, fmi, needWidth || jnext < measureLimit);
}
} return x - originalX;
}
看到这个TextLine主要还是处理SpannedText,遍历出MetricAffectingSpan和CharactStyleSpan,MetricAffectingSpan下面有个ReplacementSpan,其余
的span都是更新draw状态,渲染文字最终还是在handleTextprivate float handleText(TextPaint wp, int start, int end,
int contextStart, int contextEnd, boolean runIsRtl,
Canvas c, float x, int top, int y, int bottom,
FontMetricsInt fmi, boolean needWidth) {
... if (c != null) {
if (runIsRtl) {
x -= ret;
} if (wp.bgColor != 0) {//画背景色
int previousColor = wp.getColor();
Paint.Style previousStyle = wp.getStyle(); wp.setColor(wp.bgColor);
wp.setStyle(Paint.Style.FILL);
c.drawRect(x, top, x + ret, bottom, wp); wp.setStyle(previousStyle);
wp.setColor(previousColor);
} if (wp.underlineColor != 0) {//画下划线
// kStdUnderline_Offset = 1/9, defined in SkTextFormatParams.h
//下划线.top=文字大小的1/9+baseline+baselineShift,也就是说是从baseline空格再往下字符大小的1/9 float underlineTop = y + wp.baselineShift + (1.0f / 9.0f) * wp.getTextSize(); int previousColor = wp.getColor();
Paint.Style previousStyle = wp.getStyle();
boolean previousAntiAlias = wp.isAntiAlias(); wp.setStyle(Paint.Style.FILL);
wp.setAntiAlias(true); wp.setColor(wp.underlineColor);
//线的粗细,是在TextPaint中定义的
c.drawRect(x, underlineTop, x + ret, underlineTop + wp.underlineThickness, wp); wp.setStyle(previousStyle);
wp.setColor(previousColor);
wp.setAntiAlias(previousAntiAlias);
} drawTextRun(c, wp, start, end, contextStart, contextEnd, runIsRtl,
x, y + wp.baselineShift);
} return runIsRtl ? -ret : ret;
}
那drawTextRun中的方法是怎么实现的呢?
private void drawTextRun(Canvas c, TextPaint wp, int start, int end,
int contextStart, int contextEnd, boolean runIsRtl, float x, int y) { if (mCharsValid) {
int count = end - start;
int contextCount = contextEnd - contextStart;
c.drawTextRun(mChars, start, count, contextStart, contextCount,
x, y, runIsRtl, wp);
} else {
int delta = mStart;
c.drawTextRun(mText, delta + start, delta + end,
delta + contextStart, delta + contextEnd, x, y, runIsRtl, wp);
}
}
可以看到是调用canvas实现的,canvas都是通过native方法来实现的。
最后上公众号,文章同步,手机阅读。