富文本编辑器,如图:
Android 富文本编辑器实现思路:
默认状态下编辑器显示一个EditText,点击图片,选择插入本地图片或者拍照图片.
插入图片时,如果当前位置后面没有文字,则直接插入图片,如果后面有文字,那么就将后面的文字截取出来,先插入这张图片,再新增一个EditText显示截取的文字;
删除信息时需要判断几种情况:
1.前面是文字,直接删除文字
2.当这个EditText中的已经没有信息了,继续点删除时,如果前面是图片,那么先删除当前这个EditText然后删除图片
3.如果前面是文字,那么先删除当前这个EditText,然后将光标置于前面EditText的最后一个
大体思路如上,下面看具体代码:
首先这个RichTextEditor集成自LinearLayout,
添加默认的EditText:
<span style="font-family:SimHei;font-size:18px;">LayoutParams firstEditParam = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);EditText firstEdit = createEditText("", dip2px(EDIT_FIRST_PADDING_TOP));allLayout.addView(firstEdit, firstEditParam);</span>
添加一张本地图片:
<span style="font-family:SimHei;font-size:18px;"> /*** 插入一张图片*/private void insertImage(Bitmap bitmap, String imagePath) {String lastEditStr = lastFocusEdit.getText().toString();int cursorIndex = lastFocusEdit.getSelectionStart();String editStr1 = lastEditStr.substring(0, cursorIndex).trim();int lastEditIndex = allLayout.indexOfChild(lastFocusEdit);lastFocusEdit.setText(editStr1);String editStr2 = lastEditStr.substring(cursorIndex).trim();addEditTextAtIndex(lastEditIndex + 1, editStr2);addImageViewAtIndex(lastEditIndex + 1, bitmap, imagePath);lastFocusEdit.requestFocus();lastFocusEdit.setSelection(editStr1.length(), editStr1.length());hideKeyBoard();}</span>
先得到当前EditText中的文字信息,接下来判断光标所处位置,如果不是在文字的最后,则将文字拆分开,添加一个新的EditText并插入图片
<span style="font-family:SimHei;font-size:18px;">/*** 在特定位置添加ImageView*/private void addImageViewAtIndex(final int index, Bitmap bmp,String imagePath) {final RelativeLayout imageLayout = createImageLayout();DataImageView imageView = (DataImageView) imageLayout.findViewById(R.id.edit_imageView);imageView.setImageBitmap(bmp);imageView.setBitmap(bmp);imageView.setAbsolutePath(imagePath);// 调整imageView的高度int imageHeight = getWidth() * bmp.getHeight() / bmp.getWidth();RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, imageHeight);imageView.setLayoutParams(lp);// onActivityResult无法触发动画，此处post处理allLayout.postDelayed(new Runnable() {@Overridepublic void run() {allLayout.addView(imageLayout, index);}}, 200);}</span>
<span style="font-family:SimHei;font-size:18px;">/*** 生成图片View*/private RelativeLayout createImageLayout() {RelativeLayout layout = (RelativeLayout) inflater.inflate(R.layout.richtextedit_imageview, null);layout.setTag(viewTagIndex++);View closeView = layout.findViewById(R.id.image_close);closeView.setTag(layout.getTag());closeView.setOnClickListener(btnListener);return layout;}</span>
先生成自定义的图片布局,然后找到里面的DataImageView,这个类继承ImageView,额外提供设置图片的绝对地址的方法等,然后将图片和图片地址设置到这个DataImageView中,最后添加到这个LinearLayout中,这里通过延迟UI操作添加.
在实际的项目中,不仅需要我们发送富文本信息,同样也需要我们显示并修改从服务器端传过来的富文本信息,下面看一下添加一张网络图片:
<span style="font-family:SimHei;font-size:18px;"> /*** 插入网络图片* * @param url*/public void insertImageByURL(String url) {if (url == null)return;final RelativeLayout imageLayout = createImageLayout();final DataImageView imageView = (DataImageView) imageLayout.findViewById(R.id.edit_imageView);imageView.setImageResource(R.drawable.logo);imageView.setScaleType(ImageView.ScaleType.CENTER);allLayout.addView(imageLayout);addEditTextAtIndex(-1, "");ImageLoader.getInstance().displayImage(url, imageView,new SimpleImageLoadingListener() {@Overridepublic void onLoadingComplete(String imageUri, View view,Bitmap loadedImage) {String path = fileUtils.savaRichTextImage(imageUri,loadedImage);imageView.setImageBitmap(loadedImage);imageView.setBitmap(loadedImage);imageView.setAbsolutePath(path);int imageHeight = getWidth() * loadedImage.getHeight()/ loadedImage.getWidth();RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, imageHeight);imageView.setLayoutParams(lp);imageView.setScaleType(ImageView.ScaleType.FIT_XY);}});}</span>
这个方法用于显示网络返回的富文本信息,一般返回的富文本信息中的图片信息多以URL连接形式返回,这里使用ImageLoader类加载图片,并将加载出来的图片加载到缓存中,同时也将图片的地址添加到DataImageView中.
返回富文本中的信息:
<span style="font-family:SimHei;font-size:18px;">public HashMap<String, Object> getRichEditData() {HashMap<String, Object> data = new HashMap<>();StringBuilder editTextSB = new StringBuilder();List<String> imgUrls = new ArrayList<>();char separator = 26;int num = allLayout.getChildCount();for (int index = 0; index < num; index++) {View itemView = allLayout.getChildAt(index);if (itemView instanceof EditText) {EditText item = (EditText) itemView;editTextSB.append(item.getText().toString());} else if (itemView instanceof RelativeLayout) {DataImageView item = (DataImageView) itemView.findViewById(R.id.edit_imageView);imgUrls.add(item.getAbsolutePath());editTextSB.append(separator);}}data.put("text", editTextSB);data.put("imgUrls", imgUrls);return data;}</span>
遍历LinearLayout中的元素,若为EditText则获取文字信息,若为ImageView,则获取图片地址.
更多的代码实现逻辑就在项目中查找吧.
源码下载
