美文网首页android系统控件自定义views Android UI
Android 解决图文混排,图片和文字居中对齐问题(Image

Android 解决图文混排,图片和文字居中对齐问题(Image

作者: Mr云台 | 来源:发表于2017-04-10 17:18 被阅读5851次

    一. 概述

    众所周知,Android图文混排可以通过SpannableString来实现,通过在相应位置使用ImageSpan替换即可,但是使用过的人会发现,imageSpan只提供了两种对齐方式,如下所示:

        /**
         底部对齐
         */
        public static final int ALIGN_BOTTOM = 0;
        
        /**
         基线对齐
         */
        public static final int ALIGN_BASELINE = 1;
    

    但是在大多数时候,我们希望实现图片的中点和文字的中点对齐(视觉设计师肯定会给到这样的要求),那么该怎么办呢?

    二. 图文混排,图片居中对齐方案

    方案1:

    一个比较简单解决方案就是让图片和文字的高度保持一致,这样就变相居中对齐了,那么有一些朋友为难了,视觉给的图片的高度比字体的高度小,这肿么办? 这个问题很好解决,让视觉给你切大一点的图片,即在原来的图片上多切一些透明的白边。(是不是恍然大悟?哈哈)

    plus:图片比文字高的情况根本不需要居中对齐。

    方案2:

    程序员肯定有程序员的方案,那就是扩展继承ImageSpan,重写它的onDraw()方法。这个方案本人参考了网上的一些解决方案,但是都有局限性,有些方案只要设置的TextView行间距或者padding就不能正常工作了。

    比如,这篇博客:Android ImageSpan使TextView的图文居中对齐

    这篇博客的方案,在设置了行间距的时候,就出现问题了。但是这篇博客把字体绘制的原理说的很清楚了,建议大家先读这篇博客,再来理解本人的做法。

    代码展示

    好了,直接上代码,这是自定义ImageSpan的代码,非常少。主要的原理是把图片绘制在字体的descent线和ascent的中点位置。还是那句话,先看上面那篇博客。

    public class CenterAlignImageSpan extends ImageSpan {
    
        public CenterAlignImageSpan(Drawable drawable) {
            super(drawable);
    
        }
    
        public CenterAlignImageSpan(Bitmap b) {
            super(b);
        }
    
        @Override
        public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
                @NonNull Paint paint) {
    
            Drawable b = getDrawable();
            Paint.FontMetricsInt fm = paint.getFontMetricsInt();
            int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//计算y方向的位移
            canvas.save();
            canvas.translate(x, transY);//绘制图片位移一段距离
            b.draw(canvas);
            canvas.restore();
        }
    }
    

    使用和运行效果

    在布局文件里放置一个TextView,设置其行间距。

    <?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        tools:context="com.example.hzwangqinwei.test.MainActivity"
        >
    
        <TextView
            android:id="@+id/test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#aeae34"
            android:gravity="center"
            android:lineSpacingExtra="40dp"
            android:textSize="70dp"
            />
    
    </LinearLayout>
    
    

    activity里的代码如下展示:

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            TextView tv = (TextView) findViewById(R.id.test);
    
            SpannableString sp = new SpannableString("图文混排测排测试图文混排测试图文混排测试图文混排测试图");
    
            //获取一张图片
            Drawable drawable = getDrawable(R.drawable.star);
            drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
    
            //居中对齐imageSpan
            CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable);
            sp.setSpan(imageSpan, 0, 1, ImageSpan.ALIGN_BASELINE);
    
            //普通imageSpan 做对比
            ImageSpan imageSpan2 = new ImageSpan(drawable);
            sp.setSpan(imageSpan2, 3, 4, ImageSpan.ALIGN_BASELINE);
    
            tv.setText(sp);
        }
    }
    

    运行效果,第二张图片是普通的ImageSpan的效果,这里加入进来是做一个对比。


    image

    相关文章

      网友评论

      本文标题:Android 解决图文混排,图片和文字居中对齐问题(Image

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