android 仿微信选取相册_Android 实现一个仿微信的图片选择器
现在大部分的App都上传图片的功能,比如设置用户头像、聊天发送图片、发表动态、论坛帖子等。上传图片需要先从选择手机中选择要上传的图片,所以图片选择器在App中是很常见的组件,一般的手机都会自带一个图片选择器。不过很多App并不喜欢用手机自带的选择器,而是自己实现一个图片选择器。比如微信的图片选择器就做的很好。所以我也仿照微信的样式和交互效果,自己做了一个图片选择器:ImageSelector。ImageSelector支持图片的单选、限数量的多选和不限数量的多选。支持图片预览和图片文件夹的切换。项目已经上传到了我的GitHub,欢迎大家下载和使用。
本篇文章我将为大家介绍ImageSelector是如何现实的。由于ImageSelector的项目代码比较多,所以这篇文章只讲解ImageSelector的实现思路和分析主要的项目代码。想要看完整代码的同学请到GitHub下载项目。至于ImageSelector的使用,在我的另一篇文章中有详细的介绍:《Android 仿微信的图片选择器ImageSelector的使用》。
先上效果图:
相册
文件夹
预览
要实现一个图片选择器,需要做的主要就是以下几个事情:
1、从手机存储卡中扫描加载图片。
2、用一个列表将图片显示出来。
3、选择图片。
4、把选中的图片返回给调用者。
准备工作
首先需要导入两个第三方库。
//图片加载库,用于加载图片
compile 'com.github.bumptech.glide:glide:3.7.0'
//图片缩放库,用于图片的预览
compile 'com.github.chrisbanes:PhotoView:2.0.0'
第一步:从手机存储卡中扫描加载图片
读取手机存储卡需要先申请权限:
对Android 6.0以上的系统做动态权限处理。
/**
* 检查权限并加载SD卡里的图片。
*/
private void checkPermissionAndLoadImages() {
int hasWriteContactsPermission = ContextCompat.checkSelfPermission(getApplication(),
Manifest.permission.WRITE_EXTERNAL_STORAGE);
if (hasWriteContactsPermission == PackageManager.PERMISSION_GRANTED) {
//有权限,加载图片。
loadImageForSDCard();
} else {
//没有权限,申请权限。
ActivityCompat.requestPermissions(ImageSelectorActivity.this,
new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, PERMISSION_REQUEST_CODE);
}
}
/**
* 处理权限申请的回调。
*/
@Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
if (requestCode == PERMISSION_REQUEST_CODE) {
if (grantResults.length > 0
&& grantResults[0] == PackageManager.PERMISSION_GRANTED) {
//允许权限,加载图片。
loadImageForSDCard();
} else {
//拒绝权限,弹出提示框。
showExceptionDialog();
}
}
}
接着就是从手机存储卡中扫描加载图片。
/**
* 从SDCard加载图片。
*/
private void loadImageForSDCard() {
ImageModel.loadImageForSDCard(this, new ImageModel.DataCallback() {
@Override
public void onSuccess(ArrayList folders) {
//folders是图片文件夹的列表,每个文件夹中都有若干张图片。
}
});
}
我将扫描手机存储卡的操作封装在ImageModel类,并通过DataCallback把扫描的结果返回给调用者。返回的结果是一个文件夹的列表,这是因为我们的图片选择器需要实现文件夹切换的功能,所以我把扫描出来的图片按文件夹进行了拆分。
下面看文件夹实体类Folder 和图片实体类 Image:
/**
* 图片文件夹实体类
*/
public class Folder {
private String name;
private ArrayList images;
public Folder(String name) {
this.name = name;
}
public Folder(String name, ArrayList images) {
this.name = name;
this.images = images;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public ArrayList getImages() {
return images;
}
public void setImages(ArrayList images) {
this.images = images;
}
public void addImage(Image image) {
if (image != null && StringUtils.isNotEmptyString(image.getPath())) {
if (images == null) {
images = new ArrayList<>();
}
images.add(image);
}
}
}
/**
*图片实体类
*/
public class Image {
private String path;
private long time;
private String name;
public Image(String path, long time, String name) {
this.path = path;
this.time = time;
this.name = name;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
public long getTime() {
return time;
}
public void setTime(long time) {
this.time = time;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
注意,最核心的代码来了:使用ContentProvider扫描手机中的所有图片。
public class ImageModel {
/**
* 从SDCard加载图片
*/
public static void loadImageForSDCard(final Context context, final DataCallback callback) {
//由于扫描图片是耗时的操作,所以要在子线程处理。
new Thread(new Runnable() {
@Override
public void run() {
//扫描图片
Uri mImageUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
ContentResolver mContentResolver = context.getContentResolver();
Cursor mCursor = mContentResolver.query(mImageUri, new String[]{
MediaStore.Images.Media.DATA,
MediaStore.Images.Media.DISPLAY_NAME,
MediaStore.Images.Media.DATE_ADDED,
MediaStore.Images.Media._ID},
null,
null,
MediaStore.Images.Media.DATE_ADDED);
ArrayList images = new ArrayList<>();
//读取扫描到的图片
while (mCursor.moveToNext()) {
// 获取图片的路径
String path = mCursor.getString(
mCursor.getColumnIndex(MediaStore.Images.Media.DATA));
//获取图片名称
String name = mCursor.getString(
mCursor.getColumnIndex(MediaStore.Images.Media.DISPLAY_NAME));
//获取图片时间
long time = mCursor.getLong(
mCursor.getColumnIndex(MediaStore.Images.Media.DATE_ADDED));
images.add(new Image(path, time, name));
}
mCursor.close();
Collections.reverse(images);
callback.onSuccess(splitFolder(images));
}
}).start();
}
/**
* 把图片按文件夹拆分,第一个文件夹保存所有的图片
*/
private static ArrayList splitFolder(ArrayList images) {
ArrayList folders = new ArrayList<>();
folders.add(new Folder("全部图片", images));
if (images != null && !images.isEmpty()) {
int size = images.size();
for (int i = 0; i < size; i++) {
String path = images.get(i).getPath();
String name = getFolderName(path);
if (StringUtils.isNotEmptyString(name)) {
Folder folder = getFolder(name, folders);
folder.addImage(images.get(i));
}
}
}
return folders;
}
/**
* 根据图片路径,获取图片文件夹名称
*/
private static String getFolderName(String path) {
if (StringUtils.isNotEmptyString(path)) {
String[] strings = path.split(File.separator);
if (strings.length >= 2) {
return strings[strings.length - 2];
}
}
return "";
}
private static Folder getFolder(String name, List folders) {
if (folders != null && !folders.isEmpty()) {
int size = folders.size();
for (int i = 0; i < size; i++) {
Folder folder = folders.get(i);
if (name.equals(folder.getName())) {
return folder;
}
}
}
Folder newFolder = new Folder(name);
folders.add(newFolder);
return newFolder;
}
public interface DataCallback {
void onSuccess(ArrayList folders);
}
}
到这里,我们就已经拿到了手机里的所有图片了,接下来就是展示图片列表。
第二步:展示图片
这个非常的简单,其实就是写一个图片列表。
//图片列表
private RecyclerView rvImage;
// 初始化图片列表
private void initImageList() {
mLayoutManager = new GridLayoutManager(this, 3);
rvImage.setLayoutManager(mLayoutManager);
mAdapter = new ImageAdapter(this, mMaxCount, isSingle);
rvImage.setAdapter(mAdapter);
}
这里的ImageAdapter,就是图片列表的Adapter。
public class ImageAdapter extends RecyclerView.Adapter {
private Context mContext;
private ArrayList mImages;
private LayoutInflater mInflater;
private int mMaxCount;
private boolean isSingle;
/**
* @param maxCount 图片的最大选择数量,小于等于0时,不限数量,isSingle为false时才有用。
* @param isSingle 是否单选
*/
public ImageAdapter(Context context, int maxCount, boolean isSingle) {
mContext = context;
this.mInflater = LayoutInflater.from(mContext);
mMaxCount = maxCount;
this.isSingle = isSingle;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = mInflater.inflate(R.layout.adapter_images_item, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
final Image image = mImages.get(position);
Glide.with(mContext).load(new File(image.getPath()))
.diskCacheStrategy(DiskCacheStrategy.NONE).into(holder.ivImage);
}
@Override
public int getItemCount() {
return mImages == null ? 0 : mImages.size();
}
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView ivImage;
ImageView ivSelectIcon;
ImageView ivMasking;
public ViewHolder(View itemView) {
super(itemView);
ivImage = (ImageView) itemView.findViewById(R.id.iv_image);
ivSelectIcon = (ImageView) itemView.findViewById(R.id.iv_select);
ivMasking = (ImageView) itemView.findViewById(R.id.iv_masking);
}
}
}
第三步:选择图片
点击选择图片,主要是对图片列表的ImageAdapter中的item进行操作,所以我就直接写在了ImageAdapter类里。选中的图片用一个数组保存。
//保存选中的图片
private ArrayList mSelectImages = new ArrayList<>();
//点击选中/取消选中图片
holder.ivSelectIcon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mSelectImages.contains(image)) {
//如果图片已经选中,就取消选中
unSelectImage(image);
setItemSelect(holder, false);
} else if (isSingle) {
//如果是单选,就先清空已经选中的图片,再选中当前图片
clearImageSelect();
selectImage(image);
setItemSelect(holder,true);
} else if (mMaxCount <= 0 || mSelectImages.size() < mMaxCount) {
//如果不限制图片的选中数量,或者图片的选中数量还没有达到最大限制,就直接选中当前图片。
selectImage(image);
setItemSelect(holder, true);
}
}
});
/**
* 选中图片
*/
private void selectImage(Image image){
mSelectImages.add(image);
}
/**
* 取消选中图片
*/
private void unSelectImage(Image image){
mSelectImages.remove(image);
}
/**
* 设置图片选中和未选中的效果
*/
private void setItemSelect(ViewHolder holder, boolean isSelect) {
if (isSelect) {
holder.ivSelectIcon.setImageResource(R.drawable.icon_image_select);
holder.ivMasking.setAlpha(0.5f);
} else {
holder.ivSelectIcon.setImageResource(R.drawable.icon_image_un_select);
holder.ivMasking.setAlpha(0.2f);
}
}
第四步:把选中的图片返回给调用者
点击“确定”按钮时,把选中的图片通过Intent返回给调用者。
private void confirm() {
//因为图片的实体类是Image,而我们返回的是String数组,所以要进行转换。
ArrayList selectImages = mAdapter.getSelectImages();
ArrayList images = new ArrayList<>();
for (Image image : selectImages) {
images.add(image.getPath());
}
//点击确定,把选中的图片通过Intent传给上一个Activity。
Intent intent = new Intent();
intent.putStringArrayListExtra(ImageSelectorUtils.SELECT_RESULT, images);
setResult(RESULT_OK, intent);
//关闭页面
finish();
}
到这里,图片选择器的基本现实思路和主要的功能代码就介绍完了。在这个ImageSelector项目中,还有很多其他的知识,比如图片文件夹切换、手机横竖屏切换、图片预览、动画效果、点击效果等,这里就不一一介绍了,有兴趣的同学可以去看完整的项目代码。在项目中,我也给出了很详细的代码注释,方便大家阅读。
android 仿微信选取相册_Android 实现一个仿微信的图片选择器相关推荐
- android 仿微信选取相册_Android模仿微信选择图片
前言 最近公司需要做一个类似微信那种选择头像和上传图片的功能,本想上github上找的,后来想了想,还是自己做一个,不仅方便以后用(毕竟自己写的修改起来也比较方便),还可以学到一些知识,废话少说,先看 ...
- android 仿微信选取相册_Android 仿微信 相册多图选择器
下载方式 com.sh.zsh.code shphotoselectorlibrary 2.0.9 pom or Gradle: compile 'com.sh.zsh.code:shphotosel ...
- android 仿微信选取相册_Android类似微信图片选择器
很多项目要用到图片选择控件,每次都要写一大堆逻辑.于是基于图片选择组件(PhotoPicker)封装了一个控件PhotoUploadView.方便简易,一键集成,几句代码就可以添加类似微信的图片选择控 ...
- android 仿微信选取相册_Android--选择图片(仿微信发朋友圈)第一篇
这篇博客主要写仿微信朋友圈选择图片发朋友圈.整个功能包括加载图片,显示图片.相册文件夹.预览图片,九宫格显示已经选择好的图片等等,大概会有三篇博客. 效果图 看上面的图,加载图片肯定是异步加载,耗时任 ...
- Android-如何开发一个功能强大的图片选择器
图片选择器是Android开发中会经常用到的一个功能,特别对于社交类的应用,比如头像设置,比如发图片.自然ImagePicker的轮子很多,今天介绍一个功能强大的轮子SImagePicker 介绍 首 ...
- android记账本折线图_Android自定义View - 仿支付宝月账单折线图
前言 支付宝有个查看月账单的功能,最近一直在学习自定义View,于是就尝试着自己实现了一个类似的折线图. 下面是支付宝消费分析功能截图和自己实现的折线效果截图: 支付宝消费分析折线图.jpg 效果1. ...
- android 仿京东地址选择_Android 开发:仿美团地址选择
最近做了这个功能,分享一下,用的是百度地图api,和美团外卖的地址选择界面差不多,也就是可以搜索或者滑动地图展示地址列表给用户选择,看下效果图先. 文章重点 展示地图并定位到"我" ...
- 微信小程序-从零开始制作一个跑步微信小程序
首发地址 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册. 2.注册过程中需要很多认证,有很多认证,比较繁琐,如果暂时只是开发测试,不进行提审.发布的话,只要完成营业执照号填写 ...
- 微信小程序-从零开始制作一个跑步微信小程序 1
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言 我已经把全部代码 ...
最新文章
- scala akka_如何对Scala和Akka HTTP应用程序进行Docker化-简单的方法
- 网站SEO优化、IIS日志分析工具 IISLogViewer V2.0 发布
- Atlas学习手记(5):使用服务端定时控件TimerControl
- zabbix修改时区
- Redis:redis和memcached 比较
- Hello Python程序演练
- java如何改注释_关于Java:更改字符串值的注释
- Cake -- ACM解决方法
- python 面授_5天Python实战营(面授)
- 编写你的第一个Django应用程序
- Pr 入门教程,如何处理图片文件?
- OpenStack,真的要凉了?
- unsatisfied condition: __STDC_VERSION__ = 201112L
- 新浪微博Emoji表情解析
- PLC控制系统设计的基本原则和主要内容
- 如何查找求职简历模板及pdf编辑器去水印
- php随机发牌游戏,JavaScript_javascript实例--教你实现扑克牌洗牌功能,我们一般都会按照顺序把随机 - phpStudy...
- 常用的卫星影像数据查询网址【值得收藏】
- 小白也能懂的 Python 入门指南(1)——Python 的前世今生
- 莱诺和柯南Excel甘特图
热门文章
- 服务器路由链路追踪命令
- 10、《每周一点canvas动画》——移动物体(2)
- bash 括号(小括号,双小括号,中括号,双中括号,大括号)
- c语言实验选择结构程序设计答案,实验2:选择结构程序设计 (答案)
- 2018上海国际工业自动化及机器人展览会
- 【SAP Abap】X档案:SAP ABAP 中 AMDP 简介及实现方法
- 查看html元素,认识html元素
- [译] SwiftUI 官方教程 (五)
- 如何创建高效的Prompt和ChatGPT等大语言模型AI对话
- 荒野行动8月1日服务器维护,荒野行动pc版12月21日更新了怎么进不去游戏 服务器维护到几点才开...