美文网首页Android开发学习
Android中Textview显示Html,图文混排,支持图片

Android中Textview显示Html,图文混排,支持图片

作者: yijian2595 | 来源:发表于2018-09-17 14:45 被阅读56次

    本文首发于网易云社区

    对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛刀。另外如果是在Listview中使用的Webview的话,效率则更是低下。

        然而,Android还提供了android.text.Html类来支持Html的解析,利用这个类,我们可以通过Textview来呈现Html文件。不过Html类并不是只是所有的标签。Html的描述如下:

    This class processes HTML strings into displayable styledtext.

    Not all HTML tags are supported.

    一、解析Html标签

    对于纯文字的Html文本来说,使用Textview来呈现很方便,一行代码就可以轻松搞定了,具体如下:

    contentTextView.setText(Html.formHtml(htmlString));

    二、处理img图片标签,实现图文混排

    一般来说,html文件常常是含有图片,如果需要在Textview中实现文字和图片的混排,需要使用ImageGetter。ImageGetter是Html类中一个接口,作用是给img标签获取图片内容,主要提供了一个getDrawable的方法。

    /** 
    * Retrieves images for HTML <img> tags.
    */  
    public static interface ImageGetter {  
           /**
            * This methos is called when the HTML parser encounters an
            * <img> tag.  The <code>source</code> argument is the
            * string from the "src" attribute; the return value should be
            * a Drawable representation of the image or <code>null</code>
            * for a generic replacement image.  Make sure you call
            * setBounds() on your Drawable if it doesn't already have
            * its bounds set.
            */  
           public Drawable getDrawable(String source);  
    }

    解析来需要实现一个ImageGetter,具体如下:

    public class MyImageGetter implements ImageGetter {  
         
       WeakReference<TextView> mTextViewReference;  
       Context mContext;  
     
       public MyImageGetter(Context context, TextView textView, int with) {  
           mContext = context.getApplicationContext();  
           mTextViewReference = new WeakReference<TextView>(textView);  
       }  
     
       @Override  
       public Drawable getDrawable(String url) {  
     
           URLDrawable urlDrawable = new URLDrawable(mContext);  
             
           // 异步获取图片,并刷新显示内容  
           new ImageGetterAsyncTask(url, urlDrawable).execute();  
     
           return urlDrawable;  
       }  
         
       public class ImageGetterAsyncTask extends AsyncTask<String, Void, Drawable> {  
             
           WeakReference<URLDrawable> mURLDrawableReference;  
           String mUrl;  
     
           public ImageGetterAsyncTask(String url, URLDrawable drawable) {  
               mURLDrawableReference = new WeakReference<URLDrawable>(drawable);  
               mUrl = url;  
           }  
     
           @Override  
           protected Drawable doInBackground(String... params) {  
     
               // 下载图片,并且使用缓存  
               Bitmap bitmap = DownlaodUtils.getNetworkImageWithCache(mContext, mUrl);      
               BitmapDrawable bitmapDrawable = new BitmapDrawable(mContext.getResources(), bitmap);  
                 
               Rect bounds = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());  
                 
               if (mURLDrawableReference.get() != null) {  
                   mURLDrawableReference.get().setBounds(bounds);  
               }  
               bitmapDrawable.setBounds(bounds);  
               return bitmapDrawable;  
           }  
     
           @Override  
           protected void onPostExecute(Drawable result) {  
               if (null != result) {  
                   if (mURLDrawableReference.get() != null) {  
                       mURLDrawableReference.get().drawable = result;  
                   }  
                   if (mTextViewReference.get() != null) {  
                       // 加载完一张图片之后刷新显示内容  
                       mTextViewReference.get().setText(mTextViewReference.get().getText());  
                   }  
               }  
           }  
       }  
         
         
       public class URLDrawable extends BitmapDrawable {  
           protected Drawable drawable;  
     
           public URLDrawable(Context context) {  
               // 设置默认大小和默认图片  
               Rect bounds = new Rect(0, 0, 100, 100);  
               setBounds(bounds);  
               drawable = context.getResources().getDrawable(R.drawable.default_image);  
               drawable.setBounds(bounds);  
           }  
     
           @Override  
           public void draw(Canvas canvas) {  
               if (drawable != null) {  
                   drawable.draw(canvas);  
               }  
           }  
       }  
    }  

    实现了MyImageGetter之后,则需要实现图文混排就轻而易举了

    1. MyImageGetter imageGetter = new MyImageGetter(this, contentTextView);  

    2. contentTextView.setText(Html.formHtml(htmlString, imageGetter, null));  


    、图片的点击放大

    前面已经实现了Textview呈现html文本,并且能够图文混排。但很多情况下,需要支持点击图片后将图片放大显示。这样,我们需要支持img标签的点击处理,能够监听到点击事件就可以实现这个功能了。这里我们可以通过实现TagHandler接口来实现这个功能。首先看下android.text.Html类中的Taghandler接口:

    /** 
        * Is notified when HTML tags are encountered that the parser does
        * not know how to interpret.
        */  
       public static interface TagHandler {  
           /**
            * This method will be called whenn the HTML parser encounters
            * a tag that it does not know how to interpret.
            */  
           public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader);  
    }  

    我们只需实现TagHandler的handleTag方法来处理img标签则可,主要是给内容设置一个ClickableSpan,具体如下:

    public class MyTagHandler implements TagHandler {  
     
       private mContext;  
         
       public MyTagHandler(Context context) {  
           mContext = context.getApplicationContext();  
       }  
         
       @Override  
       public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {  
     
           // 处理标签<img>  
           if (tag.toLowerCase(Locale.getDefault()).equals("img")) {  
               // 获取长度  
               int len = output.length();  
               // 获取图片地址  
               ImageSpan[] images = output.getSpans(len-1, len, ImageSpan.class);  
               String imgURL = images[0].getSource();  
                 
               // 使图片可点击并监听点击事件  
               output.setSpan(new ClickableImage(mContext, imgURL), len-1, len, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  
           }  
       }  
         
       private class ClickableImage extends ClickableSpan {  
     
           private String url;  
           private Context context;  
             
           public ClickableImage(Context context, String url) {  
               this.context = context;  
               this.url = url;  
           }  
             
           @Override  
           public void onClick(View widget) {  
               // 进行图片点击之后的处理  
           }  
       }  
    }  

    实现了TagHandler之后,在formHtml传入实例则可:

    MyImageGetter imageGetter = new MyImageGetter(this, contentTextView);  
    MyTagHandler tagHandler = new MyTagHandler(this);  
    contentTextView.setText(Html.formHtml(htmlString, imageGetter, tagHandler));  
    contentTextView.setMovementMethod(LinkMovementMethod.getInstance());  

    网易云产品免费体验馆,无套路试用,零成本体验云计算价值。  

    本文来自网易云社区,经作者戚明峰授权发布

    相关文章:
    【推荐】 深情留不住,套路得人心--聊聊套路那些事儿

    相关文章

      网友评论

        本文标题:Android中Textview显示Html,图文混排,支持图片

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