Android 圖片混排富文本編輯器控件

概述

一個Android 圖片混排富文本編輯器控件（仿興趣部落）

詳細

代碼下載：http://www.demodashi.com/demo/12032.html

一、一個Android 圖片混排富文本編輯器控件（仿興趣部落）

1.1 圖片混排富文本控件

是一種圖片和文字混合在一起的控件，文本之間可以插入圖片，類似於網頁的排版樣式。

1.2 該控件主要是仿興趣部落的效果，實現原理主要基於RecyclerView方案實現的。

 

二、演示效果圖

演示效果圖如下：

 

三、使用方法

3.1 首先初始化該控件：

在xml布局文件中和Activity類中聲明和定義 該控件：

<com.czm.xcricheditor.XCRichEditor 
    android:id="@+id/richEditor" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingTop="10dp" 
    android:layout_below="@id/tv_header" 
    android:layout_above="@id/rl_action" 
    android:paddingBottom="10dp"/>

// 聲明定義控件
private XCRichEditor mRichEditor

 

3.2 插入/追加 圖片或者文本內容：

//插入添加圖片或者文本到控件中
List<LocalImageHelper.LocalFile> files = LocalImageHelper.getInstance().getCheckedItems();
Log.e("czm","file size="+files.size());
List<EditItem> items = new ArrayList<>();
for (int i = 0; i < files.size(); i++) {
    Log.e("czm","file uri="+files.get(i).getOriginalUri());
    Log.e("czm","file getThumbnailUri="+files.get(i).getThumbnailUri());
    EditItem item = new EditItem();
    item.setUri(Uri.parse(files.get(i).getOriginalUri()));
    item.setType(1);
    item.setContent(files.get(i).getOriginalUri());
    items.add(item);
     }
 mRichEditor.addImage(items);

3.3完整使用方法：

private XCRichEditor mRichEditor;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Fresco.initialize(this);
    findViewById(R.id.add_pic).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            addPic();
        }
    });
    mRichEditor = (XCRichEditor) findViewById(R.id.richEditor);
}

private void addPic() {
    Intent intent = new Intent(MainActivity.this, LocalAlbum.class);
    startActivityForResult(intent, ImageUtils.REQUEST_CODE_GETIMAGE_BYCROP);
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    Log.e("czm","requestCode="+requestCode);
    

    switch (requestCode) {
        case ImageUtils.REQUEST_CODE_GETIMAGE_BYCROP:
            if (LocalImageHelper.getInstance().isResultOk()) {
                LocalImageHelper.getInstance().setResultOk(false);
                //獲取選中的圖片
                List<LocalImageHelper.LocalFile> files = LocalImageHelper.getInstance().getCheckedItems();
                Log.e("czm","file size="+files.size());
                List<EditItem> items = new ArrayList<>();
                for (int i = 0; i < files.size(); i++) {
                    Log.e("czm","file uri="+files.get(i).getOriginalUri());
                    Log.e("czm","file getThumbnailUri="+files.get(i).getThumbnailUri());
                    EditItem item = new EditItem();
                    item.setUri(Uri.parse(files.get(i).getOriginalUri()));
                    item.setType(1);
                    item.setContent(files.get(i).getOriginalUri());
                    items.add(item);
                }
                mRichEditor.addImage(items);
                //清空選中的圖片
                files.clear();
                //設置當前選中的圖片數量
                LocalImageHelper.getInstance().setCurrentSize(files.size());
            }
            //清空選中的圖片
            LocalImageHelper.getInstance().getCheckedItems().clear();
            break;
        default:
            break;
    }
}

四、文件目錄截圖

 

代碼下載：http://www.demodashi.com/demo/12032.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權