美文网首页Android开发经验谈
全程手动开发社区富文本帖子编辑器(图文混排)

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

作者: tiloylc | 来源:发表于2018-03-07 15:38 被阅读0次

    前言

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

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

    一、需求

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

    二、思路

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

    三、实现

    1、先做一个背景


    image.png

    2、完成


    image.png
    image.png
    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

    相关文章

      网友评论

        本文标题:全程手动开发社区富文本帖子编辑器(图文混排)

        本文链接:https://www.haomeiwen.com/subject/zfxjfftx.html