如何在staticlayout和surfaceview中包含可点击的文本 [英] How to Include clickable text in staticlayout and surfaceview

问题描述

我正在设计一本互动式儿童读物.我需要在Surfaceview上使用画布，因为我需要最适合Surfaceview的动画

I designing an interactive kids book. I am using a canvas on surfaceview since I need animations which I think are best suited to surfaceview

我想使每个单词都可以触摸并大声朗读该单词.当我使用带有textview的常规视图时，这非常有用.然后，我尝试使用画布制作动画，但不知道该怎么做.

I want to make each word touchable and read that word aloud. This worked great when I used a regular view with a textview inside. I then tried canvas for animations and do not know how to do it.

我在画布上使用了staticlayout来容纳可扩展文本.我不知道如何激活onTouchListener.

I have used a staticlayout on the canvas to hold the spannable text. I do not know how I can activate the 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()).

This was my split the text into words and make an on touch listener for each word. It currently returns a Textview, I tried to return spaanablestring but I could not activate the listener. I want to change it to suit my needs. I do not know how to do tv.setMovementMethod(new LinkTouchMovementMethod()) without a textview.

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

For completeness my 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或添加spannableString并激活侦听器.

I want either to add a textview to staticlayout or add spannableString and activate the listeners.

推荐答案

您需要在自定义视图中覆盖onTouch方法.请参考以下代码，其中大多数是从LinkTouchMovementMethod.onTouchEvent()复制的.

You need to override onTouch method in your custom view. Refer the following code, most of them are copied from 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方法.

Call the updateSelection method in your View.onTouchEvent() method.

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

请参考

Refer Weex RichText to see a real demo.

这篇关于如何在staticlayout和surfaceview中包含可点击的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！