android - 如何在 staticlayout 和 surfaceview 中包含可点击的文本

Question

我正在设计一本互动式 child 读物。我在 surfaceview 上使用 Canvas ，因为我需要我认为最适合 surfaceview 的动画

我想让每个单词都可以触摸并大声朗读那个单词。当我使用内部带有 textview 的常规 View 时，这非常有效。然后我尝试使用 canvas 制作动画，但不知道该怎么做。

我在 Canvas 上使用静态布局来保存可跨越的文本。我不知道如何激活 onTouchListener。

这里我设置了静态布局

public class OurView extends SurfaceView implements Runnable, Callback {
    public OurView(Context context, AttributeSet attribs) {
    super(context, attribs);
    init(context);
}

private void init(Context context) {
    ball = BitmapFactory.decodeResource(getResources(), R.drawable.ball);

    text = context.getString(R.string.para1);
    tpaint = new TextPaint();
    tpaint.setColor(Color.WHITE);
    tpaint.setStyle(Style.FILL);
    tpaint.setTextSize(40F);
    TextView tv = splitWords(text);

    staticLayout = new StaticLayout(??????????, tpaint, 1000F,
            Layout.Alignment.ALIGN_NORMAL, 1, 0, false);

    holder = getHolder();
    holder.addCallback(this);
}

这是我将文本拆分成单词并为每个单词制作一个触摸式监听器。它当前返回一个 Textview，我试图返回 spaanablestring 但我无法激活监听器。我想改变它以满足我的需要。我不知道如何在没有 TextView 的情况下执行 tv.setMovementMethod(new LinkTouchMovementMethod()) 。

public TextView splitWords(final String text) {
    TextView tv = new TextView(getContext());
    final SpannableString ssText = new SpannableString(text);
    Pattern pattern;
    String regex = "\\w+";
    pattern = Pattern.compile(regex);
    Matcher matcher = pattern.matcher(text);
    while (matcher.find()) {
        final int begin = matcher.start();
        final int end = matcher.end();
        ClickableSpan clickableSpan = new ClickableSpan() {

            @Override
            public void onClick(View widget) {
                String word = (String) text.subSequence(begin, end)
                        .toString();
                Toast.makeText(getContext(), word, Toast.LENGTH_SHORT)
                        .show();
                return;                 
            }
        };
        ssText.setSpan(clickableSpan, begin, end, 0);
    }
    tv.setMovementMethod(new LinkMovementMethod());
    tv.setText(text, BufferType.SPANNABLE);
    return tv;
}

为了完整起见，我的 DoDraw

private void doDraw(Canvas canvas) {
    canvas.drawBitmap(ball, x, 100, null);
    incrementX();
    canvas.save();
    canvas.translate(100.0f, 350.0f);
    staticLayout.draw(canvas);
    canvas.restore();
}

我想向 staticlayout 添加一个 TextView ，或者添加 spannableString 并激活监听器。

Answer 1

您需要在自定义 View 中覆盖 onTouch 方法。引用以下代码，大部分是从LinkTouchMovementMethod.onTouchEvent()复制过来的。

private boolean updateSelection(MotionEvent event, Spannable buffer,Layout layout) {
    int action = event.getAction();

    if (action == MotionEvent.ACTION_UP ||
        action == MotionEvent.ACTION_DOWN) {
      int x = (int) event.getX();
      int y = (int) event.getY();

      x -= getPaddingLeft();
      y -= getPaddingTop();

      x += getScrollX();
      y += getScrollY();

      int line = layout.getLineForVertical(y);
      int off = layout.getOffsetForHorizontal(line, x);

      ClickableSpan[] link = buffer.getSpans(off, off, ClickableSpan.class);

      if (link.length != 0) {
        if (action == MotionEvent.ACTION_UP) {
          link[0].onClick(this);
        } else {
          Selection.setSelection(buffer,
                                 buffer.getSpanStart(link[0]),
                                 buffer.getSpanEnd(link[0]));
        }

        return true;
      } else {
        Selection.removeSelection(buffer);
      }
    }

    return false;

在您的 View.onTouchEvent() 方法中调用 updateSelection 方法。

@Override
public boolean onTouchEvent(MotionEvent event) {
   return updateSelection(event, layout.getText(), layout);
}

引用Weex RichText观看真实演示。