代码改变世界

图文混排的几种实现方案

2016-11-07 15:19  一切尽在掌握  阅读(3526)  评论(0编辑  收藏  举报

1、自定义控件

https://github.com/hongyangAndroid/MixtureTextView

原理:MixtureTextView extends RelativeLayout,将图片(包括gif)放在MixtureTextView中,根据属性,例如alignParentRight等,在onLayout里获取属性值,在dispatchDraw里根据图片所占的位置绘制文字,以此实现图文混排

不足:图片位置需要相对文字固定

 

2、使用html的img标签实现

    /**
     * 拼接图片
     *
     * @return
     */
    private String descString(String s) {
        return s + "<img src='" + R.drawable.icon + "'/>";
    }

 

tv_title.setText(Html.fromHtml(descString(bean.title), getImageGetterInstance(), null));

 

    /**
     * ImageGetter用于text图文混排
     *
     * @return
     */
    public Html.ImageGetter getImageGetterInstance() {
        Html.ImageGetter imgGetter = new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String source) {

                int fontH = (int) (getResources().getDimension(R.dimen.fontH));
                int id = Integer.parseInt(source);
                Drawable d = getResources().getDrawable(id);
                int width = (int) ((float) d.getIntrinsicWidth() / (float) d.getIntrinsicHeight()) * fontH;
                d.setBounds(0, 0, width, fontH);
                return d;
            }
        };
        return imgGetter;
    }

 优点:简单,易使用

 不足:图片位置适配不好处理(通过html标签应该可以解决)

 

3、使用字体包ttf

原理:将图案做在ttf里

string.xml,由设计给具体code

        <string name="fa_dot_circle_o">&#xf192;</string>
        <string name="fa_wheelchair">&#xf193;</string>
        <string name="fa_vimeo_square">&#xf194; &#xf195;</string>
        <string name="fa_try">&#xf195;</string>
        <string name="fa_plus_square_o">&#xf196;</string>

<string name="fa_dot_circle_o">&#xf192;</string>
<string name="fa_wheelchair">&#xf193;</string>
<string name="fa_vimeo_square">&#xf194; &#xf195;</string>
<string name="fa_try">&#xf195;</string>
<string name="fa_plus_square_o">&#xf196;</string>

 

textView直接引用

        Typeface font = Typeface.createFromAsset(getAssets(),
                "fontawesome-webfont.ttf");
        tab1.setTypeface(font);

 空格需要使用转义字符

    public static String blankSpace =  "<font color=\"" + 0xff0000 + "\">&nbsp&nbsp</font>";
    public static String blankSpace2 =  "<font color=\"" + 0xff0000 + "\">&emsp&emsp</font>";

 优点:十分简单

 不足:图片颜色只能设置单一色