Android 实现文字与图片的混排

淡淡的烟草味﹌ 2022-08-27 13:49 178阅读 0赞

在我们的项目中，经常会碰到图片与文字混排的问题。解决这类问题的方法有很多，本文给出的方法不是唯一的，只有根据实际场景才能找到更适合的方法。

本文主要通过xml布局来实现图片与文字的混排（水平排列）。

1.利用TextView实现图片与文字混排，

android:drawableBottom在text的下方输出一个drawable，如图片。

如果指定一个颜色的话会把text的背景设为该颜色，并且同时和background使用时覆盖后者。  
android:drawableLeft在text的左边输出一个drawable，如图片。  
android:drawablePadding设置text与drawable(图片)的间隔，

与drawableLeft、 drawableRight、drawableTop、drawableBottom一起使用，可设置为负数，单独使用没有效果。  
android:drawableRight在text的右边输出一个drawable。  
android:drawableTop在text的正上方输出一个drawable。

<span style="font-size:18px;">        <TextView
                android:id="@+id/my_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="在线"
                android:textColor="#85898f"
                android:layout_marginTop="5dp"
                android:drawablePadding="5dp"
                android:drawableLeft="@drawable/user_online"/></span>

其中， android:drawablePaddingh很好的解决了图片与文字的间距问题。

2.TextView动态的设置图片

Drawable drawable= context.getResources().getDrawable(R.drawable.text_img);
    // 调用setCompoundDrawables时，必须调用Drawable.setBounds()方法,否则图片不显示
    drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
    textView.setCompoundDrawables(drawable, null, null, null); //设置左图标

3.利用RelativeLayout(LinearLayout) 添加 TextView 和 ImageView(ButtonView)来实现

<span style="font-size:18px;">   <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
    
            <ImageView
                android:id="@+id/my_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:background="@drawable/user_online"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="5dp"
                />
            
            <TextView
                android:id="@+id/my_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:layout_toRightOf="@id/my_iv"
                android:layout_centerVertical="true"
                android:layout_marginLeft="5dp"
                />
        </RelativeLayout></span>

其实也可以通过java代码来实现图片和文字的混排。

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter 电商商品名称标签和文字混排效果实现

一、在商品列表布局中经常会在标题前增加一个标签，如下样式： ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiB

小咪咪/ 2023年09月29日 10:07/ 0 赞/ 10 阅读

相关 html图文混排编辑器 java_Android自动解析html带图片，实现图文混排

在android中，如何将html代码转换为text，然后显示在textview中呢，有一个简单直接的方法： textView.setText(Html.fromHtml(c

小灰灰/ 2022年11月06日 04:47/ 0 赞/ 181 阅读

相关 android 文字转化为图片格式,Android 文字生成图片

一直在看别人写的文章，而自己却不敢执笔来写，一是怕写得不好，二是平时也不太有写文章的习惯，所以总感觉看别人写就好啦，但是最近工作遇到点问题，本以为很简单的，但是奈何解决起来还是

拼搏现实的明天。/ 2022年10月16日 01:58/ 0 赞/ 368 阅读

相关 android gridview文字,Android GridView 图片和文字结合

package com.wljie.adpater; import java.util.ArrayList; import java.util.HashMap; impo

忘是亡心i/ 2022年10月05日 05:56/ 0 赞/ 242 阅读

相关 Android 实现文字与图片的混排

在我们的项目中，经常会碰到图片与文字混排的问题。解决这类问题的方法有很多，本文给出的方法不是唯一的，只有根据实际场景才能找到更适合的方法。本文主要通过xml布局来实现图片与

淡淡的烟草味﹌/ 2022年08月27日 13:49/ 0 赞/ 179 阅读

相关 Android中TextView深入使用----单独TextView实现图文混排

通常情况下TextView只用来显示文本数据，但是TextView也可以显示图片，如果结合Html则可以显示非常复杂的图文混排效果。 1、使用诸如属性a

阳光穿透心脏的1/2处/ 2022年08月20日 07:29/ 0 赞/ 386 阅读

相关 ListView异步加载图片，完美实现图文混排

ListView加载文本数据都是很简单的，即使是异步获取文本数据。但是异步加载图片就稍微有一点麻烦，既要获得一个比较好的用户体验，还要防止出现图片错位等各种不良BUG，其实要考

曾经终败给现在/ 2022年07月16日 11:25/ 0 赞/ 231 阅读

相关 Android 图片混排富文本编辑器控件

概述一个Android 图片混排富文本编辑器控件（仿兴趣部落）详细代码下载：[http://www.demodashi.com/demo/12032.ht

电玩女神/ 2022年05月31日 12:44/ 0 赞/ 191 阅读

相关 Android-textview图文混排（网络图片）

工作太忙，不做过多的解释了，核心是用到了 SpannableStringBuilder Glide 和 Rxjava 直接上代码了，就两个类。 public c

╰+哭是因爲堅強的太久メ/ 2021年11月01日 10:44/ 0 赞/ 402 阅读

相关图文混排的注意点

最近写网页，写到了图文混排的部分，想了想自己也不是很熟悉，快遗忘的差不多了，就想写篇博客，写代码的同时，敲下注意点，供自己日后，也让大家参考。 CSS样式 displ

女爷i/ 2021年10月23日 12:20/ 0 赞/ 342 阅读