Android 解决图文混排,图片和文字居中对齐问题(ImageSpan)
来源:互联网 发布:java 规则引擎 编辑:程序博客网 时间:2024/05/29 15:40
一. 概述
众所周知,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的效果,这里加入进来是做一个对比。
1 0
- Android 解决图文混排,图片和文字居中对齐问题(ImageSpan)
- Android TextView图文混排,图片和文字居中对齐
- ImageSpan 图文混排居中
- Android ImageSpan的图文居中对齐
- 解决Android 系统中 文字 + ImageSpan 对齐问题。
- 自定义ImageSpan 实现文字与图片的居中对齐
- Android ImageSpan使TextView的图文居中对齐
- TextView 图文混排,图文居中对齐
- 关于Android使用TextView+ImageSpan同一行文字图片居中的问题
- 使用ImageSpan,图片不能与文字对齐问题
- Android TextView imageSpan 居中问题
- SpannableString,ImageSpan实现图文混排
- Android图文混排功能(文字后面追加图片)
- 按钮图片和文字上下居中对齐
- Android 文字和图片混排,文字环绕图片
- 带行间距的TextView,让文字和ImageSpan中的图片居中显示
- iText7 生成 PDF 文件,解决各种操作系统中文问题,控制指定位置显示图片、文字、图文混排
- 图文混排,文字环绕图片效果
- uniry3d(4)基类中的基础方法的调用顺序
- 让text不停往复的运动
- Quartz与Spring的整合使用
- 让text不停往复的运动,和上一个有区别
- IOS Xcode下载教程(各版本)
- Android 解决图文混排,图片和文字居中对齐问题(ImageSpan)
- shake摇头效果
- 字体放大效果
- 有关malloc的三个问题
- Android Studio 版本号详解
- C#各种结束进程的方法详细介绍
- 多渠道打包--菜鸟教程
- 增加一项,减少一项
- 关于Java的静态初始化块