Android 实现文字与图片的混排

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

本文主要通过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。

        <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"/>

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

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

   <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>

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

Android 实现文字与图片的混排,布布扣,bubuko.com

时间: 2024-12-14 18:14:15

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

CSS文字环绕图片 图文混排效果

CSS实现文字环绕图片效果,也就是大家常见到的文中图效果,比如文字会自动围绕一个方块状的图片广告,这一切都是自动的,不需要另外排版,对此有需要有网页,可借鉴本代码,主要是利用CSS的clear属性实现. <html> <head> <title>CSS文字环绕图片 图文混排效果丨石家庄电缆附件</title> </head> <body> <div style="float:left;"> <di

android:如何在TextView实现图文混排

我们通常在TextView文本中设置文字.可是如何设置图文混排呢? 我就在这里写一个例子 .我们需要用到一点简单的HTML知识 在TextView中预订了一些类似HTML的标签,通过标签可以使TextView控件显示不同颜色,大小,字体的文字 <font>:设置颜色和字体 <big>:设置大号 <small>:设置小号 <i>\<b>:斜体.粗体 <a>:链接地址 <img>:插入图片 在drawable中存入我们的图片.

把图片添加到文字中实现图文混排

NSString * introString = @"圣芭芭拉,圣莫妮卡海滩,圣地亚哥老城,科罗拉多岛"; NSArray * introArray = [introString componentsSeparatedByString:@","]; UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(13, 0, self.view.frame.size.width-26, [self askText

Android Json数据的解析+ListView图文混排+缓存算法Lrucache 仿知乎

前几天心血来潮,打算根据看知乎的API自己做一个小知乎,定制的过程遇到ListView的优化问题及图片未缓存重加载等等许多问题,解决了以后打算和博友分享一下. 接口数据:http://api.kanzhihu.com/getpostanswers/20150925/archive 首先,Json数据太常用,相信每一位开发者Json的解析都是必备的.我们要准备以下知识: JavaBean,枚举你需要的元素,用来存储数据. 异步加载网络内容的必备途径,多线程加载+AsyncTask两种方式. Jso

iOS 简单图文混排01

1.在Label中显示图片 // 图文混排显示 - (void)setLabel { // NSTextAttachment - 附件 NSTextAttachment *attachMent = [[NSTextAttachment alloc] init]; // 为附件设置图片 attachMent.image = [UIImage imageNamed: @"d_aini"]; // 键附件添加到图文混排 NSAttributedString *str = [NSAttribu

javaWeb css图文混排

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #hunpai{ width:500px; height:400px; border:2px dashed orange; padding:5px;/* 内边界 */

[UGUI]图文混排(一):标签制定和解析

参考链接: https://github.com/SylarLi/RichText/tree/master/Assets/Scripts 正则表达式: https://blog.csdn.net/lyh916/article/details/49201195 图文混排主要用于聊天,其实就是传输某种格式的字符串,然后解析这个字符串,生成表情文字等.图文混排的第一步,就是确定好格式,这里使用html的标签格式,对于代码中出现的start和end字段可以先忽略.标签格式如下: <material=un

IOS总结_实现UIButton的图文混排,同时显示文字和图片

我们常常需要用到按钮需要文字和图片同时显示,例如: 我们需要定义一个UIButton的子类 实现文件 - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { //可根据自己的需要随意调整 self.titleLabel.textAlignment=NSTextAlignmentRight; self.titleLabel.font=[UIFont systemFontOfSize:14

Android 图文混排 通过webview实现并实现点击图片

在一个开源项目看到是用的webview 实现的 1. 这是在asset中的一个模板html <html> <head> <title>News Detail</title> <meta name="viewport" content="width=device-width, minimum-scale=0.5, initial-scale=1.2, maximum-scale=2.0, user-scalable=1&qu