Android 打造属于自己的照片选择器
前言
在做第一个项目时照片选择器使用了开源的PhotoPicker
渐渐无法满足需求，就想着打造一款属于自己的照片选择器。
花了一周的时间完成了该项目，其实代码有一大半并非自己写的，在阅读PhotoPicker的代码之后，在该基础上做的修改以满足自己的需求。该项目基于PhotoPicker做的更改，同时参考GalleryPick其开源项目，集成了Ucrop裁剪。
项目已开源到github，各位读者来点Star支持一下吧 传送门：PhotoPicker
正文
先预览一下效果
01.png
02.png
03.png
04.png
再来张gif图
send.gif
circleimage.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();
}
效果图
lookbigimage.gif
自定义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);
}
};
效果图：
ninegridimage.gif
大概就这么多了，有什么问题建议评论见，喜欢的朋友Star一下啦，点赞一下啦，评论支持一下啦~
作者：乘以个六加一
链接：https://www.jianshu.com/p/a6b5831797d0
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
