全程手动开发社区富文本帖子编辑器（图文混排）

前言

由于工作需要，App需要添加社区功能，要求图文混排，故研究两天后完成。

所有需求尽量以原生Android开发

一、需求

编辑器要求：
1、要求允许插入图片，视频，表情。图片要求可以点击放大查看
2、可以在文章的任意位置进行插入
阅读器要求：
1、要求图文混排
2、要求视频可以直接在帖子内播放

二、思路

编辑器整体可以使用listView或recyclerView完成，两者皆可，当前使用的为recyclerView + 自定义View完成。

三、实现

1、先做一个背景

image.png

2、完成

image.png

中间夹杂了很多东西，先放上完成效果。（手动滑稽）

3、完成细节
（1）、整体由一个recyclerView构成。adapter的Holder共包括三种view，如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:focusableInTouchMode="true"
>
    <com.tlioylc.custom_ui.CustomImageView1
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <com.tlioylc.custom_ui.CustomVideoURLView
        android:id="@+id/video"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <EditText
        android:id="@+id/text"
        android:textColor="#99ffffff"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:lineSpacingExtra = "4dp"
        android:textSize="16sp"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textCursorDrawable="@null"
        android:textColorHint="@color/font3"
        android:background="@null"/>
</FrameLayout>

根据输入类型来判断，界面底部为四个控件分别为图片获取，摄像，表情及链接处理，四种方式的实现方法就暂时先不解释了，重点说一下表情的问题，表情列表用的是recyclerView多行模式，简单方便

GridLayoutManager gridLayoutManager = new GridLayoutManager(this,6);
        iconRecyclerView.setLayoutManager(gridLayoutManager);

列表中三种View的实现方式已放入源码中，可自行查看，如果有问题，可在下方留言处留言。App内用的所有图标基本都为Iconfont，具体不便提交，可自行替换为图片使用。表情图标可无限制添加，可以自行上下滚动，如需左右滚动，设置滚动方向即可。
github源码链接：
富文本图文混排编辑器
欢迎Fork

最后编辑于：2018.03.07 15:40:19