如何使用ClickableSpan切换可扩展前景色

Question

I created this class with a method that receives an Spannable object and applies an style to whatever objects it receives. I am using it on a forum message parser which have these Spoiler tags, where the content is only shown when the mouse cursor is over it. For android, I wanted to make it work with clicks on the hidden area, and for that I wrote this:

public static class TextRuleStartSpoiler extends TextRuleStart
{
    protected TextRuleStartSpoiler()
    {
        super("spoiler");
    }

    ArrayList<Spannable> hiddenSpannables = new ArrayList<Spannable>();
    boolean hidden = false;

    @Override
    public void apply(Spannable s, TextView tv)
    {
        hiddenSpannables.add(s);

        s.setSpan(new BackgroundColorSpan(Color.parseColor("#0A1238")),0,s.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        s.setSpan(getForegroundColorSpanShown(), 0, s.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        s.setSpan(getClickableSpanLink(),0,s.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    public static TextRuleEnd getRuleEnd()
    {
        return new TextRuleEnd("spoiler");
    }

    ForegroundColorSpan foregroundColorSpanHidden = null;
    private synchronized ForegroundColorSpan getForegroundColorSpanHidden()
    {
        if(foregroundColorSpanHidden == null)
        {
            foregroundColorSpanHidden = new ForegroundColorSpan(Color.parseColor("#0A1238"));
        }

        return foregroundColorSpanHidden;
    }

    ForegroundColorSpan foregroundColorSpanShown = null;
    private synchronized ForegroundColorSpan getForegroundColorSpanShown()
    {
        if(foregroundColorSpanShown == null)
        {
            foregroundColorSpanShown = new ForegroundColorSpan(Color.WHITE);
        }

        return foregroundColorSpanShown;
    }

    ClickableSpan clickableSpan = null;
    private synchronized ClickableSpan getClickableSpanLink()
    {
        if(clickableSpan == null)
        {
            clickableSpan = new ClickableSpan() {
                @Override
                public void onClick(View widget)
                {
                    hidden = !hidden;

                    if(hidden)
                    {
                        for(Spannable s : hiddenSpannables)
                        {
                            s.setSpan(getForegroundColorSpanHidden(), 0, s.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                            s.removeSpan(getForegroundColorSpanShown());
                        }
                    }
                    else
                    {
                        for(Spannable s : hiddenSpannables)
                        {
                            s.setSpan(getForegroundColorSpanShown(), 0, s.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                            s.removeSpan(getForegroundColorSpanHidden());
                        }
                    }

                    widget.invalidate();
                }

                @Override
                public void updateDrawState(TextPaint ds)
                {
                    //super.updateDrawState(ds);
                }
            };
        }

        return clickableSpan;
    }
}

However, no matter how much times I click on it, nothing happens. I have also tried, instead of setting and removing ForegroundColorSpans, overriding the method updateDrawState to something like this:

@Override
public void updateDrawState(TextPaint ds)
{
    if(hidden)
    {
        ds.linkColor = Color.parseColor("#0A1238");
    }
    else
    {
        ds.linkColor = Color.WHITE;
    }

    super.updateDrawState(ds);
}

But it did not change anything too. I added some debug Log prints, and I know for sure that these methods are being called with the correct arguments, but it is not updated the right way, even if I try to invalidate the view right after onClick, using both the View v on onClick and the TextView tv on apply.

Due to the nature of the code I wrote, it is not possible for me to mess too much with the TextView, since it will be full of other Spannable objects with rules completely unrelated with this one in specific.

Update

In fact, the problem was not in this part of the code, but actually on how I was inserting the Spannable objects in the TextView. I was iterating over multiple Spannables, which lead me to think I could use the TextView.append method, however, this changes the BufferType to EDITABLE, which disables visual updates in the text, so I changed it to

tv.setText(TextUtils.concat(tv.getText(), s), TextView.BufferType.SPANNABLE);

Answer 1

What you should do is override the default implementation of the updateDrawState method completely, don't call the super method.

Example code (SpoilerSpan):

public class SpoilerSpan extends ClickableSpan {

    private boolean shown = false;

    public void setShown(boolean shown){
        this.shown = shown;
    }

    public boolean getShown(){
        return this.shown;
    }

    @Override
    public void onClick(View widget) {
        //Toggle the shown state
        setShown(!getShown());
        //Invalidate the view
        widget.invalidate();
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        //Don't call the super method otherwise this may override our settings!
        //super.updateDrawState(ds);

        //No need to disable the default underline style because the super method isn't called.
        //ds.setUnderlineText(false);

        if(getShown()){
            ds.setColor(Color.BLACK);
            ds.bgColor = 0xFFE7DAC2;
        } else {
            //Spoiler is not shown, make the text color the same as the background color
            ds.setColor(0xFFE7DAC2);
            ds.bgColor = 0xFFE7DAC2;
        }
    }
}

Usage:

TextView tv = (TextView) findViewById(R.id.test);
tv.setMovementMethod(LinkMovementMethod.getInstance());

SpannableString testText = new SpannableString("This is some text. This is a spoiler and this isn't.");
testText.setSpan(new SpoilerSpan(), 19, 36, Spannable.SPAN_POINT_MARK);

tv.setText(testText, BufferType.SPANNABLE);

Result: