TextView и Spannable: выделение частей слова

Привет, Хабрамир! Меня зовут Оксана и я Android-разработчик в небольшой, но очень классной команде Trinity Digital.

Сегодня я буду рассказывать про маленькую часть большого проекта.

Проект зовется “Школа 2100” и представляет собой коллекцию электронных учебников с разными фичами: поиском, закладками-заметками, дополнительными материалами, тестовыми заданиями, etc. И как раз в том, что названо “тестовыми заданиями” кроется предмет обсуждения.

Среди прочих разных тестов есть необходимость реализовать задание на разбор слова по составу (он же морфологический разбор). Выглядеть оно должно примерно так:



Вкратце: есть набор слов — их нужно отобразить в виде прокручиваемого списка. Вверху списка должны быть кнопочки, которые позволяют ассоциировать части слова с определенными морфемами (приставка, корень, суффикс, окончание, основа).

Выделяем часть слова, жмем кнопочку — графическое обозначение морфемы отрисовывается. И, плюс, маленький крестик для удаления.

Чтобы сделать всю эту красоту, нам понадобится реализовать механизм выделения частей слова — собственно, дальше разбираемся именно с этой задачей.

Правила выделения нужны такие:

• кликаем на букву, она подсвечивается
• если подсвечена одна буква, и на нее кликнуть повторно — подсветка сбрасывается
• если подсвечена одна буква, и кликнуть на другую — будут подсвечены эти две плюс все что между ними
• если подсвечено больше одной буквы и кликнуть на любую — будет подсвечена только эта любая

Вдобавок ко всему, между буквами слова должно быть некоторое расстояние (трекинг), большее, чем в стандартном шрифте. Это для того, чтобы потом было удобно рисовать морфемы и они не “слипались” визуально.

Для реализации была выбрана комбинация TextView + Spannable, которая обладает достаточными возможностями и вместе с тем довольно проста в работе.

Вообще, Spannable — это такой интерфейс, который описывает маркировку текста объектами, связанными с форматированием этого текста. Форматирующие объекты — это экземпляры классов, которые реализуют интерфейс ParcelableSpan. Есть готовые реализации (например, UnderlineSpan, ForegroundColorSpan, StrikethoughSpan и прочие), но мы реализуем этот интерфейс сами, потому что нам нужны одновременно трекинг и цвет.

Собственно, только для того чтобы сделать трекинг, уже понадобится кастомная реализация (если и есть готовая, то она не была найдена).

ДЕМО

Итак, переходим на просторы уютненького демо-проекта, в котором будет:

• WordAnswerView — класс-наследник TextView, в котором и будет происходить все самое интересное
• MainActivity — главный экран, там мы создадим экземпляр WordAnswerView
• activity_main.xml — разметочка-контейнер

Начнем с activity_main.xml, там все просто:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="ru.trinitydigital.textselecting.MainActivity"
   android:id="@+id/container">
</RelativeLayout>

Теперь MainActivity:

package ru.trinitydigital.textselecting;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {
    
    @Override 
    protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		RelativeLayout container = (RelativeLayout) findViewById(R.id.container);
		container.addView(new WordAnswerView(this, "hello", convertDpToPx(30)));
	}
}

И наконец WordAnswerView, будем разбирать поэтапно. Создаем наследника TextView и определяем нужные свойства:

public class WordAnswerView extends TextView {
	// тут будем хранить исходную строку
	private final String originalText;

	// это число определяет, сколько пикселей отведено на трекинг (расстояние между буквами)
	private float tracking = convertDpToPx(16);
	// цвет выделения
	private int selectionColor = Color.parseColor("#5591F6");

	// специальное значение для отсуттсвия выделения
	private static final int NO_SELECTION = -1;
	// начало и конец выделения (индексы символов в строке)
	private int selectionBegin = NO_SELECTION,
	selectionEnd = NO_SELECTION;

	// та самая штука, которая отвечает за отрисовку трекинга и выделения
	private SelectionTrackingSpan selectionTrackingSpan = new SelectionTrackingSpan();

	// понадобится позже, чтобы определять, на какую букву был клик
	private int baseWidth;
}

В конструкторе вот что:

public WordAnswerView(Context context, CharSequence text, float textSizePx) {
	super(context);
	// запоминаем текст
	originalText = text.toString();

	setTextSize(textSizePx);
	setTextColor(Color.BLACK);

	// это нужно для того, чтобы на каждую букву приходилась одинаковая ширина,
	// так будет гораздо удобней отрисовывать морфемы
	setTypeface(Typeface.MONOSPACE);
	setPadding((int) tracking, 0, (int) tracking, 0);

	// на всю строку устанавливаем наш спан, который будет отвечать за форматирование
	SpannableString s = new SpannableString(originalText);
	s.setSpan(selectionTrackingSpan, 0, originalText.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
	setText(s);
}

Еще нужно ловить касания, так что добавим кода в конструктор:

public WordAnswerView(Context context, CharSequence text, float textSizePx) {
	// …
	setOnTouchListener(new OnTouchListener() {
	    
	    @Override
		public boolean onTouch(View v, MotionEvent event) {
			switch (event.getActionMasked()) {
			case MotionEvent.ACTION_UP:
				// считаем индекс символа, на который кликнули
				int index = (int)(event.getX() / baseWidth);
				// и устанавливаем границы выделения согласно описанным выше правилам
				if (selectionBegin == index && selectionEnd == NO_SELECTION) {
					selectionBegin = NO_SELECTION;
					selectionEnd = NO_SELECTION;
					invalidate();
					break;
				}
				
				if (selectionBegin == NO_SELECTION) {
				    selectionBegin = index;
				}
				else if (selectionEnd == NO_SELECTION) {
					selectionEnd = index;
					if (selectionBegin > selectionEnd) {
						int tmp = selectionBegin;
						selectionBegin = selectionEnd;
						selectionEnd = tmp;
					}
				} else {
					selectionBegin = index;
					selectionEnd = NO_SELECTION;
				}
				invalidate();
				break;
			}
			return false;
		}
	});
}

Кстати, чтобы все у нас было хорошо с определением того, на которую букву кликнули, надо еще добавить вот это:

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
	super.onSizeChanged(w, h, oldw, oldh);
	baseWidth = w / originalText.length();
}

Добираемся до самой сути — напишем класс SelectionTractingSpan:

public class SelectionTrackingSpan extends ReplacementSpan {
    @Override
	public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
		// размер будет достаточный для того чтобы нарисовать буквы + расстояния между ними
		return (int)(paint.measureText(text, start, end) + tracking * (end - start));
	}

	@Override
	public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
		float dx = x;
		for (int i = start; i < end; i++) {
			// если символ не попадает в выделенную часть, будем рисовать его просто черным
			if (i < selectionBegin || i >= (selectionEnd != NO_SELECTION ? selectionEnd + 1 : selectionBegin + 1)) paint.setColor(Color.BLACK);
			else paint.setColor(selectionColor);
			canvas.drawText(text, i, i + 1, dx, y, paint);
			dx += paint.measureText(text, i, i + 1) + tracking;
		}
	}
}

Итого, рецепт довольно прост:

• Наследуемся от TextView
• Ловим касания и запоминаем границы выделения
• Создаем наследника ReplacementSpan, который будет красить текст в зависимости от этих границ

+ делать трекинг

Profit :)

→ Исходники в нашем github