In the previous article, I introduced how to implement the graffiti function and how to convert graffiti into pictures. This article mainly introduces how to insert image resources in EditText, how to save image resources, and how to load images when clicking on the item.
/ text /
Friends who have seen my notepad project know that the core of my notepad is the SQLite database, and the main control in the "edit page" is EditText.
The realization of the "insert picture function" also mainly depends on these two parts.
First look at the effect:
(Picture process: create a new note -> click the icon in the navigation bar -> get the album picture -> insert a picture -> click the generated item to view the saved picture.)
After reading the effect, let's start to realize it step by step~
/ How to get album pictures /
We can get album pictures through Intent, the code is as follows.
The first line of code Intent.ACTION_GET_CONTENT indicates that we need to obtain content from the device, and using null as a parameter indicates that we want the Android system to automatically select an Activity suitable for this purpose.
The second line of code is used to specify the type of file resource we want to select.
The third line of code is to jump to the Activity and use the PICK_IMAGE constant to mark that the picker Activity has been opened.
private void showImagePicker() {
Intent intent = new Intent(Intent.ACTION_GET_CONTENT, null);
intent.setType("image/*");
startActivityForResult(intent, PICK_IMAGE);
}And the photo we selected will get the corresponding data through the onActivityResult method, the code is as follows.
private static final int PICK_IMAGE = 1;
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == RESULT_OK && requestCode == PICK_IMAGE) {
//此时你就可以对获取到的图片数据data进行操作了
//可以通过data.getData()获取图片的uri资源。
}
}/ How to display the selected picture in EdiText /
After getting the album picture, we must insert it into EditText for display, so how to convert the data in onActivityResult into the picture in EditText?
It is roughly divided into the following steps:
① Convert data to Uri
② Convert Uri to BitMap resource
③ Convert BitMap resource to ImageSpan
④ Get EditText cursor position
⑤Insert ImageSpan to the cursor position through SpannableStringBuilder
Although there are many steps but the amount of code is not very large, I extracted it into a method, as follows.
private void insertImage(Uri selectedImage) {
Bitmap bitmap, reviewBitMap;
try {
//获取的原始图片
bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), selectedImage);
//尺寸会影响展示效果，故此展示预览图为600*600
reviewBitMap = ImageUtils.getBitMapData(bitmap, 600, 600);
ImageSpan span = new ImageSpan(this, reviewBitMap);
Editable editable = mContent.getText();
// 如果光标位置不在开头，则需换行
int selectionStart = mContent.getSelectionStart();
if (selectionStart != 0) {
editable.insert(selectionStart, "\n");
selectionStart++;
}
// 插入 ImageSpan
SpannableStringBuilder builder = new SpannableStringBuilder(" ");
builder.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
editable.insert(selectionStart, builder);
// 再插入一行
editable.insert(selectionStart + 1, "\n");
} catch (IOException e) {
e.printStackTrace();
}
}At this point, the insertion of the picture is complete~
Now only the storage of the image data and the loading of the image when the item is clicked~
/ Storage of picture data & preview of picture content of notes /
As I said at the beginning of the article, the Notepad project is based on the SQLite database, and the storage of image data is of course dependent on data.
Since we use Uri to load pictures, we can just store Uri directly.
First rewrite the insert method in SqliteHelper, the code is as follows.
public boolean insertDate(String userContent, String userTime, String userTitle, Uri imageUrl) {
mSQLiteDatabase = this.getWritableDatabase();//允许写入
ContentValues values = new ContentValues();
values.put(DBUtils.NOTEPAD_CONTENT, userContent);
values.put(DBUtils.NOTEPAD_TIME, userTime);
values.put(DBUtils.NOTEPAD_TITLE, userTitle);
values.put(DBUtils.IMAGE_URL, String.valueOf(imageUrl));//这里~
return mSQLiteDatabase.insert(DBUtils.SQL_TABLE, null, values) > 0;
}Secondly, when you click the submit button on the edit page, update or insert the database (when editing old notes), the screenshot is as follows.
So far, the storage of image data Over ~
As for how to display pictures through Uri after clicking the item, you need to pass NoteMessageBean, we only need to add a new property (String imageUri) to the Bean class, and assign it a value in updateList.
Use the intent to transfer the corresponding data when jumping to the item.
In the data initialization of the "Activity of the edit page", the Uri of the picture in the item can be obtained through the Intent.
Uri imageUri = Uri.parse(intent.getStringExtra("imageUri"));
//获取之后直接使用对应的方法显示图片即可So far, the EditText function has been completed~ Of course, this is a relatively simple and poorly reusable solution. More rich text can be realized by JS or webView. This article is just to give you a direction, there is a mistake The place welcomes all friends to correct me~
Previous articles:
From scratch, realize Notepad APP step by step (1)
From scratch, realize Notepad APP step by step (2)
I will gradually update the extension function and source code in the official account (two or two fairy spirits), and the reply may be a little slower when I am on a business trip recently, please forgive me~ .