Android 打造属于自己的照片选择器

前言

在做第一个项目时照片选择器使用了开源的PhotoPicker
渐渐无法满足需求，就想着打造一款属于自己的照片选择器。

花了一周的时间完成了该项目，其实代码有一大半并非自己写的，在阅读PhotoPicker的代码之后，在该基础上做的修改以满足自己的需求。该项目基于PhotoPicker做的更改，同时参考GalleryPick其开源项目，集成了Ucrop裁剪。

项目已开源到github，各位读者来点Star支持一下吧 传送门：PhotoPicker

正文

先预览一下效果

再来张gif图

PhotoPicker功能介绍

• 自定义图片加载方式
• 图片单选、多选
• 图片预览
• 自定义主题颜色
• 集成Ucrop裁剪

版本更新

• 还没有...

使用说明：

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
        jcenter()
    }
}

在APP目录下的build.gradle中添加依赖

    compile 'com.github.yudu233:PhotoPicker:1.0.0'

照片选择器配置

new PhotoPickConfig.Builder(this)
        .imageLoader(new GlideImageLoader())        //图片加载方式（必须）
        .showCamera(true)                           //是否显示拍照按钮（默认false）
        .clipPhoto(false)                           //是否裁剪图片（默认false）
        .clipCircle(true)                           //裁剪方式（默认矩形）
        .maxPickSize(9)                             //最多可选择图片个数（默认9张）
        .pickMode(PhotoPickConfig.MODE_PICK_MORE)   //手动设置照片多选还是单选（1单选2多选）
        .spanCount(3)                               //手动设置GridView列数（默认3列）
        .build();

AndroidManifest.xml 配置

        <activity
            android:name=".ui.PhotoPickActivity"
            android:theme="@style/PhoAppTheme.AppTheme" />

        <activity
            android:name=".ui.PhotoPreviewActivity"
            android:theme="@style/PhoAppTheme.AppTheme" />

        <activity
            android:name="com.yalantis.ucrop.UCropActivity"
            android:screenOrientation="portrait"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

        <activity android:name=".lookBigImage.ViewBigImageActivity"
                  android:screenOrientation="portrait"
                  android:theme="@style/Theme.AppCompat.Light.NoActionBar" />

配置说明

imageLoader(new GlideImageLoader()) //图片加载方式
图片加载方式可以自定义支持Glide、Piscasso、Fresco

clipCircle(true) //裁剪方式（默认矩形）
当打开裁剪功能时可选择裁剪方式，默认为矩形，设置为true时裁剪方式为圆形，适用于设置用户头像。
这里裁剪功能使用了开源的uCrop，暂时还未实现可自定义。

其他相关配置就不做过多介绍了，使用起来很方便，源码阅读起来也很简单
完全可以自己修改成自己需要的样子。

自定义主题颜色，同步App主题

    在Application里初始化PhotoPick
    //默认颜色：橘色android.R.color.holo_red_light
    PhotoPick.init(getApplicationContext());
    //自定义主题颜色
    PhotoPick.init(context, android.R.color.holo_red_light);

Activity 回调

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (resultCode != RESULT_OK) return;
        switch (requestCode) {
            case PhotoPickConfig.PICK_REQUEST_CODE:
                //如果是裁剪返回一张就不加入集合了所以这里多了判断
                if (PhotoPickConfig.photoPickBean.isClipPhoto()){
                    Uri resultUri = Uri.parse(data.getStringExtra(PhotoPickConfig.EXTRA_CLIP_PHOTO));
                    //圆形图片加载
                    Glide.with(MainActivity.this).load(resultUri)
                            .transform(new GlideCircleTransform(this))
                            .into(mPic);
                }else {
                    ArrayList<String> photoLists = data.getStringArrayListExtra(PhotoPickConfig.EXTRA_STRING_ARRAYLIST);
                    if (photoLists != null && !photoLists.isEmpty()) {
                        for (int i = 0; i < photoLists.size(); i++)
                            if (mImagePaths.size() < 9)
                                mImagePaths.add(photoLists.get(i));
                    }
                    mAddPicture.setPaths(mImagePaths);
                }
                break;
        }
    }

这里同时给大家展示仿微信发布动态，九宫格图片展示，查看大图。

自定义viewGroup仿微信发布动态 AddPicLayout

<rain.coder.photopicker.show.AddPicLayout
   android:visibility="gone"
   android:id="@+id/addPicture"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:child_padding="5dp"
   app:row_size="4"/>

    //layout -> res -> values -> attrs下添加
    <declare-styleable name="addPic">
        <attr name="row_size" format="integer" />        //每行最大显示个数
        <attr name="max_size" format="integer" />        //最多显示个数
        <attr name="child_padding" format="dimension" />    //每张图片之间的间距
    </declare-styleable>

    //添加监听
    mAddPicture.setOnPreviewListener(this);

    //图片预览
    // TODO: 2017/5/4 0004 发布动态选择照片一般要有删除照片的选择还未实现
    @Override
    public void onPreview(int pos, boolean showDelete) {
        Bundle bundle = new Bundle();
        bundle.putInt("select", 2);
        bundle.putInt("code", pos);
        bundle.putStringArrayList("image_uri", mImagePaths);
        Intent intent = new Intent(MainActivity.this, ViewBigImageActivity.class);
        intent.putExtras(bundle);
        startActivity(intent);
    }

    //照片选择
    @Override
    public void onPick() {
        new PhotoPickConfig.Builder(this)
                .imageLoader(new GlideImageLoader())
                .showCamera(true)
                .maxPickSize(9)
                .build();
    }

效果图

自定义viewGroup九宫格图片展示 NineGridImageView
这是github开源的，所以我不介绍了，作者讲的很详细
传送门：第一个开源控件：NineGridImageView（九宫格图片控件）

 <rain.coder.photopicker.NineGridImageView.NineGridImageView
      android:visibility="gone"
      android:id="@+id/ngl_images"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:imgGap="5dp"
      app:maxSize="9"
      app:showStyle="grid"
      app:singleImgSize="160dp"/>

    //layout -> res -> values -> attrs下添加
    <declare-styleable name="NineGridImageView">
        <attr name="singleImgSize" format="dimension" />
        <attr name="imgGap" format="dimension" />
        <attr name="maxSize" format="integer" />
        <attr name="showStyle" format="enum">
            <enum name="grid" value="0" />
            <enum name="fill" value="1" />
        </attr>
    </declare-styleable>

    private void showNineGridImage() {
        NineGridImageView nineGridImageView = (NineGridImageView) findViewById(R.id.ngl_images);
        nineGridImageView.setVisibility(View.VISIBLE);
        nineGridImageView.setAdapter(mGridImageViewAdapter);
        nineGridImageView.setImagesData(images);
    }

    private NineGridImageViewAdapter<String> mGridImageViewAdapter = new NineGridImageViewAdapter<String>() {
        @Override
        protected void onDisplayImage(Context context, ImageView imageView, String s) {
            //图片展示
            Glide.with(MainActivity.this).load(s).into(imageView);
        }

        @Override
        protected ImageView generateImageView(Context context) {
            return super.generateImageView(context);
        }

        @Override
        protected void onItemImageClick(Context context, ImageView imageView, int index, List<String> list) {
            Bundle bundle = new Bundle();
            bundle.putInt("select", 2);
            bundle.putInt("code", index);
            bundle.putStringArrayList("image_uri", images);
            Intent intent = new Intent(MainActivity.this, ViewBigImageActivity.class);
            intent.putExtras(bundle);
            startActivity(intent);
        }
    };

效果图：

大概就这么多了，有什么问题建议评论见，喜欢的朋友Star一下啦，点赞一下啦，评论支持一下啦~