美文网首页Android知识Android开发Android技术知识
TextView中的文字颜色,点击,斜体等实现--Spannab

TextView中的文字颜色,点击,斜体等实现--Spannab

作者: 王诛魔Phy | 来源:发表于2017-04-05 23:58 被阅读248次

    一般实现方式如下:

    String html = "文字<font color=\"red\">变色</font>的效果";
    tvMainShow.setText(Html.fromHtml(html));
    

    使用Html的方式来实现,简单的还好,复杂一点的真的很不方便

    Google显然早就已经想到了这样的问题,所以

    SpannedString & SpannableStringBuilder 就是干这个的

    他们都实现了 CharSequence,眼熟么? setText(CharSequence text).也就是说,你可以直接赋值给TextView
    他们两个的区别就是
    This is the class for text whose content is immutable but to which markup objects can be attached and detached. For mutable text, see SpannableStringBuilder
    文档说的很清楚了,就是CharSequence是固定长度的,一旦通过 new SpannableString("设置文字");则不可以更改文字内容,而SpannableStringBuilder是可以的,个人理解比较像String 和 StringBuilder 的关系

    不多说了,开搞:

    1.设置文字

    SpannableString spannableString = new SpannableString("文字的前景色与背景色");


    2.通过setSpan来修改文字的样式
    setSpan [Object what, int start, int end, int flags)

    入参.png

    flags:
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE:前后都不包括
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE :前面不包括
    Spannable.SPAN_INCLUSIVE_EXCLUSIVE :前面包括
    Spannable.SPAN_INCLUSIVE_INCLUSIVE :前后都包括

    为了说明这四个参数,有例子如下:

    flags.gif

    代码如下:

    /*
     *
     * @author 王诛魔 2017/1/21 上午11:31
     * @e-mail  phyooos@163.com
     */
    public class MainActivity extends AppCompatActivity {
    
        @BindView(R.id.edit_show)
        EditText etMainShow;
        @BindView(R.id.tab_view)
        TabLayout tabLayout;
    
    
        @Override
        public void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ButterKnife.bind(this);
            showText(Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    switch (tab.getPosition()) {
                        case 0:
                            showText(Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                            break;
                        case 1:
                            showText(Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
                            break;
                        case 2:
                            showText(Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
                            break;
                        case 3:
                            showText(Spannable.SPAN_INCLUSIVE_INCLUSIVE);
                            break;
                    }
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
                }
            });
        }
    
        /**
         * 展示文字
         */
        private void showText(int type) {
            //构造SpannableString
            SpannableString spanString = new SpannableString("这里是王诛魔的简书文章");
            //字体颜色的Span
            ForegroundColorSpan span = new ForegroundColorSpan(Color.RED);
            //指定范围
            spanString.setSpan(span, 3, 6, type);
            //设置给EditText显示出来
            etMainShow.setText(spanString);
        }
    }
    
    

    上面的代码中:

    //字体颜色的Span
    ForegroundColorSpan span = new ForegroundColorSpan(Color.RED);
    ForegroundColorSpan就是设置的文字样式,,这个是前景色,,也就是字体的颜色
    //指定范围
    spanString.setSpan(span, 3, 6, type);
    这里的三个参数已经在上面说过了,通过上面的代码也会发现,其实3,6  其中下标3是包含的,而下标6就不会改变
    

    3.至于Span的这些个样式在哪里找,请看文档:
    关键词:CharacterStyle

    https://developer.android.com/reference/android/text/style/CharacterStyle.html

    Span的一些类型.png

    说几个常用的吧:

    • ForegroundColorSpan 字体颜色
    • BackgroundColorSpan 字体背景色设置
    • AbsoluteSizeSpan 字体大小
    • StyleSpan 粗体等

    //字体由Typeface来控制
    StyleSpan span = new StyleSpan(Typeface.BOLD_ITALIC);

    - UnderlineSpan 下划线
    - ImageSpan 图片置换
    
    
    [ImageSpan https://developer.android.com/reference/android/text/style/ImageSpan.html](https://developer.android.com/reference/android/text/style/ImageSpan.html)
    

    这个有一点不同,它是将文字中的指定部分替换为一个图片,至于如何构造请参考文档
    让我想起来了那个EmojiEditText的库,其实可以用这个ImageSpan实现一个简单的可以显示表情的TextView

    
    - ClickableSpan 点击
    
    

    //这个有些不同,需要
    class CustomClickable extends ClickableSpan {

    @Override
    public void updateDrawState(TextPaint ds) {
        //这里其实还可以对可点击部分设置一些东西
    }
    
    @Override
    public void onClick(View widget) {
          ...do something
    }
    

    }

    //对了,加上这行代码
    TextView.setMovementMethod(LinkMovementMethod.getInstance());
    //要不点不动哦

    
    ![2017-04-05_23-36-38.png](https://img.haomeiwen.com/i2520304/7ccd2161c4d5f5e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    - URLSpan 这个完全可以用ClickableSpan实现
    
    
    ** SpannableStringBuilder**
    
    SpannableString都说的这么明白了,SpannableStringBuilder就省了
    
    
    ###End
    > 欢迎交流
    现在瓶颈期,也希望加入一个靠谱点的技术群什么的,有的请推荐
    e-mail : wangzhumoo@gmail.com
    
    
    

    相关文章

      网友评论

        本文标题:TextView中的文字颜色,点击,斜体等实现--Spannab

        本文链接:https://www.haomeiwen.com/subject/ganxattx.html