修改成光标可定位到图片前面，并处理输入删除文字相关逻辑

yuruiyin · yuruiyin · commit f6a1e315255b · 2019-05-24T18:41:24.000+08:00
diff --git a/richeditor/src/main/java/com/yuruiyin/richeditor/RichEditText.java b/richeditor/src/main/java/com/yuruiyin/richeditor/RichEditText.java
@@ -65,6 +65,7 @@ public class RichEditText extends LineHeightEditText {
 
     private int imageSpanPaddingTop;
     private int imageSpanPaddingBottom;
+    private int imageSpanPaddingLeft;
     private int imageSpanPaddingRight;
     // 内部限制的图片最大高度
     private int internalImageMaxHeight;
@@ -169,6 +170,7 @@ private void init(Context context, AttributeSet attrs) {
         mContext = context;
         imageSpanPaddingTop = (int) mContext.getResources().getDimension(R.dimen.rich_editor_image_span_padding_top);
         imageSpanPaddingBottom = (int) mContext.getResources().getDimension(R.dimen.rich_editor_image_span_padding_bottom);
+        imageSpanPaddingLeft = (int) mContext.getResources().getDimension(R.dimen.rich_editor_image_span_padding_left);
         imageSpanPaddingRight = (int) mContext.getResources().getDimension(R.dimen.rich_editor_image_span_padding_right);
         internalImageMaxHeight = (int) mContext.getResources().getDimension(R.dimen.rich_editor_image_max_height);
 
@@ -344,7 +346,7 @@ public void insertBlockImage(Drawable drawable, @NonNull BlockImageSpanVm blockI
 
         ViewUtil.layoutView(
                 imageItemView,
-                resImageWidth + imageSpanPaddingRight,
+                resImageWidth + imageSpanPaddingLeft + imageSpanPaddingRight,
                 resImageHeight + imageSpanPaddingTop + imageSpanPaddingBottom
         );
 
diff --git a/richeditor/src/main/java/com/yuruiyin/richeditor/RichTextWatcher.java b/richeditor/src/main/java/com/yuruiyin/richeditor/RichTextWatcher.java
@@ -22,7 +22,9 @@ public class RichTextWatcher implements TextWatcher {
     private int beforeEditContentLen = 0;
 
     // 需要插入回车符的位置，场景：在imageSpan后面输入文字时候需要换行
-    private int needInsertBreakLinePos = -1;
+    private int needInsertBreakLinePosAfterImage = -1;
+    // 是否需要在ImageSpan之前插入换行，场景：在imageSpan前面输入文字时候需要换行
+    private boolean isNeedInsertBreakLineBeforeImage;
 
     // 上次的输入框内容
     private String lastEditTextContent = "";
@@ -69,18 +71,25 @@ public void beforeTextChanged(CharSequence s, int start, int count, int after) {
         beforeEditContentLen = s.length();
         Editable editable = mEditText.getText();
         int curPos = mEditText.getSelectionStart();
-        if (curPos == 0) {
-            needInsertBreakLinePos = -1;
-            return;
-        }
 
-        BlockImageSpan[] blockImageSpans = editable.getSpans(curPos - 1, curPos, BlockImageSpan.class);
-        if (blockImageSpans.length > 0) {
-            //说明当前光标处于imageSpan的后面，如果在当前位置输入文字，需要另起一行
-            needInsertBreakLinePos = curPos;
+        // 判断是否在图片后输入
+        if (curPos == 0) {
+            needInsertBreakLinePosAfterImage = -1;
         } else {
-            needInsertBreakLinePos = -1;
+            // 判断是否在图片后面输入
+            BlockImageSpan[] blockImageSpansAfter = editable.getSpans(curPos - 1, curPos, BlockImageSpan.class);
+            if (blockImageSpansAfter.length > 0) {
+                //说明当前光标处于imageSpan的后面，如果在当前位置输入文字，需要另起一行
+                needInsertBreakLinePosAfterImage = curPos;
+            } else {
+                needInsertBreakLinePosAfterImage = -1;
+            }
         }
+
+        // 判断是否在图片前面输入
+        BlockImageSpan[] blockImageSpansBefore = editable.getSpans(curPos, curPos + 1, BlockImageSpan.class);
+        // 说明当前光标在ImageSpan的前面
+        isNeedInsertBreakLineBeforeImage = blockImageSpansBefore.length > 0;
     }
 
     @Override
@@ -101,10 +110,19 @@ public void afterTextChanged(Editable s) {
 
         int cursorPos = mEditText.getSelectionStart();
         String editContent = s.toString();
-        if (needInsertBreakLinePos != -1 &&
+        if (needInsertBreakLinePosAfterImage != -1 &&
                 cursorPos > 0 && editContent.charAt(cursorPos - 1) != '\n') {
             //在imageSpan后面输入了文字（除了'\n'），则需要换行
-            s.insert(needInsertBreakLinePos, "\n");
+            s.insert(needInsertBreakLinePosAfterImage, "\n");
+        }
+
+        if (isNeedInsertBreakLineBeforeImage && cursorPos >= 0) {
+            // 在ImageSpan前输入回车, 则需要将光标移动到上一个行
+            // 在ImageSpan前输入文字（除了'\n'），则需要先换行，在将光标移动到上一行
+            if (editContent.charAt(cursorPos - 1) != '\n') {
+                s.insert(cursorPos, "\n");
+            }
+            mEditText.setSelection(cursorPos);
         }
 
         if (cursorPos > 0 && editContent.charAt(cursorPos - 1) == '\n' && !editContent.equals(lastEditTextContent)) {
diff --git a/richeditor/src/main/java/com/yuruiyin/richeditor/RichUtils.java b/richeditor/src/main/java/com/yuruiyin/richeditor/RichUtils.java
@@ -136,6 +136,19 @@ void insertNormalTextBlock(SpannableString content, List<RichEditorBlock.InlineS
         insertStringIntoEditText(content, cursorPos);
     }
 
+    /**
+     * 判断光标是否处于行首
+     */
+    private boolean isCursorInFirstIndexOfLine() {
+        int cursor = mRichEditText.getSelectionStart();
+        if (cursor < 0 || mRichEditText.length() <= 0) {
+            return true;
+        }
+
+        Editable editable = mRichEditText.getEditableText();
+        return cursor == 0 || editable.charAt(cursor - 1) == '\n';
+    }
+
     /**
      * 在光标位置插入段落ImageSpan（如图片、视频封面、自定义view等）
      *
@@ -147,7 +160,7 @@ void insertBlockImageSpan(BlockImageSpan blockImageSpan) {
         }
 
         // 只有正常编辑器插入的ImageSpan才在前面都插入一空行，否则从草稿插入的不再另外加一空行
-        if (!blockImageSpan.getBlockImageSpanVm().isFromDraft()) {
+        if (!blockImageSpan.getBlockImageSpanVm().isFromDraft() && !isCursorInFirstIndexOfLine()) {
             insertStringIntoEditText("\n", mRichEditText.getSelectionStart());
         }
 
@@ -925,18 +938,11 @@ private void changeCursorHeight() {
      * @param cursorPos 当前光标位置
      */
     private void handleSelectionChanged(int cursorPos) {
-        //如果光标定位到了imagespan的前面，则将光标移动到imageSpan的后面
         Editable editable = mRichEditText.getEditableText();
         if (editable.length() <= 0 && cursorPos <= 0) {
             mRichEditText.requestFocus();
             mRichEditText.setSelection(0);
         }
-        ImageSpan[] imageSpans = editable.getSpans(cursorPos, cursorPos + 1, ImageSpan.class);
-        if (imageSpans.length > 0) {
-            //说明光标在ImageSpan的前面
-            mRichEditText.setSelection(cursorPos + 1);
-            return;
-        }
 
         // 先合并指定位置前后连续的行内样式
         for (String type : mRichTypeToVmMap.keySet()) {
@@ -959,6 +965,7 @@ private void handleSelectionChanged(int cursorPos) {
      * 1、删除BlockImageSpan的时候，直接将光标定位到上一行末尾
      * 2、当光标处于BlockImageSpan下一行的第一个位置（不是EditText最后一个字符）上按删除按键时,
      * 不删除字符，而是将光标定位到上一行的末尾（即BlockImageSpan的末尾）
+     * 3、当光标处于BlockImageSpan的行首按删除按键时，如果上一行不是空行，则不删除字符，而是将光标移动到上一行的末尾
      */
     private boolean handleDeleteKey() {
         Editable editable = mRichEditText.getEditableText();
@@ -988,6 +995,14 @@ private boolean handleDeleteKey() {
             return true;
         }
 
+        // 当光标处于BlockImageSpan的行首按删除按键时，如果上一行不是空行，则不删除字符，而是将光标移动到上一行的末尾
+        BlockImageSpan[] imageSpans2 = editable.getSpans(cursorPos, cursorPos + 1, BlockImageSpan.class);
+        if (imageSpans2.length > 0 && cursorPos >= 2
+                && content.charAt(cursorPos - 1) == '\n' && content.charAt(cursorPos - 2) != '\n') {
+            mRichEditText.setSelection(cursorPos - 1);
+            return true;
+        }
+
         return false;
     }
 
diff --git a/richeditor/src/main/java/com/yuruiyin/richeditor/ext/LongClickableLinkMovementMethod.java b/richeditor/src/main/java/com/yuruiyin/richeditor/ext/LongClickableLinkMovementMethod.java
@@ -32,10 +32,10 @@ public boolean onTouchEvent(TextView textView, Spannable spannable, MotionEvent
         switch (action) {
             case MotionEvent.ACTION_DOWN:
                 mPressedSpan = getPressedSpan(textView, spannable, event);
-                if (mPressedSpan != null) {  //点击span区域
-                    Selection.setSelection(spannable, spannable.getSpanStart(mPressedSpan),
-                        spannable.getSpanEnd(mPressedSpan));
-                }
+//                if (mPressedSpan != null) {  //点击span区域
+//                    Selection.setSelection(spannable, spannable.getSpanStart(mPressedSpan),
+//                        spannable.getSpanEnd(mPressedSpan));
+//                }
                 break;
             case MotionEvent.ACTION_MOVE:
                 BlockImageSpan touchedSpan = getPressedSpan(textView, spannable, event);
@@ -49,7 +49,7 @@ public boolean onTouchEvent(TextView textView, Spannable spannable, MotionEvent
                     if (MotionEvent.ACTION_UP == action) {
                         mPressedSpan.onClick(textView);
                     }
-                    super.onTouchEvent(textView, spannable, event);
+//                    super.onTouchEvent(textView, spannable, event);
                 }
                 mPressedSpan = null;
 //                safeRemoveSpan(spannable);
diff --git a/richeditor/src/main/java/com/yuruiyin/richeditor/span/BlockImageSpan.java b/richeditor/src/main/java/com/yuruiyin/richeditor/span/BlockImageSpan.java
@@ -23,6 +23,9 @@
  */
 public class BlockImageSpan extends CenterImageSpan implements LongClickableSpan {
 
+    // 手指触摸到图片左侧之后，当成光标移动到左侧，不响应图片点击事件
+    private static final int TOUCH_OFFSET_X = 45;
+
     private float x;
     private float y;
 
@@ -80,7 +83,7 @@ public boolean clicked(int touchX, int touchY) {
         Drawable drawable = getDrawable();
         if (drawable != null) {
             Rect rect = drawable.getBounds();
-            return touchX <= rect.right + x && touchX >= rect.left + x
+            return touchX <= rect.right + x && touchX >= rect.left + x + TOUCH_OFFSET_X
                     && touchY <= rect.bottom + y && touchY >= rect.top + y;
         }
         return false;
diff --git a/richeditor/src/main/res/layout/rich_editor_image.xml b/richeditor/src/main/res/layout/rich_editor_image.xml
@@ -6,6 +6,7 @@
     android:layout_height="wrap_content"
     android:paddingBottom="@dimen/rich_editor_image_span_padding_bottom"
     android:paddingRight="@dimen/rich_editor_image_span_padding_right"
+    android:paddingLeft="@dimen/rich_editor_image_span_padding_left"
     android:paddingTop="@dimen/rich_editor_image_span_padding_top"
     >
 
diff --git a/richeditor/src/main/res/values/dimens.xml b/richeditor/src/main/res/values/dimens.xml
@@ -17,9 +17,10 @@
     <dimen name="rich_editor_quote_text_size">18dp</dimen>
 
     <!-- 发表长文编辑区中块级图片元素的padding -->
-    <dimen name="rich_editor_image_span_padding_top">15dp</dimen>
-    <dimen name="rich_editor_image_span_padding_bottom">15dp</dimen>
-    <dimen name="rich_editor_image_span_padding_right">2dp</dimen>
+    <dimen name="rich_editor_image_span_padding_top">10dp</dimen>
+    <dimen name="rich_editor_image_span_padding_bottom">10dp</dimen>
+    <dimen name="rich_editor_image_span_padding_right">1dp</dimen>
+    <dimen name="rich_editor_image_span_padding_left">1dp</dimen>
 
     <!-- 限制图片最大的高度，避免调用方传递超级大的高度而导致长图限制超级长的问题 -->
     <dimen name="rich_editor_image_width">120dp</dimen>

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`android:layout_height="wrap_content"`
`7`	`7`	`android:paddingBottom="@dimen/rich_editor_image_span_padding_bottom"`
`8`	`8`	`android:paddingRight="@dimen/rich_editor_image_span_padding_right"`
	`9`	`+ android:paddingLeft="@dimen/rich_editor_image_span_padding_left"`
`9`	`10`	`android:paddingTop="@dimen/rich_editor_image_span_padding_top"`
`10`	`11`	`>`
`11`	`12`