TextView图文居中混排

Posted 2022-12-07 童政通

TextView图文居中混排

实现方式,使用的是SpannableString和ImageSpan

一:布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.commonviewpager.lovelin.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是textView" />
</LinearLayout>

二:界面代码,注释很详细自己看

public class MainActivity extends AppCompatActivity 

    private TextView tv;

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

    private void intView() 
        tv = (TextView) findViewById(R.id.tv);
        SpannableString spannableString = new SpannableString("点击一下 名垂千史");
        ImageSpan imageSpan = new CustomImageSpan(this, R.mipmap.ic_launcher);
//        ImageSpan imageSpan = new Span(this, R.mipmap.ic_launcher);

        //setSpan插入内容的时候，起始位置不替换，会替换起始位置到终止位置间的内容，含终止位置。
        //Spanned.SPAN_EXCLUSIVE_EXCLUSIVE模式用来控制是否同步设置新插入的内容与start/end 位置的字体样式，此处没设置具体字体，所以可以随意设置
        spannableString.setSpan(imageSpan, 4, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv.setText(spannableString);


        /**
         * new ImageSpan() 有很多构造参数
         * 其中三参数的 第三个参数是,更改图片和文字对齐方式
         * DynamicDrawableSpan.ALIGN_BASELINE
         * 官方的对齐方式:
         *
         * 一种是   ALIGN_BOTTOM , 表示与文字内容的底部对齐，
         * 如果在构造ImageSpan时没有传入对齐方式，那么默认就是这种底部对齐。
         * 另一中就是 ALIGN_BASELINE, 表示与文字内容的基线对齐。
         *
         */
    

三:自定义的CustomImageSpan,实现图文居中

/**
 * Created by lovelin on 2017/6/21.
 * 实现了文字和图片居中对齐
 * 需要做的事情是 获取文本内容的中间线以及图片的中间线，然后获取两者差值，
 * 然后在draw方法中绘制图片时将差值作为canvas.translate(x, transY) 中的transY；同时要重写 getSize( )。
 */

public class CustomImageSpan extends ImageSpan 
    //自定义对齐方式--与文字中间线对齐
    private int ALIGN_FONTCENTER = 2;

    public CustomImageSpan(Context context, int resourceId) 
        super(context, resourceId);
    

    public CustomImageSpan(Context context, int resourceId, int verticalAlignment) 
        super(context, resourceId, verticalAlignment);
    

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
                     Paint paint) 

        //draw 方法是重写的ImageSpan父类 DynamicDrawableSpan中的方法，在DynamicDrawableSpan类中，虽有getCachedDrawable()，
        // 但是私有的，不能被调用，所以调用ImageSpan中的getrawable()方法，该方法中 会根据传入的drawable ID ，获取该id对应的
        // drawable的流对象，并最终获取drawable对象
        Drawable drawable = getDrawable(); //调用imageSpan中的方法获取drawable对象
        canvas.save();

        //获取画笔的文字绘制时的具体测量数据
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();

        //系统原有方法，默认是Bottom模式)
        int transY = bottom - drawable.getBounds().bottom;
        if (mVerticalAlignment == ALIGN_BASELINE) 
            transY -= fm.descent;
         else if (mVerticalAlignment == ALIGN_FONTCENTER)     //此处加入判断， 如果是自定义的居中对齐
            //与文字的中间线对齐（这种方式不论是否设置行间距都能保障文字的中间线和图片的中间线是对齐的）
            // y+ascent得到文字内容的顶部坐标，y+descent得到文字的底部坐标，（顶部坐标+底部坐标）/2=文字内容中间线坐标
            transY = ((y + fm.descent) + (y + fm.ascent)) / 2 - drawable.getBounds().bottom / 2;
        

        canvas.translate(x, transY);
        drawable.draw(canvas);
        canvas.restore();
    

    /**
     * 重写getSize方法，只有重写该方法后，才能保证不论是图片大于文字还是文字大于图片，都能实现中间对齐
     */
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) 
        Drawable d = getDrawable();
        Rect rect = d.getBounds();
        if (fm != null) 
            Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
            int fontHeight = fmPaint.bottom - fmPaint.top;
            int drHeight = rect.bottom - rect.top;

            int top = drHeight / 2 - fontHeight / 4;
            int bottom = drHeight / 2 + fontHeight / 4;

            fm.ascent = -bottom;
            fm.top = -bottom;
            fm.bottom = top;
            fm.descent = top;
        
        return rect.right;
    

详细链接:http://www.jianshu.com/p/2650357f7547参考
下面是源码链接http://download.csdn.net/detail/tongzhengtong/9876371