Skip to content

开始使用

qingmei2 edited this page May 19, 2018 · 30 revisions

1.快速实现

本章节内容旨在使开发者在 5分钟内快速实现 图片选择的需求,如果想获取更详细的代码,请参考sample中的实例代码:

sample_struct

请注意,请先阅读 开发准备 ,确认配置好 依赖权限配置后,即可进行开发。

1.1 打开系统相机和相册

声明一个接口,并进行基础的配置

public interface SystemImagePicker {

    @Gallery  //打开相册
    @AsFile
    Observable<File> openGallery();	

    @Camera   //打开相机
    @AsBitmap
    Observable<File> openCamera();
}

在Activity的onCreate()方法中实例化SystemImagePicker:

 SystemImagePicker imagePicker = new RxImagePicker.Builder()
                .with(this)
                .build()
                .create(SystemImagePicker.class);

在需要的地方使用SystemImagePicker打开相册或相机:

比如在Button的点击监听回调方法中添加如下代码:

imagePicker.openGallery()               //打开系统相册选取图片   
                .subscribe(new Consumer<File>() {
                    @Override
                    public void accept(File file) throws Exception {
                        // 做您想做的,比如将选取的图片展示在ImageView中
                    }
                });

1.2 使用微信主题UI

声明一个接口,并进行基础的配置

public interface WechatImagePicker {

    String KEY_WECHAT_PICKER_ACTIVITY = "key_wechat_picker";

    @AsBitmap
    @Gallery(viewKey = KEY_WECHAT_PICKER_ACTIVITY)
    Observable<Bitmap> openGallery();

    @AsFile
    @Camera
    Single<File> openCamera();
}

在Activity的onCreate()方法中实例化WechatImagePicker:

    WechatImagePicker imagePicker = new RxImagePicker.Builder()
                .with(this)
                .addCustomGallery(
                        WechatImagePicker.KEY_WECHAT_PICKER_ACTIVITY,
                        WechatImagePickerActivity.class,
                        new WechatConfigrationBuilder(MimeType.ofAll(), false)
                                .maxSelectable(9)	//最大可选图片数
                                .spanCount(4)		//每行展示四张图片
                                .countable(false)	//关闭计数模式
                                .theme(R.style.Wechat)	//微信主题
                                .build()
                )
                .build()
                .create(WechatImagePicker.class);

在需要的地方使用WechatImagePicker打开相册或相机:

比如在Button的点击监听回调方法中添加如下代码:

imagePicker.openGallery()               //打开微信相册选取图片   
                .subscribe(new Consumer<Bitmap>() {
                    @Override
                    public void accept(Bitmap bitmap) throws Exception {
                        // 做您想做的,比如将选取的图片展示在ImageView中
                    }
                });

1.3 使用知乎主题UI

声明一个接口,并进行基础的配置

public interface ZhihuImagePicker {

    String KEY_ZHIHU_PICKER_NORMAL = "key_zhihu_picker_theme_normal";
    String KEY_ZHIHU_PICKER_DRACULA = "key_zhihu_picker_theme_dracula";

    @AsBitmap
    @Gallery(viewKey = KEY_ZHIHU_PICKER_NORMAL)		//日间主题
    Observable<Bitmap> openGalleryAsNormal();

    @AsBitmap
    @Gallery(viewKey = KEY_ZHIHU_PICKER_DRACULA)	//夜间主题
    Observable<Bitmap> openGalleryAsDracula();

    @AsFile
    @Camera    //打开相机
    Single<File> openCamera();
}

在Activity的onCreate()方法中实例化ZhihuImagePicker:

ZhihuImagePicker imagePicker = new RxImagePicker.Builder()
                .with(this)
                .addCustomGallery(		//注入日间模式主题的UI
                        ZhihuImagePicker.KEY_ZHIHU_PICKER_NORMAL,
                        ZhihuImagePickerActivity.class,
                        new ZhihuConfigurationBuilder(MimeType.ofAll(), false)
                                .maxSelectable(9)	//最大可选择数量
                                .countable(true)	//可计数
                                .spanCount(4)		//每行图片数量
                                .theme(R.style.Zhihu_Normal)	//日间主题
                                .build()
                )
                .addCustomGallery(		//注入夜间模式主题的UI
                        ZhihuImagePicker.KEY_ZHIHU_PICKER_DRACULA,
                        ZhihuImagePickerActivity.class,
                        new ZhihuConfigurationBuilder(MimeType.ofAll(), false)
                                .spanCount(3)	  //每行图片数量
                                .maxSelectable(1) //最大可选择数量
                                .theme(R.style.Zhihu_Dracula)	//夜间主题
                                .build()
                )
                .build()
                .create(ZhihuImagePicker.class);

在需要的地方使用ZhihuImagePicker打开相册或相机:

比如在Button的点击监听回调方法中添加如下代码:

//打开日间主题相册选取图片,或者调用imagePicker.openGalleryAsDracula()打开夜间主题
imagePicker.openGalleryAsNormal()   
                .subscribe(new Consumer<Bitmap>() {
                    @Override
                    public void accept(Bitmap bitmap) throws Exception {
                        // 做您想做的,比如将选取的图片展示在ImageView中
                    }
                });

1.4 自定义图片选择器

2.进阶使用

设计思想

RxImagePicker最终的目的是在任何一个 Activity 或者 Fragment 中展示任何样式的图片选择UI。

这意味着,RxImagePicker不仅要提供接口,供开发者打开一个 完整的图片选择器界面 的Activity,同时,如果有需求,它也应该可以让开发者在Activity 任意大小的ViewGroup容器中 展示一个图片选择器,比如类似下图中QQ的设计:

screenshot_qq

对于自定义的UI,RxImagePicker提供了两种模式供开发者选择使用:

  • 传一个Activity的class对象,和市面上众多的图片选择需求一样,结果是RxImagePicker会打开对应的Activity,用户选择图片后关闭该Activity,并进行下一步操作。
  • 传一个Fragment对象,这意味着,RxImagePicker会将这个Fragment展示在Activity中的某个ViewGroup中并展示,就像上面的QQ界面一样,当然,您需要将对应的ViewGroup的id 通过 注解的方式 告知RxImagePicker,这个在 行为注解 一节中会讲到。

在这一小节中,我简单阐述了设计RxImagePicker过程中的一些思想,我认为这是有必要的,它可能会对您接下来使用 API时更加游刃有余。

2.1 行为注解

RxImagePicker提供了2个行为注解,分别为@Gallery和@Camera。

@Gallery 将声明该注解所注释的方法 打开相册选择图片
@Camera 将声明该注解所注释的方法 打开相机拍照

请注意,接口的每个方法都 必须添加 行为注解以声明对应的行为,若方法未配置@Gallery或@Camera,RxImagePicker会在运行时抛出异常。

2.1.1 @Gallery

@Gallery 将声明该注解所注释的方法 打开相册选择图片

它有两个参数:

  • viewKey 通过唯一的标识,映射要展示的UI

  • containerViewId 如果该UI需要作为Fragment展示在某个ViewGroup中,需要将ViewGroup对应的id赋值给它

    并非所有的App的图片选择界面UI都是唯一的,比如,它可能有 夜间模式白天模式的两种UI。
    viewKey将会为该方法打上一个唯一的标识,同时,在初始化RxImagePicker时,对应的Activity.class或者Fragment实例都会被打上同样的标识,这样一对一的关系,保证了RxImagePicker对UI的正确展示:

public interface ZhihuImagePicker {

    String KEY_ZHIHU_PICKER_NORMAL = "key_zhihu_picker_theme_normal";
    String KEY_ZHIHU_PICKER_DRACULA = "key_zhihu_picker_theme_dracula";

    @AsBitmap
    @Gallery(viewKey = KEY_ZHIHU_PICKER_NORMAL)
    Observable<Bitmap> openGalleryAsNormal();

    @AsBitmap
    @Gallery(viewKey = KEY_ZHIHU_PICKER_DRACULA)
    Observable<Bitmap> openGalleryAsDracula();
}

请注意,如果没有使用viewKey标记,RxImagePicker会 默认打开系统的相册 选择图片。

若想了解更多,请参考sample中的 ZhihuActivity

同时,如上文中设计思想所说的,当UI需要作为Fragment进行展示时,RxImagePicker需要被告知要展示的ViewGroup控件对应的id,因此需要将id交给containerViewId,以供RxImagePicker进行正确的展示。

2.1.2 @Camera

@Camera 将声明该注解所注释的方法 打开相机拍照

请注意,目前@Camera只提供了调用 系统相机 进行拍照的功能。

@Camera也提供了viewKey和containerViewId的接口,这是基于拓展性添加的接口,目前,配置它们没有任何意义。