从无到有,一步一步实现记事本APP(三)

        在上一篇文章中,我介绍了如何实现涂鸦功能,以及涂鸦如何转换为图片。本篇文章主要介绍如何在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的方式来实现,此文章只是给大家一个方向,有误的地方欢迎各位小伙伴指正~ 

        往期文章:

        从无到有,一步一步实现记事本APP(一)

        从无到有,一步一步实现记事本APP(二)

扩展功能以及源码我会逐渐更新在公众号中(二两仙气儿),最近在出差可能回复会慢一点点,大家见谅~ 。

猜你喜欢

转载自blog.csdn.net/ezsxrtghjmk/article/details/130217522