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

作者: DongBold | 来源:发表于2016-12-04 18:38 被阅读3880次

使用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));
        }

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android潜修者

【Android】

android开发技巧

Android知识

今日看点

Android开发

程序员

Android