在比較潮流的App中,我們經常看到富文本的身影,能支援圖文混排,其實圖文混排不是那麼難,這段時間由于項目的需要,我自己實作了圖文混排,即能支援插入圖排,又可以編輯文本。其實原理很簡單,把ImageView跟EditText動态加入一個layout容器裡面,然後根據最近的焦點來添加view,具體請看我的view,裡面已經注釋很清楚了。
public class RichTextView extends ScrollView {
private static final int EDIT_PADDING = ; // edittext正常padding是10dp
private int viewTagIndex = ; // 新生的view都會打一個tag,對每個view來說,這個tag是唯一的。
private LinearLayout allLayout; // 這個是所有子view的容器,scrollView内部的唯一一個ViewGroup
private LayoutInflater inflater;
private int editNormalPadding = ; //
public RichTextView(Context context) {
this(context, null);
}
public RichTextView(Context context, AttributeSet attrs) {
this(context, attrs, );
}
public RichTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
inflater = LayoutInflater.from(context);
// 1. 初始化allLayout
allLayout = new LinearLayout(context);
allLayout.setOrientation(LinearLayout.VERTICAL);
//allLayout.setBackgroundColor(Color.WHITE);//去掉背景
LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT);
allLayout.setPadding(,,,);//設定間距,防止生成圖檔時文字太靠邊
addView(allLayout, layoutParams);
LinearLayout.LayoutParams firstEditParam = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
//editNormalPadding = dip2px(EDIT_PADDING);
TextView firstText = createTextView("沒有内容", dip2px(context, EDIT_PADDING));
allLayout.addView(firstText, firstEditParam);
}
public int dip2px(Context context, float dipValue) {
float m = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * m + f);
}
/**
* 清除所有的view
*/
public void clearAllLayout(){
allLayout.removeAllViews();
}
/**
* 獲得最後一個子view的位置
* @return
*/
public int getLastIndex(){
int lastEditIndex = allLayout.getChildCount();
return lastEditIndex;
}
/**
* 生成文本輸入框
*/
public TextView createTextView(String hint, int paddingTop) {
TextView textView = (TextView) inflater.inflate(R.layout.rich_textview, null);
textView.setTag(viewTagIndex++);
textView.setPadding(editNormalPadding, paddingTop, editNormalPadding, paddingTop);
textView.setHint(hint);
return textView;
}
/**
* 生成圖檔View
*/
private RelativeLayout createImageLayout() {
RelativeLayout layout = (RelativeLayout) inflater.inflate(
R.layout.edit_imageview, null);
layout.setTag(viewTagIndex++);
View closeView = layout.findViewById(R.id.image_close);
closeView.setVisibility(GONE);
return layout;
}
/**
* 在特定位置插入EditText
*
* @param index
* 位置
* @param editStr
* EditText顯示的文字
*/
public void addTextViewAtIndex(final int index, CharSequence editStr) {
TextView textView = createTextView("", EDIT_PADDING);
textView.setText(editStr);
allLayout.addView(textView, index);
}
/**
* 在特定位置添加ImageView
*/
public void addImageViewAtIndex(final int index, String imagePath) {
Bitmap bmp = BitmapFactory.decodeFile(imagePath);
final RelativeLayout imageLayout = createImageLayout();
DataImageView imageView = (DataImageView) imageLayout.findViewById(R.id.edit_imageView);
Glide.with(getContext()).load(imagePath).crossFade().centerCrop().into(imageView);
//imageView.setImageBitmap(bmp);//這裡改用Glide加載圖檔
//imageView.setBitmap(bmp);//這句去掉,保留下面的圖檔位址即可,優化圖檔占用
imageView.setAbsolutePath(imagePath);
// 調整imageView的高度
int imageHeight = allLayout.getWidth() * bmp.getHeight() / bmp.getWidth();
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT, imageHeight);
lp.bottomMargin = ;
imageView.setLayoutParams(lp);
allLayout.addView(imageLayout, index);
}
/**
* 根據view的寬度,動态縮放bitmap尺寸
*
* @param width
* view的寬度
*/
public Bitmap getScaledBitmap(String filePath, int width) {
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeFile(filePath, options);
int sampleSize = options.outWidth > width ? options.outWidth / width
+ : ;
options.inJustDecodeBounds = false;
options.inSampleSize = sampleSize;
return BitmapFactory.decodeFile(filePath, options);
}
}