Android實作富文本框功能

第一步：匯入依賴
第二步：配置XML檔案，
第三步：我們來使用一下這個富文本的功能，
- 1.加粗：
- 2.斜體
- 3.改變字體大小
- 4.居中
- 5.插入圖片
- 6.獲取富文本框里面的資料
- 7.從外部往富文本框里面添加資料
第四步：測驗原始碼

我也是站在大佬的肩膀上，做了簡單的修改，但是大佬的代碼有點小bug，我做了一下簡單的修改好像可以達到我的需求，

首先附上大佬博客地址：參考地址，

主要還是起到學習交流的作用，廢話不多說，我直接來說重點，因為為了便于大家呼叫這些代碼，我把他通過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資源地址
希望能對你有幫助，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/235039.html

標籤：其他

上一篇：iOS CALayer CABasicAnimation以及CATransaction

下一篇：make: *** [out/host/linux-x86/obj/lib/libext2_e2p.so] Error 1

Android用最簡單的方法實作富文本框效果，可以同時文字變化和插入圖片的效果？