Android实现富文本框功能
主要还是起到学习交流的作用。废话不多说,我直接来说重点。因为为了便于大家调用这些代码,我把他通过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资源地址
希望能对你有帮助。