安卓如何实现图文混排
安卓如何实现图文混排
- 一、安卓实现图文混排的几种方式
- 1. EditText with Spannable
- 2. RecyclerView
- 3. WebView
- F. 最终方案
- 二、图片保存的几种方案
- 1. 保留在原来位置
- 2. 复制到应用的文件夹
- 3. 复制到笔记的文件夹
- F. 最终方案
- 三、数据结构设计
- 1. 管理图片资源
- 1. ImageEntry
- 2. ImageTable
- 2. 笔记中插入图片
- 1. PictureEntry
- 2. PictureEntity
- 3. PictureViewHolder
- 四、Final
一、安卓实现图文混排的几种方式
- EditText with Spannable
- RecyclerView
- WebView
1. EditText with Spannable
EditText自身便是为编辑文本而设计的,通过ImageSpan即可实现图文混排的效果。
2. RecyclerView
通过组合EditText及ImageView可以实现图文混排的效果。
与EditText比较,RecyclerView方式只能实现文本和图片依次排列的效果,无法实现图文环绕效果。考虑到手机上阅读,其实并不需要图文环绕的效果。
3. WebView
网页版本的图文混排编辑器已经相当成熟,结合WebView强大的功能,或许是实现图文混排最好的方案。
F. 最终方案
神马笔记最终采用RecyclerView方案。
优点:
- RecyclerView方案是3个方案中实现起来最简单的。
- 神马笔记之后会添加动态GIF,视频,音频,以及特定的数据内容,RecyclerView方式非常容易扩展。
缺点
- 全选操作无法选择所有文本。
- RecyclerView滚动上似乎存在一些问题。
二、图片保存的几种方案
- 图片保留在原来的位置
- 图片复制到应用的文件夹下,例如WhatsNote/Photos
- 图片复制到笔记的文件夹下,例如WhatsNote/xxxx/Photos
1. 保留在原来位置
只记录图片文件路径。
优点:节省存储空间
缺点:无法保证图片文件的有效性
2. 复制到应用的文件夹
复制一份图片到应用文件夹内,所有笔记的图片保存在同一个文件夹内。
优点:保证图片不会被第三方应用修改,图片总是有效的
缺点:复制了一份图片,占用了手机存储空间
3. 复制到笔记的文件夹
与方式2比较,只是图片复制的位置发生了改变,由应用管理的文件夹,变成笔记管理的文件夹。
F. 最终方案
神马笔记最终采用“复制到笔记的文件夹”方案。
技术实现上,比较不出笔记文件夹比应用文件夹能带来哪些优点。
从资源管理的角度,应该选择应用文件夹的方式,便于管理图片资源。
从笔记管理的角度,与笔记相关的所有资源,应该保存在笔记文件夹内。
三、数据结构设计
交互采用了RecyclerView方案。
图片管理采用了复制到笔记文件夹方案。
接下来,完成最后一步,设计数据结构,实现图文混排有2件事情要做。
- 管理图片资源
- 将图片添加到笔记中
1. 管理图片资源
1. ImageEntry
public class ImageEntry extends BaseEntry {@SerializedName("no")int number; // 图片资源编号@SerializedName("doc")String documentId; // 所属的文章ID}
其中BaseEntry提供了UUID唯一标识图片资源。
2. ImageTable
public class ImageTable extends BaseTable<ImageEntry> {@SerializedName("no")int number; // 累计的图片资源编号,每添加一张图片,累加1}
目前采用JSON数据格式管理数据资源,未来考虑迁移到SQLite实现。
2. 笔记中插入图片
1. PictureEntry
public class PictureEntry extends ParagraphEntry {public static final String TYPE = "picture";@SerializedName("uri")String uri; // 源图片Uri@SerializedName("width")int width; // 图片宽度@SerializedName("height")int height; // 图片高度@SerializedName("signature")String signature; // 图片签名,用于缓存图片}
因为可以为图片添加描述,所以PictureEntry
继承自ParagraphEntry
,并且增加了图片相关的4个字段。
2. PictureEntity
public class PictureEntity extends ParagraphEntity<PictureEntry> {Uri uri; // 图片Uri,笔记文件夹Uri或者外部Uri
}
PictureEntity
为交互的数据结构。
3. PictureViewHolder
public class PictureViewHolder extends ComposeViewHolder<PictureEntity> {public static final int LAYOUT_RES_ID = R.layout.layout_compose_picture_list_item;View pictureLayout; // 提供边框及交互TargetSizeImageView pictureView; // 显示图片EditText editText; // 图片描述
}
PictureViewHolder
为PictureEntity
在RecyclerView
中的ViewHolder。
四、Final
神马笔记最新版本:【神马笔记Version1.1.0_beta.apk】
安卓如何实现图文混排相关推荐
- 安卓直接展示html,Android textView展示html图片,实现图文混排,点击查看大图片
Android textView展示html图片,实现图文混排,点击查看大图片 最近要展示html在textView上,实现图文混排,并且图片可以点击放大,所以去研究了一下,效果图如下: 我们知道te ...
- android多媒体图文混排,android图文混排
背景 最近我们的产品来了个新的模块,给学生做题提高成绩的.需求如下: 支持单选.多选.填空题 支持图片文字混排 输入框有交互,排版精致美观 为了体验优化,不能使用网页实现效果 思路分析 我们的图文混排 ...
- Android使用HtmlTextView控件实现新闻详情图文混排
在实现新闻详情的时候,安卓也有类似富文本的控件,但是使用webview或者textview等方法,每种方法各有优劣,不是很完美.今天给大家介绍一个安卓控件--HtmlTextView,实现详情页图文混 ...
- android 实现表格横向混动_Android图文混排实现方式详解
在使用TextView的时候,我们经常需要在TextView中进行图文混排,比如在QQ中聊天的消息中的表情,底部tab图标等. 一.场景 二.实现方式 Android官方对TextView的图文混排提 ...
- android多媒体图文混排,干货!!!Android富文本实现图文混排
效果图 rich.jpg 像图中的效果,大家在开发并不少见,大家可能不知道android提供了实现图文混排的类.大家或许会写一个布局或者使用drawableLeft这个属性实现文本的左侧图标. and ...
- iOS - 图文混排技术方案分享
前言 不少同学在工作中都能遇到图文混排的需求.但是实现图文混排的技术方案有好几种,相应的方案优劣也有差别.今天和大家一起分享一下图文混排的技术方案以及我的选择. Demo和解析工具已经开源 GitHu ...
- Android TextView中图文混排设置行间距导致高度不一致问题解决
Android TextView中图文混排设置行间距导致高度不一致问题解决 参考文章: (1)Android TextView中图文混排设置行间距导致高度不一致问题解决 (2)https://www. ...
- android富文本图片自适应,Android Span富文本图文混排 - ImageSpan(图文垂直居中)...
###为文字实现很丰富的特殊效果,当然少不了图文混排 so... 直接上效果(有直接使用和自定义垂直居中效果) ##1 ImageSpan: ImageSpan(context, resourceId ...
- TextView图文混排,显示添加的图片,三种常用方法,亲测
图文混排,文字就不说了,主要是显示图片的方法 1.TextView使用ImageSpan显示图片 [java] view plaincopy <span style="font-siz ...
- 利用ListView实现新闻客户端的新闻内容图文混排
如图: 布局文件: <LinearLayout xmlns:android="<a href="http://schemas.android.com/apk/res/a ...
最新文章
- oppo如何更新计算机,OPPO R17Pro手机怎么升级和降级系统?
- 数据库服务器管理系统,数据库管理系统服务器
- java实现modbustcp通讯_Modbus TCP双通道冗余技术
- 前端JavaScript基础知识点
- nssl1164-观察【平衡树,LCA】
- STL_set/vector/deque
- Qt signal slot 实现机制
- 曼昆经济学原理(微经部分)笔记整理
- 自学python到什么程度可以找工作-Python学到什么程度就可以找工作?
- Flash Builder4.7 破解方法
- 递归算法实例:阶乘(vb.net代码)
- EasyDSS流媒体服务器如何解决5G超高清4k视频直播卡顿的问题解决方案
- python爬数据是什么意思-爬数据是什么意思?
- 计算机无纸化考试知识点,2012重庆无纸化考试《会计电算化》知识点:计算机软件...
- 【计算机组成原理】冯诺伊曼结构和计算机性能指标
- 秃顶程序员跑马拉松历程
- qt之QSqlQuery类执行SQL语句
- 幸福和不幸福是对比出来的
- 四种常见的 POST 提交数据方式 专题
- 免费外贸Wordpress网站内容采集教程
热门文章
- 用python绘制派大星_1行代码搞定Latex公式编写,这个4.6M的Python小插件,写论文必备...
- linux无法识别raid,linux – 无法从失败的RAID中恢复
- 仿小米商城SpringBoot+Vue全栈项目开发实战文档
- 字体侵权太严重,我准备了700款可商用字体
- 文件快速定位神器(C++小项目实战)
- 第二集 第一魂环 第十三章
- 一加nfc门禁卡录入_一加手机NFC门禁卡模拟加密卡教程(需root)
- 高分一号/二号/六号定标系数
- vmware虚拟机连不上服务器,VMware虚拟机nat模式连不上网怎么办
- 【技能积累】写邮件时的常用表达