Drawable与TextView第一行对齐,后拼接不同颜色文本

该博客介绍了如何实现TextView的第一行与左侧Drawable对齐,并在文本后方拼接不同颜色的文本。步骤包括导入第三方库,XML布局设置,以及创建圆形Drawable。内容详细解释了如何随着文本输入使拼接的文本动态移动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现左边drawable只与第一行对齐,置顶拼接在文本后方,可随文本输入向后移动
在这里插入图片描述

第一行对齐

1.导入三方框架

implementation 'com.github.ithedan:TextViewDrawable:v1.0'

2.XML

  <com.hedan.textdrawablelibrary.TextViewDrawable
                android:id="@+id/tv_detail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/bg_circle_mini_gray"
                app:isAliganCenter="false"
                android:drawablePadding="@dimen/dp_5"
                android:text="asd"
                android:lineSpacingMultiplier="1.3"
                android:textColor="@color/daily_zero_text_gray"
                android:textSize="@dimen/sp_13" />

3.圆形Drawable
bg_circle_mini_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/tunnel_trend_gray" />
    <size
        android:width="4dp"
        android:height="4dp" />
</shape>
拼接实现
package com.wttech.tiefa.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
<think>好的,用户想了解如何实现图文混排,我需要整理相关的方法和步骤。根据提供的引用资料,有几种不同的实现方式,比如使用PHPCMS、Android的SpannableStringBuilder、HTML以及直播系统中的处理。 首先,用户的问题是关于“图文混排的实现方法教程”,所以需要覆盖不同平台和技术的解决方案。引用中提到的PHPCMS方法可能涉及模板调用,但具体细节不明确,可能需要进一步解释。Android方面,引用3提到了SpannableStringBuilder和点击事件的处理,这应该详细说明。HTML的实现在引用4和引用2都有涉及,包括网页制作和直播中的HTML代码处理。此外,直播系统还用了TextView展示HTML,可能需要说明如何结合图片控件。 需要分点整理这些方法,确保每个平台都有对应的步骤。例如,Android部分要包括SpannableStringBuilder的使用,设置图片和样式,以及点击事件的注意事项。网页部分则要介绍HTML/CSS的浮动布局和Flexbox。直播系统可能需要处理动态内容,如拼接HTML字符串和占位符的使用。 还要注意用户可能的实际需求,比如前端开发、移动应用或CMS系统,因此需要覆盖不同场景。同时,引用1提到PHPCMS的模板调用,虽然内容描述不太清晰,但可以推测是通过标签或短代码插入图片和文本,可能需要结合CMS的文档进一步解释。 最后,生成相关问题时要围绕实现方法、技术选型、常见问题和优化方向,帮助用户深入理解。</think>### 图文混排的实现方法 图文混排是前端开发、移动应用和内容管理系统中的常见需求,以下是不同场景下的实现方法及教程: --- #### 1. **网页开发(HTML/CSS)** - **基础方法**:使用`<img>`标签配合CSS浮动属性实现图文环绕。 ```html <div class="container"> <img src="image.jpg" style="float: left; margin-right: 10px;"> <p>这里是文字内容...</p> </div> ``` - **Flexbox布局**:通过Flex布局灵活控制图文位置。 ```css .container { display: flex; align-items: center; } ``` - **应用场景**:新闻页面、博客文章等[^4]。 --- #### 2. **Android开发** - **SpannableStringBuilder**:动态插入图片和样式文本。 ```java SpannableStringBuilder builder = new SpannableStringBuilder("文字部分"); Drawable drawable = getResources().getDrawable(R.drawable.icon); drawable.setBounds(0, 0, 50, 50); // 设置图片大小 builder.setSpan(new ImageSpan(drawable), 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); textView.setText(builder); ``` - **点击事件处理**:需在Adapter中设置`LinkMovementMethod`以使点击生效[^3]。 --- #### 3. **直播系统(动态内容处理)** - **HTML拼接**:在TextView中动态生成带颜色和占位的图文内容。 ```java String htmlText = "  " + "<font color='#FF0000'>用户名</font> 关注了主播"; textView.setText(Html.fromHtml(htmlText)); ``` - **占位符技巧**:通过` `实现文字图片的对齐[^2]。 --- #### 4. **CMS系统(如PHPCMS)** - **模板标签调用**:使用CMS内置标签动态插入图文。 ```php {loop $content $r} <img src="{$r['image_url']}"> <p>{$r['text']}</p> {/loop} ``` - **分水岭技巧**:合理划分模板区块以实现灵活布局[^1]。 --- #### 5. **跨平台解决方案** - **富文本编辑器**:使用TinyMCE、Quill等工具直接生成混合内容。 - **Markdown扩展**:通过`![图片](url)`语法简化图文混排代码。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值