Рисование изображения выше диапазона текста Android
Я создаю сложное текстовое представление, имея в виду различные стили текста в одном представлении. у некоторого текста должно быть маленькое изображение только выше этого. но текст все еще должен быть там (не просто заменен), поэтому простой ImageSpan не подойдет. Я не могу использовать коллекцию TextViews, потому что мне нужно обернуть текст (или я ошибаюсь, и это можно сделать с помощью TextViews).
Я попытался объединить два пролета над одними и теми же символами, но пока это работает для стилизации текста, это не подходит для ImageSpan.
Для чего я иду:
Есть идеи?
Читать это: http://flavienlaurent.com/blog/2014/01/31/spans/ Очень помог, но я все еще не там.
1 ответ
После прочтения превосходной статьи, на которую вы ссылались, перечитывания исходного кода Android и написания множества Log.d()s, я наконец понял, что вам нужно, и это - вы готовы? - а ReplacementSpan подкласс.
ReplacementSpan для вашего случая нелогично, потому что вы не заменяете текст, вы рисуете некоторые дополнительные вещи. Но оказывается, что ReplacementSpan это то, что дает вам две вещи, в которых вы нуждаетесь: крючок для измерения высоты линии для вашего графического объекта и крючок для рисования графического объекта. Так что вы просто нарисуете там текст, так как суперкласс не собирается это делать.
Мне было интересно узнать больше о интервалах и разметке текста, поэтому я начал демонстрационный проект, чтобы поиграть с ним.
Я придумал две разные идеи для вас. В первом классе у вас есть значок, к которому вы можете получить доступ как Drawable, Вы передаете Drawable в на конструкторе. Затем вы используете DrawableРазмеры, чтобы помочь определить высоту вашей линии. Преимущество здесь в том, что DrawableРазмеры уже настроены для плотности отображения устройства.
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.text.style.ReplacementSpan;
import android.util.Log;
public class IconOverSpan extends ReplacementSpan {
private static final String TAG = "IconOverSpan";
private Drawable mIcon;
public IconOverSpan(Drawable icon) {
mIcon = icon;
Log.d(TAG, "<ctor>, icon intrinsic dimensions: " + icon.getIntrinsicWidth() + " x " + icon.getIntrinsicHeight());
}
@Override
public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
/*
* This method is where we make room for the drawing.
* We are passed in a FontMetrics that we can check to see if there is enough space.
* If we need to, we can alter these FontMetrics to suit our needs.
*/
if (fm != null) { // test for null because sometimes fm isn't passed in
/*
* Everything is measured from the baseline, so the ascent is a negative number,
* and the top is an even more negative number. We are going to make sure that
* there is enough room between the top and the ascent line for the graphic.
*/
int h = mIcon.getIntrinsicHeight();
if (- fm.top + fm.ascent < h) {
// if there is not enough room, "raise" the top
fm.top = fm.ascent - h;
}
}
/*
* the number returned is actually the width of the span.
* you will want to make sure the span is wide enough for your graphic.
*/
int textWidth = (int) Math.ceil(paint.measureText(text, start, end));
int w = mIcon.getIntrinsicWidth();
Log.d(TAG, "getSize(), returning " + textWidth + ", fm = " + fm);
return Math.max(textWidth, w);
}
@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
Log.d(TAG, "draw(), x = " + x + ", top = " + top + ", y = " + y + ", bottom = " + bottom);
// first thing we do is draw the text that is not drawn because it is being "replaced"
// you may have to adjust x if the graphic is wider and you want to center-align
canvas.drawText(text, start, end, x, y, paint);
// Set the bounds on the drawable. If bouinds aren't set, drawable won't render at all
// we set the bounds relative to upper left corner of the span
mIcon.setBounds((int) x, top, (int) x + mIcon.getIntrinsicWidth(), top + mIcon.getIntrinsicHeight());
mIcon.draw(canvas);
}
}
Вторая идея лучше, если вы собираетесь использовать действительно простые формы для вашей графики. Вы можете определить Path для вашей формы, а затем просто визуализировать Path, Теперь вы должны принять во внимание плотность отображения, и для простоты я просто беру это из параметра конструктора.
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.drawable.Drawable;
import android.text.style.ReplacementSpan;
import android.util.Log;
public class PathOverSpan extends ReplacementSpan {
private static final String TAG = "PathOverSpan";
private float mDensity;
private Path mPath;
private int mWidth;
private int mHeight;
private Paint mPaint;
public PathOverSpan(float density) {
mDensity = density;
mPath = new Path();
mWidth = (int) Math.ceil(16 * mDensity);
mHeight = (int) Math.ceil(16 * mDensity);
// we will make a small triangle
mPath.moveTo(mWidth/2, 0);
mPath.lineTo(mWidth, mHeight);
mPath.lineTo(0, mHeight);
mPath.close();
/*
* set up a paint for our shape.
* The important things are the color and style = fill
*/
mPaint = new Paint();
mPaint.setColor(Color.GREEN);
mPaint.setStyle(Paint.Style.FILL);
}
@Override
public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
/*
* This method is where we make room for the drawing.
* We are passed in a FontMetrics that we can check to see if there is enough space.
* If we need to, we can alter these FontMetrics to suit our needs.
*/
if (fm != null) {
/*
* Everything is measured from the baseline, so the ascent is a negative number,
* and the top is an even more negative number. We are going to make sure that
* there is enough room between the top and the ascent line for the graphic.
*/
if (- fm.top + fm.ascent < mHeight) {
// if there is not enough room, "raise" the top
fm.top = fm.ascent - mHeight;
}
}
/*
* the number returned is actually the width of the span.
* you will want to make sure the span is wide enough for your graphic.
*/
int textWidth = (int) Math.ceil(paint.measureText(text, start, end));
return Math.max(textWidth, mWidth);
}
@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
Log.d(TAG, "draw(), x = " + x + ", top = " + top + ", y = " + y + ", bottom = " + bottom);
// first thing we do is draw the text that is not drawn because it is being "replaced"
// you may have to adjust x if the graphic is wider and you want to center-align
canvas.drawText(text, start, end, x, y, paint);
// calculate an offset to center the shape
int textWidth = (int) Math.ceil(paint.measureText(text, start, end));
int offset = 0;
if (textWidth > mWidth) {
offset = (textWidth - mWidth) / 2;
}
// we set the bounds relative to upper left corner of the span
canvas.translate(x + offset, top);
canvas.drawPath(mPath, mPaint);
canvas.translate(-x - offset, -top);
}
}
Вот как я использовал эти классы в основной деятельности:
SpannableString spannableString = new SpannableString("Some text and it can have an icon over it");
UnderlineSpan underlineSpan = new UnderlineSpan();
IconOverSpan iconOverSpan = new IconOverSpan(getResources().getDrawable(R.drawable.ic_star));
PathOverSpan pathOverSpan = new PathOverSpan(getResources().getDisplayMetrics().density);
spannableString.setSpan(underlineSpan, 5, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(iconOverSpan, 21, 25, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(pathOverSpan, 29, 38, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
TextView textView = (TextView) findViewById(R.id.textView);
textView.setText(spannableString);
Там! Теперь мы оба чему-то научились.