Android TextView与HTML结合以及设置超链接

使用android.text.HTML的fromHtml可以实现TextView文本使用HTML, 先来看一段简单的代码:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextView = (TextView) findViewById(R.id.text);

        String s1 = "<strong>强调</strong><br>";
        s1 += "<em>斜体</em><br>";
        s1 += "<b>加粗</b><br>";
        s1 += "<h1>标题1</h1><br>";
        s1 += "<h2>标题2</h2><br>";
        s1 += "<h3>标题3</h3><br>";
        s1 += "<h4>标题4</h4><br>";
        s1 += "<h5>标题5</h5><br>";
        s1 += "<font color='#FF6A6A'>设置红色</font><br>";
        s1 += "<a href=\"https://www.baidu.com\">百度链接</a>";
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            // flags
            // FROM_HTML_MODE_COMPACT:html块元素之间使用一个换行符分隔
            // FROM_HTML_MODE_LEGACY:html块元素之间使用两个换行符分隔
            mTextView.setText(Html.fromHtml(s1, Html.FROM_HTML_MODE_COMPACT));
        } else {
            mTextView.setText(Html.fromHtml(s1));
        }
        mTextView.setMovementMethod(LinkMovementMethod.getInstance());
    }
效果

点击百度链接的话会在浏览器中打开,.
首先说一下fromHtml这个方法, 24版本之前直接传入String就行了, 从24版本开始, 除了传入字符串之外, 还要传入一个flag, 就想上面代码中写的那样.
想要超链接生效还要使用setMovementMethod方法传入一个LinkMovementMethod实例.
想要使用html还有一种方法, 直接在string.xml写就可以啦, 然后在调用该string资源

<string name="html">
        <strong><font coolo="#EE6363">强调一下</font></strong>
        <p><a href="http://www.baidu.com">百度一下, 啥也不知道</a></p>
    </string>
效果图

还有一种就是设置TextView的autoLink属性, 可以设置为web, map, phone, email和all, 就是字面的意思, 也不多说啥.

还是继续讲一下html, 关于超链接, 如何取消下划线呢?
一开始的是想使用css的, 不过好像并不支持css;
于是去参考了网上的资料, 这里推荐一个博客, 写的不错的, 照着他上面的方法, 实现了去掉下划线

public class MainActivity extends AppCompatActivity {

    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextView = (TextView) findViewById(R.id.text);
        String s1 = "百度一下啥也不知道\nhttps://www.baidu.com";
        mTextView.setText(s1);
        NoUnderLineSpan noUnderLineSpan = new NoUnderLineSpan();
        if (mTextView.getText() instanceof Spannable) {
            Spannable s = (Spannable) mTextView.getText();
            s.setSpan(noUnderLineSpan, 0, s.length(), Spanned.SPAN_MARK_MARK);
        }
    }

    @SuppressLint("ParcelCreator")
    public static class NoUnderLineSpan extends UnderlineSpan {
        public NoUnderLineSpan() {
        }

        public NoUnderLineSpan(Parcel src) {
            super(src);
        }

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

新建一个内部类继承自UnderLineSpan, 就想这个类的名字一样, 就是用来设置的下划线的, 重写它的updateDrawState()方法, 通过TextPaint的setUnderLineText方法取消掉下划线.还需要在布局文件中设置autoLink

当然光新建这个内部类是没有一点点卵用的, 真正有用的是Spannable这个接口, 继承自Spanned接口, 主要看看它的setSpan方法, setSpan(Object what, int start, int end, int flags), 第一个参数是要传入的样式, 这里就传入我们自定义的内部类来取消下划线, 更多的样式可以去开发者文档查看, 第二个和第三个参数就是[start, end), 起始的位置, 最后一个参数是标志, 传入的是spanned的常量, 也可以在开发者文档查看, 这里有四个常用的

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE --- 不包含两端start和end所在的端点 (a,b)
Spanned.SPAN_EXCLUSIVE_INCLUSIVE --- 不包含端start,但包含end所在的端点 (a,b]
Spanned.SPAN_INCLUSIVE_EXCLUSIVE --- 包含两端start,但不包含end所在的端点 [a,b)
Spanned.SPAN_INCLUSIVE_INCLUSIVE --- 包含两端start和end所在的端点 [a,b]

当然, 前面的效果(忘记截图了=-=)不太好, 一般来说我们不会直接给出url, 而是通过文字啊图片啊去访问url, 那要怎么做呢?
首先将之前布局文件中的autoLink属性去掉, 接着这样写:

public class MainActivity extends AppCompatActivity {

    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextView = (TextView) findViewById(R.id.text);
        String s1 = "百度一下啥也不知道";
        SpannableString text = new SpannableString(s1);
        NoUnderLineSpan noUnderLineSpan = new NoUnderLineSpan("https://www.baidu.com");
        text.setSpan(noUnderLineSpan, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        mTextView.setText(text);
        mTextView.setMovementMethod(LinkMovementMethod.getInstance());
    }

    @SuppressLint("ParcelCreator")
    public static class NoUnderLineSpan extends URLSpan {
        public NoUnderLineSpan(String src) {
            super(src);
        }

        @Override
        public void updateDrawState(TextPaint ds) {
            super.updateDrawState(ds);
            ds.setUnderlineText(false);
            ds.setColor(Color.parseColor("#00B2EE"));
        }
    }
}

这里的内部类改成了继承URLSpan, 和之前类似, 取消了下划线, 还修改了文字的颜色, 新建一个SpannableString对象, 就可以使用setSpan方法了, 还需要设置TextView的SetMovementMethod为LinkMovementMethod实例, 才能访问url.

这里打开超链接是通过浏览器的, 但我不想通过浏览器打开超链接, 而是通过WebView打开, 要怎么做呢?
首先需要新建新的Activity, 创建一个新的布局文件, 放置一个WebView:

public class WebViewActivity extends AppCompatActivity {
    public final static String WEB_URL = "WEB_URL";

    private WebView mWebView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);

        Intent intent = getIntent();
        String url = intent.getStringExtra(WEB_URL);

        mWebView = (WebView) findViewById(R.id.web_view);
        // 开启浏览器的javascript脚本支持
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.loadUrl(url);
    }
}

接着只要重写NoUnderLineSpan的onClick方法, 点击是打开新的Activity, 再将url传递进去:

public static class NoUnderLineSpan extends URLSpan {
        private Context mContext;
        private String url;
        public NoUnderLineSpan(Context context, String src) {
            super(src);
            mContext = context;
            url = src;
        }

        @Override
        public void updateDrawState(TextPaint ds) {
            super.updateDrawState(ds);
            ds.setUnderlineText(false);
            ds.setColor(Color.parseColor("#00B2EE"));
        }

       @Override
        public void onClick(View widget) {
            Intent intent = new Intent(mContext, WebViewActivity.class);
           intent.putExtra(WebViewActivity.WEB_URL, url);
            mContext.startActivity(intent);
        }
    }
效果

回到最开始的部分, TextView怎么通过使用HTML来加载图片呢?
比如说我要加载一张网络上的图片, 在html的写法就是<img src="图片地址">就行啦, 这样真的可以么

 private TextView mTextView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String s = "<img src=\"https://a-ssl.duitang.com/uploads/item/201611/28/20161128174317_uaSwW.thumb.700_0.jpeg\"/>";
        mTextView = (TextView) findViewById(R.id.text);
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            mTextView.setText(Html.fromHtml(s, Html.FROM_HTML_MODE_LEGACY));
        } else {
            mTextView.setText(Html.fromHtml(s));
        }
    }
}

可是运行的结果却是


显然不是我们想要的结果, 不过研究一些方法获取网络的图片没有成功, 先讲一下如何获取drawable里的图片, 这个坑等研究出来再填:
首先在drawable中放置一张图片, 接着:

String s = "<img src=\"show\"/>";

然后我们还需要实现一个ImageGetter的匿名类

Html.ImageGetter imageGetter = new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String s) {
                Drawable drawable = null;
                InputStream is = null;
                try {
                    is = (InputStream) new URL(s).getContent();
                    drawable = Drawable.createFromStream(is, "src");
                    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                    is.close();
                } catch (Exception e) {
                    e.printStackTrace();
                    return null;
                }

                return drawable;
            }
        };

接着:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            mTextView.setText(Html.fromHtml(s, Html.FROM_HTML_MODE_LEGACY, imageGetter, null));
        } else {
            mTextView.setText(Html.fromHtml(s, imageGetter, null));
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 197,273评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,905评论 2 374
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,281评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,817评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,690评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,491评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,886评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,513评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,810评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,839评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,642评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,455评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,901评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,091评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,381评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,895评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,104评论 2 338

推荐阅读更多精彩内容

  • 前段时间在开发群里看到有人问android的TextView该如何自定义超链接的跳转,如:有字符串“使用该软件,即...
    zhangjinhuang阅读 7,184评论 1 36
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,331评论 0 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,523评论 18 139
  • 字符串资源里变量替换 Android开发中是拒绝硬编码的,我们可能会把一些字符串放在xml中当作资源使用,假设有如...
    醉馬当前闯阅读 13,634评论 2 44
  • 坚持原创分享第124天 事情已成定局,还陷于如果当初的懊悔自责中,不能自拔…… 生活中有很多这样的时刻。 ...
    宛如初夏阅读 232评论 0 0