在上一篇文章中,我介绍了如何实现涂鸦功能,以及涂鸦如何转换为图片。本篇文章主要介绍如何在EditText中插入图片资源、如何保存图片资源、以及如何在点击item时加载出图片。
/ 正文 /
看过我记事本项目的小伙伴都知道,我记事本的核心是SQLite数据库,在“编辑页面”中主要控件则是EditText。
而实现“插入图片功能”也主要依赖这两部分。
先来看下效果:
(图片流程:新建笔记 -> 点击导航栏icon -> 获取相册图片 -> 插入图片 -> 点击生成的item查看已保存图片。)
效果看完了,下面咱们开始一步步实现~
/ 如何获取相册图片 /
获取相册图片我们可以通过Intent来实现,代码如下。
其中第一行代码Intent.ACTION_GET_CONTENT表明我们需要从设备获取内容,使用 null 作为参数表示我们希望让 Android 系统自动选择适合此目的的 Activity。
第二行代码用来指定我们想要选择的文件资源类型。
第三行代码则是跳转Activity并使用 PICK_IMAGE 常量标识已经开启了选择器 Activity。
private void showImagePicker() {
Intent intent = new Intent(Intent.ACTION_GET_CONTENT, null);
intent.setType("image/*");
startActivityForResult(intent, PICK_IMAGE);
}
而我们选则后的照片会通过onActivityResult方法获取到相应数据,代码如下。
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资源。
}
}
/ 如何在EdiText中显示选取的图片 /
获取了相册图片后,我们肯定是要将其插入到EditText中来显示的,那么如何将onActivityResult中的data转换成EditText中的图片呢?
大致分为以下几步:
①将data转换成Uri
②将Uri转换成BitMap资源
③将BitMap资源转换成ImageSpan
④获取EditText光标位置
⑤将ImageSpan通过SpannableStringBuilder插入到光标位置
步骤虽多但是代码量并不是很多,我抽取成了一个方法,如下。
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();
}
}
至此图片的插入就完成了~
现在只剩下图片数据的存储以及点击item时图片的加载了~
/ 图片数据的存储&笔记图片内容预览 /
文章开头我已经说了,记事本项目是以SQLite数据库为核心的,图片数据的存储当然也是依赖数据进行存储。
由于我们加载图片使用的就是Uri,那么我们就直接存储Uri就可以了。
首先在SqliteHelper中重写插入方法,代码如下。
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;
}
其次在点击编辑页面提交按键时,对数据库进行更新或插入(编辑旧笔记时),截图如下。
至此,图片数据的存储Over ~
至于如何在点击item后通过Uri展示图片,则需要通NoteMessageBean,我们只需要为Bean类增加新的属性(String imageUri),并在updateList为其赋值即可。
跳转item时使用intent将对应数据传递即可。
在"编辑页面的Activity"的数据初始化中,通过Intent,获取item中的图片Uri即可。
Uri imageUri = Uri.parse(intent.getStringExtra("imageUri"));
//获取之后直接使用对应的方法显示图片即可
至此在EditText功能就完成了~ 当然,我这种是比较简单且复用性较差的方案,更多的富文本可以尝试JS或者webView的方式来实现,此文章只是给大家一个方向,有误的地方欢迎各位小伙伴指正~
往期文章:
扩展功能以及源码我会逐渐更新在公众号中(二两仙气儿),最近在出差可能回复会慢一点点,大家见谅~ 。