Android实现EditText富文本框效果，可以实现图片的插入和文字的变化？

主要还是起到学习交流的作用。废话不多说，我直接来说重点。因为为了便于大家调用这些代码，我把他通过jitpack封装成了依赖库。

使用之前，我建立自己先重新创一个项目或者Moudle来测试一下，这样效果明显一点，这里还有最主要一点，就是你项目或者Moudle命名的时候不要命名为RichBox，因为我这里的依赖的名称也是RichBox，这样的会发生如下图中错误。

操作前：先看一下效果截图，看是不是你想要的效果。

这个是写入数据的页面：

下面是我们把上一个页面的数据传入另外一个的页面，是不是感觉效果差不多还不错呢。

第一步：导入依赖

 implementation 'com.github.Archeryou3:RichBox:v1.0'

这一步毕竟简单我就不详细说明。还附上代码github的地址吧：RichBox地址

第二步：配置XML文件。

这里也是毕竟方便，因为我都给你们封装起来了。
代码如下：

 <com.example.richbox.EichText.RichEditer
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.example.richbox.EichText.RichEditer>

第三步：我们来使用一下这个富文本的功能。

1.加粗：

bold()

2.斜体

italic()

3.改变字体大小

fontSize()

4.居中

alignment()

5.插入图片

insertImage(图片地址)

6.获取富文本框里面的数据

toHtml()

7.从外部往富文本框里面添加数据

parseHtml()

是不是很快速就能实现你需要的功能呢。

第四步：测试源码

代码如下：

package com.example.rich;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import com.example.richbox.EichText.RichEditer;
import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {
    
    
    private RichEditer richEditer;
    private FloatingActionButton floatingActionButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    public void init(){
    
    
        richEditer=findViewById(R.id.editor_content);
        ImageView imageView=findViewById(R.id.imageView5);
        ImageView imageView1=findViewById(R.id.imageView6);
        ImageView imageView2=findViewById(R.id.imageView7);
        ImageView imageView3=findViewById(R.id.imageView8);
        ImageView imageView6=findViewById(R.id.imageView13);
        floatingActionButton=findViewById(R.id.add_note);
        imageView.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                richEditer.bold();
            }
        });
        imageView1.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                richEditer.italic();
            }
        });
        imageView2.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                richEditer.fontSize();
            }
        });
        imageView3.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                richEditer.alignment();
            }
        });
        imageView6.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                paizhao1(v);
            }
        });
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View view) {
    
    
                Intent intent=new Intent(MainActivity.this,Main2Activity.class);
                intent.putExtra("context",richEditer.toHtml());
                startActivity(intent);
            }
        });
    }


    public void paizhao1(View v){
    
    
        Intent intent = new Intent(Intent.ACTION_PICK, null);
        intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
        startActivityForResult(intent, 2);
        Toast.makeText(MainActivity.this,richEditer.toHtml(),Toast.LENGTH_SHORT).show();
    }
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    
    
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == 2) {
    
    
            // 从相册返回的数据
            if (data != null) {
    
    
                // 得到图片的全路径
                Uri uri = data.getData();
                richEditer.insertImage(String.valueOf(uri));
                Toast.makeText(MainActivity.this, String.valueOf(uri), Toast.LENGTH_LONG).show();
            }
        }
    }
}

xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayou2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FFFFFF"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginTop="8dp"
            app:layout_constraintEnd_toStartOf="@+id/imageView7"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imageView6"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/b" />

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:layout_constraintEnd_toStartOf="@+id/imageView5"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/imageView5"
            app:srcCompat="@drawable/x" />

        <ImageView
            android:id="@+id/imageView7"
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:layout_constraintEnd_toStartOf="@+id/imageView8"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imageView5"
            app:layout_constraintTop_toTopOf="@+id/imageView6"
            app:srcCompat="@drawable/a" />

        <ImageView
            android:id="@+id/imageView8"
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:layout_constraintEnd_toStartOf="@+id/imageView13"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imageView7"
            app:layout_constraintTop_toTopOf="@+id/imageView7"
            app:srcCompat="@drawable/center" />

        <ImageView
            android:id="@+id/imageView13"
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imageView8"
            app:layout_constraintTop_toTopOf="@+id/imageView8"
            app:srcCompat="@drawable/picture" />

        <TextView
            android:id="@+id/textView24"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="加粗"
            app:layout_constraintEnd_toEndOf="@+id/imageView5"
            app:layout_constraintStart_toStartOf="@+id/imageView5"
            app:layout_constraintTop_toBottomOf="@+id/imageView5" />

        <TextView
            android:id="@+id/textView27"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="斜体"
            app:layout_constraintEnd_toEndOf="@+id/imageView6"
            app:layout_constraintStart_toStartOf="@+id/imageView6"
            app:layout_constraintTop_toBottomOf="@+id/imageView6" />

        <TextView
            android:id="@+id/textView28"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="变大"
            app:layout_constraintEnd_toEndOf="@+id/imageView7"
            app:layout_constraintStart_toStartOf="@+id/imageView7"
            app:layout_constraintTop_toBottomOf="@+id/imageView7" />

        <TextView
            android:id="@+id/textView29"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="居中"
            app:layout_constraintEnd_toEndOf="@+id/imageView8"
            app:layout_constraintStart_toStartOf="@+id/imageView8"
            app:layout_constraintTop_toBottomOf="@+id/imageView8" />

        <TextView
            android:id="@+id/textView45"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="图片"
            app:layout_constraintEnd_toEndOf="@+id/imageView13"
            app:layout_constraintStart_toStartOf="@+id/imageView13"
            app:layout_constraintTop_toBottomOf="@+id/imageView13" />
    </androidx.constraintlayout.widget.ConstraintLayout>


    <ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="60dp"
        android:background="#FFFFFF"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayou2">


        <com.example.richbox.EichText.RichEditer
            android:id="@+id/editor_content"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="20dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp" />


    </ScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_note"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="25dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/dui"
        app:backgroundTint="#FFFFFF"
        app:borderWidth="0.0dip"
        app:fabCustomSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">


    </com.google.android.material.floatingactionbutton.FloatingActionButton>

</androidx.constraintlayout.widget.ConstraintLayout>

如果还不理解的话，可以去看一下我的功能测试源码，源码地址如下：
github地址。
没用过github的也可以在csdn上面下载我设置的是0积分：
CDSN资源地址
希望能对你有帮助。