图片选择器的开发与设计

最新推荐文章于 2021-02-20 19:34:38 发布
最新推荐文章于 2021-02-20 19:34:38 发布
阅读量690 收藏 1
点赞数 1
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34258009/article/details/79581756
版权

1.Module介绍

先看效果
这里写图片描述

1.1项目分析

仿照ImagePicker、PhotoPicker等开源框架，将图片选择器作为一个单独的功能模块解耦出来，作为一个Module，之后可被任意项目引用并使用。先合适的地方( Activity | Fragment )创建Intent并启动，并通过onActivityResult得到所选图片的Path。
整体采用Builder模式进行构建，可以清晰的管理参数，层次清晰，增加代码的可读性。功能支持选择是否单选、多选、拍照；是否进行裁剪，使用到开源库cropview进行图片的裁剪；采用策略模式，支持灵活切换图片加载框架；使用photoview预览大图、手势缩放等等…

1.2如何使用

唤起相册：

new ImagePicker()
        .pickType(ImagePickType.SINGLE)
        .needCamera(true)
        .maxNum(9)
        .displayer(new GlideImagePickerDisplayer())
        .doCrop(1, 1, 0, 0)
        .start(UploadAvatarActivity.this, REQUEST_CODE);

得到数据：

if (requestCode == REQUEST_CODE_UPDATE_HEAD && resultCode == RESULT_OK && data != null) {
    List<ImageBean> resultList = data.getParcelableArrayListExtra(ImagePicker.INTENT_RESULT_DATA);
    for(ImageBean imageBean : resultList) {
            String path = imageBean.getImagePath();
    }
}

1.3方法说明

  • ImagePicker pickType(ImagePickType mode) 设置选择模式
    模式：ONLY_CAMERA 拍照、 SINGLE 单选模式、 MULTI 多选模式

  • ImagePicker needCamera(boolean b) 是否需要在界面中显示相机入口

  • ImagePicker maxNum(int max) 设置图片选择的最大数量
    注：拍照和单选都是1，即使设置也无效

  • ImagePicker displayer(IImagePickerDisplayer displayer) 设置图片加载器
    注：默认为Glide加载

  • ImagePicker doCrop(int aspectX, int aspectY, int outputX, int outputY) 图片裁剪
    参数说明:aspectX、aspectY 裁剪框宽高
    outputX、outputY图片输出缩放宽高

  • void start(Activity activity, int requestCode) 发起选择图片

  • void start(Fragment fragment, int requestCode) 兼容Fragment

1.4目录结构分析

视图层

类名描述
ImageDataActivity主图片展示页面，ViewStub进行视图管理，监听文件夹列表改变刷新数据等
ImagePagerActivity照片的预览页面
ImageCropActivity裁剪页
ImageFloderPop文件夹列表页，采用PopupWindow设计，灵活调整位置

data数据层

类名描述
ImageContants常量类，包含各个页面跳转的请求码、数据传递键值、文件名前缀等
ImageDataModel图片数据层，图片、文件夹等数据管理类
ImageBean图片实体类
ImageFloderBean图片文件夹实体类
ImagePickerCropParams图片裁剪各参数
ImagePickerOptions图片选择的参数，调用start()方法时，由此类的具体事例进行构建

2.Module目录结构

这里写图片描述

3.部分代码设计

3.1Builder设计


/**
 * 通过build模式构造
 *
 * @author yangjiaming
 */

public class ImagePicker {
    /**
     * 返回结果中包含图片数据的Intent的键值
     */
    public static final String INTENT_RESULT_DATA = "ImageBeans";

    private ImagePickerOptions mOptions;

    public ImagePicker() {
        mOptions = new ImagePickerOptions();
    }

    /**
     * 设置模式
     *
     * @param mode 拍照、多选、单选
     */
    public ImagePicker pickType(ImagePickType mode) {
        mOptions.setType(mode);
        return this;
    }

    /**
     * 设置多选
     *
     * @param maxNum 最大数
     */
    public ImagePicker maxNum(int maxNum) {
        mOptions.setMaxNum(maxNum);
        return this;
    }

    /**
     * 是否需要拍照入口
     */
    public ImagePicker needCamera(boolean b) {
        mOptions.setNeedCamera(b);
        return this;
    }

    public ImagePicker cachePath(String path) {
        mOptions.setCachePath(path);
        return this;
    }

    public ImagePicker doCrop(ImagePickerCropParams cropParams) {
        mOptions.setNeedCrop(cropParams != null);
        mOptions.setCropParams(cropParams);
        return this;
    }

    public ImagePicker doCrop(int aspectX, int aspectY, int outputX, int outputY) {
        mOptions.setNeedCrop(true);
        mOptions.setCropParams(new ImagePickerCropParams(aspectX, aspectY, outputX, outputY));
        return this;
    }

    public ImagePicker displayer(IImagePickerDisplayer displayer) {
        ImageDataModel.getInstance().setDisplayer(displayer);
        return this;
    }

    /**
     * 发起选择图片
     *
     * @param activity    发起的Activity
     * @param requestCode 请求码
     */
    public void start(Activity activity, int requestCode) {
        Intent intent = new Intent(activity, ImageDataActivity.class);
        intent.putExtra(ImageContants.INTENT_KEY_OPTIONS, mOptions);
        activity.startActivityForResult(intent, requestCode);
    }

    /**
     * 发起选择图片
     *
     * @param fragment    发起的Fragment
     * @param requestCode 请求码
     */
    public void start(Fragment fragment, int requestCode) {
        Intent intent = new Intent(fragment.getActivity(), ImageDataActivity.class);
        intent.putExtra(ImageContants.INTENT_KEY_OPTIONS, mOptions);
        fragment.startActivityForResult(intent, requestCode);
    }
}

3.2拍照(7.0适配)

/**
 * 拍照
 *
 * @param activity    发起拍照的帮助类
 * @param requestCode 请求码
 * @param cachePath   缓存地址
 * @return 拍照后图片地址
 */
public static String takePhoto(Activity activity, int requestCode, String cachePath) {
    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    intent.setAction(MediaStore.ACTION_IMAGE_CAPTURE);
    //自定义缓存路径
    File tempFile = getPhotoTempFile(cachePath);
    try {
        // 7.0以上需要适配StickMode
        if (Build.VERSION.SDK_INT >= 24) {
            Uri imageUri = FileProvider.getUriForFile(activity, ImagePickerFileProvider.getAuthorities(activity), tempFile);
            // 添加这一句表示对目标应用临时授权该Uri所代表的文件
            intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
            // 将拍取的照片保存到指定URI
            intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
            activity.startActivityForResult(intent, requestCode);
        } else {
            // 将拍取的照片保存到指定URI
            intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(tempFile));
            activity.startActivityForResult(intent, requestCode);
        }
        return tempFile.getAbsolutePath();
    } catch (Exception e) {
        Toast.makeText(activity, R.string.error_can_not_takephoto, Toast.LENGTH_SHORT).show();
        return null;
    }
}

3.3内容提供者获取照片

// 得到一个游标
ContentResolver cr = context.getContentResolver();
Cursor cur = cr.query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, null, null, null);

if (cur != null && cur.moveToFirst()) {
    // 图片总数
    allImgFloder.setNum(cur.getCount());

    // 获取指定列的索引
    int imageIDIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media._ID);
    int imagePathIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
    int imageModifyIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media.DATE_MODIFIED);
    int imageWidthIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media.WIDTH);
    int imageHeightIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media.HEIGHT);
    int floderIdIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media.BUCKET_ID);
    int floderNameIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media.BUCKET_DISPLAY_NAME);

    do {
        String imageId = cur.getString(imageIDIndex);
        String imagePath = cur.getString(imagePathIndex);
        String lastModify = cur.getString(imageModifyIndex);
        String width = cur.getString(imageWidthIndex);
        String height = cur.getString(imageHeightIndex);
        String floderId = cur.getString(floderIdIndex);
        String floderName = cur.getString(floderNameIndex);

        if (new File(imagePath).exists()) {
            //创建图片对象
            ImageBean imageBean = new ImageBean();
            imageBean.setImageId(imageId);
            imageBean.setImagePath(imagePath);
            imageBean.setLastModified(ImagePickerComUtils.isNotEmpty(lastModify) ? Long.valueOf(lastModify) : 0);
            imageBean.setWidth(ImagePickerComUtils.isNotEmpty(width) ? Integer.valueOf(width) : 0);
            imageBean.setHeight(ImagePickerComUtils.isNotEmpty(height) ? Integer.valueOf(height) : 0);
            imageBean.setFloderId(floderId);
            mAllImgList.add(imageBean);
            //更新文件夹对象
            ImageFloderBean floderBean;
            if (floderMap.containsKey(floderId)) {
                floderBean = floderMap.get(floderId);
            } else {
                floderBean = new ImageFloderBean(floderId, floderName);
            }
            floderBean.setFirstImgPath(imagePath);
            floderBean.gainNum();
            floderMap.put(floderId, floderBean);
        }

    } while (cur.moveToNext());
    cur.close();
}

源码下载

优秀开源项目

[1]ImagePicker https://github.com/Vanish136/ImagePicker
[2]PictureSelector https://github.com/LuckSiege/PictureSelector
[3]ImagePicker https://github.com/jeasonlzy/ImagePicker
[4]TakePhoto https://github.com/crazycodeboy/TakePhoto
[5]PhotoView https://github.com/chrisbanes/PhotoView
[6]cropview https://github.com/oginotihiro/cropview
[7]大杂烩 https://github.com/AbrahamCaiJin/CommonUILibrary/blob/master/README.md

图片选择控件
09-11
图片选择控件，支持单个图片的选择和裁剪，多个图片同时的选择
设计一个图片选择器（上篇）
chends
09-02 259
在项目的开发过程中，选择图片是非常常用的功能，例如选择头像功能，因为是单图选择一般都是使用系统图片选择器；而例如反馈，评论，发布信息等需要选择多张图片的场景使用系统选择器就不再适合了。 准备工作 访问图片需要添加存储卡权限，在6.0之上还需要实现运行时权限的申请（参考官方文档：https://developer.android.com/training/permissions/requesti...
图片选择器
白七辰的博客
06-13 423
由于项目中需要用到图片多项选择，所以研究了两个图片选择器，在此mark一下， 1.CTAssetsPickerController是很早的选择器，可作为参考； 贴上现在的地址：https://github.com/chiunam/CTAssetsPickerController，因为没有配置好，我没有打开 下边的是13年的demo看了还不错http://download.csdn.net
选择图片
QBqiaoba的博客
05-27 1450
选择图片
java图形图片选择应用程序
boylufeng的专栏
04-19 834
import java.awt.EventQueue; import javax.swing.JFrame; public class ImageViewer {     public static void main(String[] args) {         EventQueue.invokeLater(new Runnable(){             pub
仿微信图片选择器（Android Studio版）
10-27
【标题】"仿微信图片选择器（Android Studio版）"是一个专门为Android应用开发者设计的开源项目，它旨在帮助开发者在自己的应用中实现类似微信的图片选择功能。这个项目基于Android Studio开发，使得开发者可以轻松...
Android 超高仿微信图片选择器完整实例源码下载
10-12
在Android开发中，创建一个与微信图片选择器类似的组件是一个常见的需求，这涉及到用户界面设计、图片处理、文件管理等多个方面。本实例源码提供了一个完整的解决方案，旨在帮助开发者实现类似微信的图片选择功能。...
Android仿微信图片选择器
11-08
总的来说，实现"Android仿微信图片选择器"需要掌握Android的基本组件和API，理解文件系统操作，熟悉图像处理，以及具备良好的UI设计和用户体验意识。这个过程涉及到的知识点广泛且深入，对于Android开发者来说是一个...
Mulit-Image-Selector MultiImageSelector eclipse版 仿微信图片选择器
04-06
4. **仿微信体验**：设计风格和交互方式贴近微信的图片选择器，提供一致且熟悉的用户体验，增加用户满意度。 **使用步骤：** 1. **导入库**：将`multi-image-selector`项目导入到Eclipse的工作空间中，将其作为...
Android 照片选择器 照片选择器 图片预览 拍照
11-30
总的来说，"Android照片选择器"是一个功能完备的图片选择解决方案，它简化了在Android应用中实现照片选择和预览的流程，同时考虑到了相机拍照的集成和权限管理，使得开发者能够更专注于应用的核心业务逻辑。...
图片选择 调用系统相册
04-24
调用系统相册选择图片并显示图片，Android studio 项目
FragmentTabHostTwoImplementions:底部导航栏的两种实现（通过FragmentTabHost + Fragment实现），主要功能包括：FragmentTabHost的使用、图片选择器、文字选择器、沉浸式状态栏、带图片的底部导航栏等。博客地址：https
04-30
FragmentTabHostTwoImplementions Android 底部导航栏的两种实现（通过FragmentTabHost + Fragment实现），主要功能包括：FragmentTabHost的使用、图片选择器、文字选择器、沉浸式状态栏、带图片的底部导航栏等。项目博客地址：个人博客地址：效果图： 简单说明（详细描述见博客、源码）：    1.页面布局；   2.创建多个图片选择器；   3.创建一个文字选择器；   4.创建底部导航栏Tab的布局文件：   5.创建多个Fragment（继承v4包下的Fragment）：   6.创建FragmentTabHost的枚举Tab：   3.初始化FragmentTabHost；
A_jquery+select框图片选择器点击图片给表单select框赋值Java实用源码整理learns
08-24
A_jquery+select框图片选择器点击图片给表单select框赋值Java实用源码整理learns
从相册选择图片
丿灬安之若死
04-15 670
case R.id.iv_driving_license: //点击打开系统的相册 makePhoto(XINGSHIZHENG); break; private void makePhoto(int code) { intent = new Intent();
android图片选择
小小小码农
03-08 395
图片选择功能基本都有吧 坑也很多记录一下。android 打开照相机 String outFileFolder = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM).getAbsolutePath(); String outFilePath = getNowDateTime("yyyy
关于前端选择器设计原理与实现
weixin_30333885的博客
07-28 223
1 选择器的概念 选择器其实是一种较小数据源，供我们选择参数值使用，同时提供参数让选择器回显。选择器的表现形式多种多样，可以是模态弹出框，也可以是非模态扁平化弹出层。如我们常见的下拉选择器，下拉树形选择器 地址选择器。表现形式多种多样 2 选择器形式分类 既然选择器是提供一个数据源被用户选择，和回显用户选择的数据项，那么我们可以知道以下几点： 第一：被选中的...
设计一个图片选择器（下篇）
chends
09-12 242
在前两篇中已经完成了数据的展示，就剩下图片显示功能。可以自己写图片加载库，或者使用当前使用比较广泛的图片加载库例如Picasso，Glide或Fresco。自己写的话还是比较麻烦，需要处理内存管理，性能，图片处理等方面，而且如gif等动图就无法加载。选择库的话Picasso有些弱了，Fresco又比较大 ，暂时就用Glide为例来处理。 缩略图的加载 图片选择页面，文件夹列表以及媒体文件的列表...
java 选择图片_java图形图片选择应用程序
weixin_32236693的博客
02-20 421
import java.awt.EventQueue;import javax.swing.JFrame;public class ImageViewer {public static void main(String[] args) {EventQueue.invokeLater(new Runnable(){public void run(){JFrame frame = new ImageV...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值