使用android SpannableStringBuilder实现图文混排,查看更多

项目开发中需要实现这种效果

多余两行,两行最后是省略号,省略号后面是下拉更多

之前用过的是Html.fromHtml去处理图文混排的,仅仅是文字后图片或者文字颜色字体什么的,

但是这里需要在最后文字的省略号后面添加图片。

直接上代码吧,代码注释很多,慢慢研究

private void toggleEllipsize(final TextView tv,final String desc){
		if(desc == null){
		return;
		}
		tv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

			@Override
			public void onGlobalLayout() {
				boolean isEllipsized = (tv.getTag()==null||tv.getTag().equals(false))?false:(Boolean)tv.getTag();
				if(isEllipsized){
					tv.setTag(false);
				tv.setText(desc);
				}else{
				tv.setTag(true);
				int paddingLeft = tv.getPaddingLeft();
				int paddingRight = tv.getPaddingRight();
				TextPaint paint = tv.getPaint();
				float moreText = tv.getTextSize()*3;
				float availableTextWidth = (tv.getWidth()-paddingLeft-paddingRight)*2-moreText;

				CharSequence ellipsizeStr = TextUtils.ellipsize(desc,paint,availableTextWidth,TextUtils.TruncateAt.END);
				if(ellipsizeStr.length()<desc.length()){
					/*String html = "<img src='game_info_lookmore'/>";
					CharSequence charSequence = Html.fromHtml(html, new ImageGetter() {

						@Override
						public Drawable getDrawable(String source) {
							Drawable drawable = getResources().getDrawable(
									getResourceId(source));
							drawable.setBounds(
									0,
									0,
									drawable.getIntrinsicWidth()
											- DensityUtil.dip2px(GridGameInfoActivity.this, 3),
									drawable.getIntrinsicHeight()
											- DensityUtil.dip2px(GridGameInfoActivity.this, 1));
							return drawable;
						}
					}, null);
					ellipsizeStr = ellipsizeStr.toString() + charSequence.toString();*/

					CharSequence temp = ellipsizeStr+".";
					SpannableStringBuilder ssb = new SpannableStringBuilder(temp);
					Drawable dd = getResources().getDrawable(R.drawable.game_info_lookmore);
					dd.setBounds(0, 0, dd.getIntrinsicWidth(), dd.getIntrinsicHeight());
					ImageSpan is = new ImageSpan(dd, ImageSpan.ALIGN_BASELINE);
					ssb.setSpan(is, temp.length()-1, temp.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

//					int yellow = getResources().getColor(R.color.red);
//					ssb.setSpan(new ForegroundColorSpan(yellow),ssb.length()-2,ssb.length(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
					tv.setText(ssb);
					tv.setMovementMethod(LinkMovementMethod.getInstance());
				}else{
					tv.setText(desc);
				}
				}
				if(Build.VERSION.SDK_INT>=16){
					tv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
				}else{
					tv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
				}
			}
		});
		}

主要是通过SpannableStringBuilder把省略的文字和最后的图片给拼接起来。也可以最后拼接的是文字,

不让...更多

转篇博客:

Android spannableStringBuilder用法整理

spannableStringBuilder 用法详解:
 SpannableString ss = new SpannableString("红色打电话斜体删除线绿色下划线图片:.");
         //用颜色标记文本
         ss.setSpan(new ForegroundColorSpan(Color.RED), 0, 2,
                 //setSpan时需要指定的 flag,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括).
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
         //用超链接标记文本
         ss.setSpan(new URLSpan("tel:4155551212"), 2, 5,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
         //用样式标记文本(斜体)
         ss.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 5, 7,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
         //用删除线标记文本
         ss.setSpan(new StrikethroughSpan(), 7, 10,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
         //用下划线标记文本
         ss.setSpan(new UnderlineSpan(), 10, 16,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
         //用颜色标记
         ss.setSpan(new ForegroundColorSpan(Color.GREEN), 10, 13,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
         //获取Drawable资源
         Drawable d = getResources().getDrawable(R.drawable.icon);
         d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
         //创建ImageSpan
         ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
         //用ImageSpan替换文本
         ss.setSpan(span, 18, 19, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
         txtInfo.setText(ss);
         txtInfo.setMovementMethod(LinkMovementMethod.getInstance()); //实现文本的滚动
通常用于显示文字,但有时候也需要在文字中夹杂一些图片,比如QQ中就可以使用表情图片,又比如需要的文字高亮显示等等,如何在android中也做到这样呢?
记得android中有个android.text包,这里提供了对文本的强大的处理功能。
添加图片主要用SpannableString和ImageSpan类:

     Drawable drawable = getResources().getDrawable(id);
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        //需要处理的文本,[smile]是需要被替代的文本
        SpannableString spannable = new SpannableString(getText().toString()+"[smile]");
        //要让图片替代指定的文字就要用ImageSpan
        ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
        //开始替换,注意第2和第3个参数表示从哪里开始替换到哪里替换结束(start和end)
       //最后一个参数类似数学中的集合,[5,12)表示从5到12,包括5但不包括12
        spannable.setSpan(span, getText().length(),getText().length()+"[smile]".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        setText(spannable);  

将需要的文字高亮显示: 

public void highlight(int start,int end){
        SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());//用于可变字符串
        ForegroundColorSpan span=new ForegroundColorSpan(Color.RED);
        spannable.setSpan(span, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        setText(spannable);
    }  

加下划线: 

public void underline(int start,int end){
        SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());
        CharacterStyle span=new UnderlineSpan();
        spannable.setSpan(span, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        setText(spannable);
    }  

组合运用:

SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());
        CharacterStyle span_1=new StyleSpan(android.graphics.Typeface.ITALIC);
        CharacterStyle span_2=new ForegroundColorSpan(Color.RED);
        spannable.setSpan(span_1, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        spannable.setSpan(span_2, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        setText(spannable);  

案例:带有\n换行符的字符串都可以用此方法显示2种颜色

    /**
     * 带有\n换行符的字符串都可以用此方法显示2种颜色
     * @param text
     * @param color1
     * @param color2
     * @return
     */
    public SpannableStringBuilder highlight(String text,int color1,int color2,int fontSize){
        SpannableStringBuilder spannable=new SpannableStringBuilder(text);//用于可变字符串
        CharacterStyle span_0=null,span_1=null,span_2;
        int end=text.indexOf("\n");
        if(end==-1){//如果没有换行符就使用第一种颜色显示
            span_0=new ForegroundColorSpan(color1);
            spannable.setSpan(span_0, 0, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        }else{
            span_0=new ForegroundColorSpan(color1);
            span_1=new ForegroundColorSpan(color2);
            spannable.setSpan(span_0, 0, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            spannable.setSpan(span_1, end+1, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  

            span_2=new AbsoluteSizeSpan(fontSize);//字体大小
            spannable.setSpan(span_2, end+1, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        return spannable;
    }

有疑问可以留言,交流讨论

复制去Google翻译翻译结果

时间: 2024-10-06 04:00:57

使用android SpannableStringBuilder实现图文混排,查看更多的相关文章

android 你所不知道的类SpannableStringBuilder的总结--实现图文混排,查看更多,下划线等等

今天无意中看到的一个类SpannableStringBuilder,查了下感觉很牛叉: 1.看下实现的效果 第一种 引用自:使用android SpannableStringBuilder实现图文混排,查看更多 第二种 实现的代码见   使用的模板 2.简单的使用模板: 引用自  http://blog.it985.com/14433.html public class MainActivity extends Activity implements OnClickListener { priv

Android图文混排(一)-实现EditText图文混合插入上传

前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中,需要支持文本和图片的混合插入,下图演示输入的示例: 当会议创建完成以后,保存数据到服务器,然后查看刚刚创建好的会议,如图: 一.明确需求 首先,点击"会议详情"文本框中,正常输入文本,然后点击左下角的图片图标,进入系统的相册用来选择一张图片并插入到文本框中,你还可以将光标停留在任意的文字中间,完成图片的插入,回退建即可以逐个删除文字,也可以删除图片.

Android图文混排-实现EditText图文混合插入上传

前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中.须要支持文本和图片的混合插入,下图演示输入的演示样例: 当会议创建完毕以后,保存数据到server.然后查看刚刚创建好的会议.如图: 一.明白需求 首先.点击"会议详情"文本框中,正常输入文本,然后点击左下角的图片图标.进入系统的相冊用来选择一张图片并插入到文本框中,你还能够将光标停留在随意的文字中间,完毕图片的插入.回退建即能够逐个删除文字,也能够

Android 图文混排 通过webview实现并实现点击图片

在一个开源项目看到是用的webview 实现的 1. 这是在asset中的一个模板html <html> <head> <title>News Detail</title> <meta name="viewport" content="width=device-width, minimum-scale=0.5, initial-scale=1.2, maximum-scale=2.0, user-scalable=1&qu

Android Json数据的解析+ListView图文混排+缓存算法Lrucache 仿知乎

前几天心血来潮,打算根据看知乎的API自己做一个小知乎,定制的过程遇到ListView的优化问题及图片未缓存重加载等等许多问题,解决了以后打算和博友分享一下. 接口数据:http://api.kanzhihu.com/getpostanswers/20150925/archive 首先,Json数据太常用,相信每一位开发者Json的解析都是必备的.我们要准备以下知识: JavaBean,枚举你需要的元素,用来存储数据. 异步加载网络内容的必备途径,多线程加载+AsyncTask两种方式. Jso

Android 自绘TextView解决提前换行问题,支持图文混排

先看下效果图: 上面是MTextView,下面是默认的TextView. 一.原因 用最简单的全英文句子为例,如果有一个很长的单词,这一行剩余的空间显示不下了,那么规则就是不打断单词,而是把整个单词丢到下一行开始显示.这样本来没有错.一是咱们中国人都是方块字,怎么都放得下,不存在英文的这个问题.所以不习惯那个排版.二是如果TextView里面有图片,如图,不知道判断单词的代码是怎么弄得,总之它觉得最后一个啦字和后面的一串表情应该是一个整体,不能分开,就一起丢到第二行了,也就造成了这种难看的排版.

android:如何在TextView实现图文混排

我们通常在TextView文本中设置文字.可是如何设置图文混排呢? 我就在这里写一个例子 .我们需要用到一点简单的HTML知识 在TextView中预订了一些类似HTML的标签,通过标签可以使TextView控件显示不同颜色,大小,字体的文字 <font>:设置颜色和字体 <big>:设置大号 <small>:设置小号 <i>\<b>:斜体.粗体 <a>:链接地址 <img>:插入图片 在drawable中存入我们的图片.

自定义图文混排视图MyImageTextView

TextView本身是支持图文混排的,在手机上,通过TextView进行图文混排时,排版可能难以达到PC上浏览器的效果,特别是对于一些支持多种标签的发布系统. 1. 网上很容易找到的使用TextView实现图文混排的例子,大多是类似于下面的形式: TextView tv_Content; tv_Content.setText(Html.fromHtml(item.getContent(), GetImageGetter(), null)); private ImageGetter imageGe

仿小米便签图文混排 EditText解决尾部插入文字bug

一直想实现像小米便签那样的图文混排效果,收集网上的办法无非三种: 1.自定义布局,每张图片是一个ImageView,插入图片后插入EditText,缺点是实现复杂,不能像小米便签那样同时选中图片和文字 2.通过Html.fromHtml(source),可以将图片加载写进ImageGetter,实现后无bug,但是只能显示Html,当EditText setText后,想取出之前的HTML格式      图片得到的是一个obj的字符,查看了很多博客,包括stackoverflow也没给出办法从e