新增处理按钮（加粗、斜体、标题等）拥有文本的高亮情况

yuruiyin · yuruiyin · commit 4510e5a5882e · 2019-08-22T15:21:36.000+08:00
diff --git a/app/build.gradle b/app/build.gradle
@@ -42,7 +42,7 @@ dependencies {
 
     implementation 'com.google.code.gson:gson:2.8.5'
 
-//    implementation 'com.github.yuruiyin:RichEditor:0.0.9'
+//    implementation 'com.github.yuruiyin:RichEditor:0.1.9'
 
     implementation 'com.google.android:flexbox:1.0.0'
 }
diff --git a/app/src/main/java/com/yuruiyin/richeditor/sample/MainActivity.kt b/app/src/main/java/com/yuruiyin/richeditor/sample/MainActivity.kt
@@ -3,6 +3,7 @@ package com.yuruiyin.richeditor.sample
 import android.content.Context
 import android.content.Intent
 import android.os.Bundle
+import android.support.v4.content.ContextCompat
 import android.support.v7.app.AppCompatActivity
 import android.text.TextUtils
 import android.util.Log
@@ -77,6 +78,99 @@ class MainActivity : AppCompatActivity() {
         registerEvents()
     }
 
+    /**
+     * 粗体
+     */
+    private fun initBold() {
+        val styleBtnVm = StyleBtnVm.Builder()
+                .setType(RichTypeEnum.BOLD)
+                .setIvIcon(ivBold)
+                .setIconNormalResId(R.mipmap.icon_bold_normal)
+                .setIconLightResId(R.mipmap.icon_bold_light)
+                .setClickedView(ivBold)
+                .build()
+
+        richEditText.initStyleButton(styleBtnVm)
+    }
+
+    /**
+     * 斜体
+     */
+    private fun initItalic() {
+        val styleBtnVm = StyleBtnVm.Builder()
+                .setType(RichTypeEnum.ITALIC)
+                .setIvIcon(ivItalic)
+                .setIconNormalResId(R.mipmap.icon_italic_normal)
+                .setIconLightResId(R.mipmap.icon_italic_light)
+                .setClickedView(ivItalic)
+                .build()
+
+        richEditText.initStyleButton(styleBtnVm)
+    }
+
+    /**
+     * 删除线
+     */
+    private fun initStrikeThrough() {
+        val styleBtnVm = StyleBtnVm.Builder()
+                .setType(RichTypeEnum.STRIKE_THROUGH)
+                .setIvIcon(ivStrikeThrough)
+                .setIconNormalResId(R.mipmap.icon_strikethrough_normal)
+                .setIconLightResId(R.mipmap.icon_strikethrough_light)
+                .setClickedView(ivStrikeThrough)
+                .build()
+
+        richEditText.initStyleButton(styleBtnVm)
+    }
+
+    /**
+     * 下划线
+     */
+    private fun initUnderline() {
+        val styleBtnVm = StyleBtnVm.Builder()
+                .setType(RichTypeEnum.UNDERLINE)
+                .setIvIcon(ivUnderline)
+                .setIconNormalResId(R.mipmap.icon_underline_normal)
+                .setIconLightResId(R.mipmap.icon_underline_light)
+                .setClickedView(ivUnderline)
+                .build()
+
+        richEditText.initStyleButton(styleBtnVm)
+    }
+
+    /**
+     * 标题
+     */
+    private fun initHeadline() {
+        val styleBtnVm = StyleBtnVm.Builder()
+                .setType(RichTypeEnum.BLOCK_HEADLINE)
+                .setIvIcon(ivHeadline)
+                .setIconNormalResId(R.mipmap.icon_headline_normal)
+                .setIconLightResId(R.mipmap.icon_headline_light)
+                .setClickedView(vgHeadline)
+                .setTvTitle(tvHeadline)
+                .setTitleNormalColor(ContextCompat.getColor(this@MainActivity, R.color.headline_normal_text_color))
+                .setTitleLightColor(ContextCompat.getColor(this@MainActivity, R.color.headline_light_text_color))
+                .build()
+
+        richEditText.initStyleButton(styleBtnVm)
+    }
+
+    /**
+     * 下划线
+     */
+    private fun initBlockQuote() {
+        val styleBtnVm = StyleBtnVm.Builder()
+                .setType(RichTypeEnum.BLOCK_QUOTE)
+                .setIvIcon(ivBlockquote)
+                .setIconNormalResId(R.mipmap.icon_blockquote_normal)
+                .setIconLightResId(R.mipmap.icon_blockquote_light)
+                .setClickedView(ivBlockquote)
+                .build()
+
+        richEditText.initStyleButton(styleBtnVm)
+    }
+
     private fun registerEvents() {
         // 生成json数据，显示到TextView上
         btnCreateJson.setOnClickListener {
@@ -104,71 +198,23 @@ class MainActivity : AppCompatActivity() {
             handleClearDraft()
         }
 
-        // 加粗
-        richEditText.initStyleButton(
-                StyleBtnVm(
-                        RichTypeEnum.BOLD,
-                        ivBold,
-                        R.mipmap.icon_bold_normal,
-                        R.mipmap.icon_bold_light,
-                        ivBold
-                )
-        )
+        // 粗体
+        initBold()
 
         // 斜体
-        richEditText.initStyleButton(
-                StyleBtnVm(
-                        RichTypeEnum.ITALIC,
-                        ivItalic,
-                        R.mipmap.icon_italic_normal,
-                        R.mipmap.icon_italic_light,
-                        ivItalic
-                )
-        )
+        initItalic()
 
         // 删除线
-        richEditText.initStyleButton(
-                StyleBtnVm(
-                        RichTypeEnum.STRIKE_THROUGH,
-                        ivStrikeThrough,
-                        R.mipmap.icon_strikethrough_normal,
-                        R.mipmap.icon_strikethrough_light,
-                        ivStrikeThrough
-                )
-        )
+        initStrikeThrough()
 
         // 下划线
-        richEditText.initStyleButton(
-                StyleBtnVm(
-                        RichTypeEnum.UNDERLINE,
-                        ivUnderline,
-                        R.mipmap.icon_underline_normal,
-                        R.mipmap.icon_underline_light,
-                        ivUnderline
-                )
-        )
+        initUnderline()
 
         // 标题
-        richEditText.initStyleButton(
-                StyleBtnVm(
-                        RichTypeEnum.BLOCK_HEADLINE,
-                        ivHeadline,
-                        R.mipmap.icon_headline_normal,
-                        R.mipmap.icon_headline_light,
-                        vgHeadline
-                )
-        )
+        initHeadline()
 
         // 引用
-        richEditText.initStyleButton(
-                StyleBtnVm(
-                        RichTypeEnum.BLOCK_QUOTE,
-                        ivBlockquote,
-                        R.mipmap.icon_blockquote_normal,
-                        R.mipmap.icon_blockquote_light,
-                        ivBlockquote
-                )
-        )
+        initBlockQuote()
 
         // 添加图片
         ivAddImage.setOnClickListener {
@@ -250,7 +296,7 @@ class MainActivity : AppCompatActivity() {
                 }
                 // 以下就是用户自定义的blockType，可能是图片、视频、自定义类型等
                 BlockImageSpanType.IMAGE -> {
-                    val imageVm= it.image ?: return@forEach
+                    val imageVm = it.image ?: return@forEach
                     doAddBlockImageSpan(imageVm.path, imageVm, true)
                 }
                 BlockImageSpanType.VIDEO -> {
@@ -294,7 +340,7 @@ class MainActivity : AppCompatActivity() {
     private fun handleSaveDraft() {
         val richEditorBlockList = richEditText.content
         // 先将对象进行转换，让里头blockImageSpanObtainObject具体到各自类型的实体上（如ImageVm）
-        val draftEditorBlockList= convertEditorContent(richEditorBlockList)
+        val draftEditorBlockList = convertEditorContent(richEditorBlockList)
 
         val jsonContent = Gson().toJson(draftEditorBlockList)
         val sp = getSharedPreferences(SP_DRAFT_NAME, Context.MODE_PRIVATE)
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -57,6 +57,8 @@
             android:id="@+id/vgHeadline"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:gravity="center"
             >
 
             <ImageView
@@ -67,6 +69,15 @@
                 android:src="@mipmap/icon_headline_normal"
                 />
 
+            <TextView
+                android:id="@+id/tvHeadline"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="标题"
+                android:textSize="10dp"
+                android:textColor="@color/headline_normal_text_color"
+                />
+
         </LinearLayout>
 
         <ImageView
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -5,4 +5,7 @@
     <color name="colorAccent">#D81B60</color>
 
     <color name="base_white">#ffffffff</color>
+
+    <color name="headline_normal_text_color">#ff1c1c1c</color>
+    <color name="headline_light_text_color">#ff0cc975</color>
 </resources>
diff --git a/richeditor/src/main/java/com/yuruiyin/richeditor/RichUtils.java b/richeditor/src/main/java/com/yuruiyin/richeditor/RichUtils.java
@@ -1,6 +1,7 @@
 package com.yuruiyin.richeditor;
 
 import android.app.Activity;
+import android.support.annotation.ColorInt;
 import android.support.annotation.Nullable;
 import android.text.Editable;
 import android.text.ParcelableSpan;
@@ -9,8 +10,10 @@
 import android.text.style.ImageSpan;
 import android.util.Log;
 import android.view.KeyEvent;
+import android.view.View;
 import android.widget.ImageView;
 
+import android.widget.TextView;
 import com.yuruiyin.richeditor.enumtype.RichTypeEnum;
 import com.yuruiyin.richeditor.model.IBlockImageSpanObtainObject;
 import com.yuruiyin.richeditor.model.IInlineImageSpanObtainObject;
@@ -82,7 +85,13 @@ void initStyleButton(StyleBtnVm styleBtnVm) {
         String type = styleBtnVm.getType();
         styleBtnVm.setIsInlineType(isInlineType(type));
         mRichTypeToVmMap.put(type, styleBtnVm);
-        styleBtnVm.getClickedView().setOnClickListener(v -> {
+
+        View clickedView = styleBtnVm.getClickedView();
+        if (clickedView == null) {
+            clickedView = styleBtnVm.getIvIcon();
+        }
+
+        clickedView.setOnClickListener(v -> {
             if (mRichEditText.isFocused()) {
                 // 若未聚焦，则不响应点击事件
                 toggleStyle(type);
@@ -358,8 +367,26 @@ void insertStringIntoEditText(CharSequence content, int pos) {
         }
     }
 
-    private void changeStyleBtnImage(ImageView imageView, int resId) {
-        imageView.setImageResource(resId);
+    private void changeStyleBtnImage(StyleBtnVm styleBtnVm) {
+        ImageView ivIcon = styleBtnVm.getIvIcon();
+        if (ivIcon == null) {
+            return;
+        }
+
+        ivIcon.setImageResource(
+                styleBtnVm.isLight() ? styleBtnVm.getLightResId() : styleBtnVm.getNormalResId()
+        );
+    }
+
+    private void changeStyleBtnText(StyleBtnVm styleBtnVm) {
+        TextView tvTitle = styleBtnVm.getTvTitle();
+        if (tvTitle == null) {
+            return;
+        }
+
+        tvTitle.setTextColor(
+                styleBtnVm.isLight() ? styleBtnVm.getTitleLightColor() : styleBtnVm.getTitleNormalColor()
+        );
     }
 
     /**
@@ -625,8 +652,8 @@ private void toggleStyle(@RichTypeEnum String type) {
         }
 
         styleBtnVm.setLight(!styleBtnVm.isLight()); // 状态取反
-        changeStyleBtnImage(styleBtnVm.getIvButton(),
-                styleBtnVm.isLight() ? styleBtnVm.getLightResId() : styleBtnVm.getNormalResId());
+        changeStyleBtnImage(styleBtnVm);
+        changeStyleBtnText(styleBtnVm);
 
         if (!styleBtnVm.isInlineType()) {
             // 段落样式（标题、引用）
@@ -728,7 +755,8 @@ private void setOtherBlockStyleBtnDisable(@RichTypeEnum String curBlockType) {
         for (StyleBtnVm styleBtnVm : mRichTypeToVmMap.values()) {
             if (!styleBtnVm.isInlineType() && !styleBtnVm.getType().equals(curBlockType)) {
                 styleBtnVm.setLight(false);
-                changeStyleBtnImage(styleBtnVm.getIvButton(), styleBtnVm.getNormalResId());
+                changeStyleBtnImage(styleBtnVm);
+                changeStyleBtnText(styleBtnVm);
             }
         }
     }
@@ -853,7 +881,8 @@ private boolean handleInlineStyleButtonStatus(@RichTypeEnum String type) {
     private void clearStyleButtonsStatus() {
         for (StyleBtnVm styleBtnVm : mRichTypeToVmMap.values()) {
             styleBtnVm.setLight(false);
-            changeStyleBtnImage(styleBtnVm.getIvButton(), styleBtnVm.getNormalResId());
+            changeStyleBtnImage(styleBtnVm);
+            changeStyleBtnText(styleBtnVm);
         }
     }
 
@@ -878,7 +907,8 @@ private void handleStyleButtonsStatus() {
                     continue;
                 }
                 styleBtnVm.setLight(true);
-                changeStyleBtnImage(styleBtnVm.getIvButton(), styleBtnVm.getLightResId());
+                changeStyleBtnImage(styleBtnVm);
+                changeStyleBtnText(styleBtnVm);
             }
         }
     }
diff --git a/richeditor/src/main/java/com/yuruiyin/richeditor/model/StyleBtnVm.java b/richeditor/src/main/java/com/yuruiyin/richeditor/model/StyleBtnVm.java

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ dependencies {`
`42`	`42`
`43`	`43`	`implementation 'com.google.code.gson:gson:2.8.5'`
`44`	`44`
`45`		`-// implementation 'com.github.yuruiyin:RichEditor:0.0.9'`
	`45`	`+// implementation 'com.github.yuruiyin:RichEditor:0.1.9'`
`46`	`46`
`47`	`47`	`implementation 'com.google.android:flexbox:1.0.0'`
`48`	`48`	`}`