Каков наилучший способ раскрасить часть письма?

Я хочу добиться чего-то вроде этого:

Первое, что приходит на ум, - это дважды нарисовать текст на холсте и накрыть первый текст фигурой. Но, возможно, есть лучшее решение.

2 ответа

В одном подходе используется PorterDuffXfermode для компоновки синего прямоугольника над текстом. Вы можете расширить TextView и переопределить onDraw(), чтобы нарисовать прямоугольник после того, как текст был нарисован, и с правильным режимом (я считаю, что XOR - тот, который вы хотите), он должен достичь желаемого эффекта. Что-то вроде этого:

public class ProgressTextView extends TextView {
 private static final float MAX_PROGRESS = ...;
 private Paint mPaint;
 public ProgressTextView(Context context) {
 super(context);
 initPaint();
 }
 /* other constructor omitted, but do the same pattern in those */
 private void initPaint() {
 mPaint = new Paint();
 mPaint.setColor(...);
 mPaint.setXfermode(new PorterDuffXfermode(Mode.XOR));
 // note: you may also need the following line if hardware accel is available
 setLayerType(LAYER_TYPE_SOFTWARE, null);
 }
 @Override
 public void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 drawProgress(canvas);
 }
 private void drawProgress(Canvas canvas) {
 int w = getWidth() - getPaddingLeft() - getPaddingRight();
 int h = getHeight() - getPaddingTop() - getPaddingBottom();
 float progress = getProgress();
 float rectW = w * (progress / MAX_PROGRESS);
 int saveCount = canvas.save();
 canvas.translate(getPaddingLeft(), getPaddingTop());
 canvas.drawRect(0, 0, rectW, h, mPaint);
 canvas.restoreToCount(saveCount);
 }
 private float getProgress() {
 // TODO
 }
}

Дополнительная информация о композиции Porter/Duff: http://ssp.impulsetrain.com/porterduff.html


Ваш подход звучит хорошо для чистого решения для Android, однако я собираюсь сделать здесь немного нетрадиционных и предложить вам сделать эту часть вашего пользовательского интерфейса в веб-виде HTML-компонента и пойти с решением html-css в этом виде рендеринга намного легче сделать. Не уверен, что это идейное решение для пуристов, но это, безусловно, звучит легко выполнимо. Проверьте этот рабочий пример, когда я попытался воссоздать ваш пользовательский интерфейс (просто нажмите фрагмент кода запуска или проверьте ссылку jsfiddle в конце):

http://jsfiddle.net/zkL29/56/

licensed under cc by-sa 3.0 with attribution.