Android實(shí)現(xiàn)微信的圖片選擇器
現(xiàn)在大部分的App都上傳圖片的功能,比如設(shè)置用戶頭像、聊天發(fā)送圖片、發(fā)表動(dòng)態(tài)、論壇帖子等。上傳圖片需要先從選擇手機(jī)中選擇要上傳的圖片,所以圖片選擇器在App中是很常見的組件,一般的手機(jī)都會(huì)自帶一個(gè)圖片選擇器。不過很多App并不喜歡用手機(jī)自帶的選擇器,而是自己實(shí)現(xiàn)一個(gè)圖片選擇器。比如微信的圖片選擇器就做的很好。所以我也仿照微信的樣式和交互效果,自己做了一個(gè)圖片選擇器:ImageSelector。ImageSelector支持圖片的單選、限數(shù)量的多選和不限數(shù)量的多選。支持圖片預(yù)覽和圖片文件夾的切換。項(xiàng)目已經(jīng)上傳到了我的GitHub,歡迎大家下載和使用。
本篇文章我將為大家介紹ImageSelector是如何現(xiàn)實(shí)的。由于ImageSelector的項(xiàng)目代碼比較多,所以這篇文章只講解ImageSelector的實(shí)現(xiàn)思路和分析主要的項(xiàng)目代碼。想要看完整代碼的同學(xué)請(qǐng)到GitHub下載項(xiàng)目。至于ImageSelector的使用,在我的另一篇文章中有
詳細(xì)的介紹:《Android 仿微信的圖片選擇器ImageSelector的使用》 。
先上效果圖:

要實(shí)現(xiàn)一個(gè)圖片選擇器,需要做的主要就是以下幾個(gè)事情:
1、從手機(jī)存儲(chǔ)卡中掃描加載圖片。
2、用一個(gè)列表將圖片顯示出來。
3、選擇圖片。
4、把選中的圖片返回給調(diào)用者。
準(zhǔn)備工作
首先需要導(dǎo)入兩個(gè)第三方庫。
//圖片加載庫,用于加載圖片 compile 'com.github.bumptech.glide:glide:3.7.0' //圖片縮放庫,用于圖片的預(yù)覽 compile 'com.github.chrisbanes:PhotoView:2.0.0'
第一步:從手機(jī)存儲(chǔ)卡中掃描加載圖片
讀取手機(jī)存儲(chǔ)卡需要先申請(qǐng)權(quán)限:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
對(duì)Android 6.0以上的系統(tǒng)做動(dòng)態(tài)權(quán)限處理。
/**
* 檢查權(quán)限并加載SD卡里的圖片。
*/
private void checkPermissionAndLoadImages() {
int hasWriteContactsPermission = ContextCompat.checkSelfPermission(getApplication(),
Manifest.permission.WRITE_EXTERNAL_STORAGE);
if (hasWriteContactsPermission == PackageManager.PERMISSION_GRANTED) {
//有權(quán)限,加載圖片。
loadImageForSDCard();
} else {
//沒有權(quán)限,申請(qǐng)權(quán)限。
ActivityCompat.requestPermissions(ImageSelectorActivity.this,
new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, PERMISSION_REQUEST_CODE);
}
}
/**
* 處理權(quán)限申請(qǐng)的回調(diào)。
*/
@Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
if (requestCode == PERMISSION_REQUEST_CODE) {
if (grantResults.length > 0
&& grantResults[0] == PackageManager.PERMISSION_GRANTED) {
//允許權(quán)限,加載圖片。
loadImageForSDCard();
} else {
//拒絕權(quán)限,彈出提示框。
showExceptionDialog();
}
}
}
接著就是從手機(jī)存儲(chǔ)卡中掃描加載圖片。
/**
* 從SDCard加載圖片。
*/
private void loadImageForSDCard() {
ImageModel.loadImageForSDCard(this, new ImageModel.DataCallback() {
@Override
public void onSuccess(ArrayList<Folder> folders) {
//folders是圖片文件夾的列表,每個(gè)文件夾中都有若干張圖片。
}
});
}
我將掃描手機(jī)存儲(chǔ)卡的操作封裝在ImageModel類,并通過DataCallback把掃描的結(jié)果返回給調(diào)用者。返回的結(jié)果是一個(gè)文件夾的列表,這是因?yàn)槲覀兊膱D片選擇器需要實(shí)現(xiàn)文件夾切換的功能,所以我把掃描出來的圖片按文件夾進(jìn)行了拆分。
下面看文件夾實(shí)體類Folder 和圖片實(shí)體類 Image:
/**
* 圖片文件夾實(shí)體類
*/
public class Folder {
private String name;
private ArrayList<Image> images;
public Folder(String name) {
this.name = name;
}
public Folder(String name, ArrayList<Image> images) {
this.name = name;
this.images = images;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public ArrayList<Image> getImages() {
return images;
}
public void setImages(ArrayList<Image> 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);
}
}
}
/**
*圖片實(shí)體類
*/
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掃描手機(jī)中的所有圖片。
public class ImageModel {
/**
* 從SDCard加載圖片
*/
public static void loadImageForSDCard(final Context context, final DataCallback callback) {
//由于掃描圖片是耗時(shí)的操作,所以要在子線程處理。
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<Image> 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));
//獲取圖片時(shí)間
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();
}
/**
* 把圖片按文件夾拆分,第一個(gè)文件夾保存所有的圖片
*/
private static ArrayList<Folder> splitFolder(ArrayList<Image> images) {
ArrayList<Folder> 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;
}
/**
* 根據(jù)圖片路徑,獲取圖片文件夾名稱
*/
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<Folder> 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<Folder> folders);
}
}
到這里,我們就已經(jīng)拿到了手機(jī)里的所有圖片了,接下來就是展示圖片列表。
第二步:展示圖片
這個(gè)非常的簡單,其實(shí)就是寫一個(gè)圖片列表。
//圖片列表
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<ImageAdapter.ViewHolder> {
private Context mContext;
private ArrayList<Image> mImages;
private LayoutInflater mInflater;
private int mMaxCount;
private boolean isSingle;
/**
* @param maxCount 圖片的最大選擇數(shù)量,小于等于0時(shí),不限數(shù)量,isSingle為false時(shí)才有用。
* @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);
}
}
}
第三步:選擇圖片
點(diǎn)擊選擇圖片,主要是對(duì)圖片列表的ImageAdapter中的item進(jìn)行操作,所以我就直接寫在了ImageAdapter類里。選中的圖片用一個(gè)數(shù)組保存。
//保存選中的圖片
private ArrayList<Image> mSelectImages = new ArrayList<>();
//點(diǎn)擊選中/取消選中圖片
holder.ivSelectIcon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mSelectImages.contains(image)) {
//如果圖片已經(jīng)選中,就取消選中
unSelectImage(image);
setItemSelect(holder, false);
} else if (isSingle) {
//如果是單選,就先清空已經(jīng)選中的圖片,再選中當(dāng)前圖片
clearImageSelect();
selectImage(image);
setItemSelect(holder,true);
} else if (mMaxCount <= 0 || mSelectImages.size() < mMaxCount) {
//如果不限制圖片的選中數(shù)量,或者圖片的選中數(shù)量還沒有達(dá)到最大限制,就直接選中當(dāng)前圖片。
selectImage(image);
setItemSelect(holder, true);
}
}
});
/**
* 選中圖片
*/
private void selectImage(Image image){
mSelectImages.add(image);
}
/**
* 取消選中圖片
*/
private void unSelectImage(Image image){
mSelectImages.remove(image);
}
/**
* 設(shè)置圖片選中和未選中的效果
*/
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);
}
}
第四步:把選中的圖片返回給調(diào)用者
點(diǎn)擊“確定”按鈕時(shí),把選中的圖片通過Intent返回給調(diào)用者。
private void confirm() {
//因?yàn)閳D片的實(shí)體類是Image,而我們返回的是String數(shù)組,所以要進(jìn)行轉(zhuǎn)換。
ArrayList<Image> selectImages = mAdapter.getSelectImages();
ArrayList<String> images = new ArrayList<>();
for (Image image : selectImages) {
images.add(image.getPath());
}
//點(diǎn)擊確定,把選中的圖片通過Intent傳給上一個(gè)Activity。
Intent intent = new Intent();
intent.putStringArrayListExtra(ImageSelectorUtils.SELECT_RESULT, images);
setResult(RESULT_OK, intent);
//關(guān)閉頁面
finish();
}
到這里,圖片選擇器的基本現(xiàn)實(shí)思路和主要的功能代碼就介紹完了。在這個(gè)ImageSelector項(xiàng)目中,還有很多其他的知識(shí),比如圖片文件夾切換、手機(jī)橫豎屏切換、圖片預(yù)覽、動(dòng)畫效果、點(diǎn)擊效果等,這里就不一一介紹了,有興趣的同學(xué)可以去看完整的項(xiàng)目代碼。在項(xiàng)目中,我也給出了很詳細(xì)的代碼注釋,方便大家閱讀。
最后給出ImageSelector的項(xiàng)目地址
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android如何實(shí)現(xiàn)設(shè)備的異顯功能詳解
這篇文章主要給大家介紹了關(guān)于Android如何實(shí)現(xiàn)設(shè)備的異顯功能的相關(guān)資料,這篇文章通過示例代碼介紹的非常詳細(xì),對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
Android table布局開發(fā)實(shí)現(xiàn)簡單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Android table布局開發(fā)實(shí)現(xiàn)簡單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05
Andriod 讀取網(wǎng)絡(luò)圖片實(shí)例代碼解析
Android手機(jī)上,我們經(jīng)常用imageview顯示圖片,通過本文學(xué)習(xí)獲取網(wǎng)絡(luò)圖片并顯示在imageview中,對(duì)android讀取網(wǎng)絡(luò)圖片相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-02-02
Android性能優(yōu)化之利用強(qiáng)大的LeakCanary檢測內(nèi)存泄漏及解決辦法
本篇文章主要介紹了Android性能優(yōu)化之利用LeakCanary檢測內(nèi)存泄漏及解決辦法,有興趣的同學(xué)可以了解一下。2016-11-11
Android實(shí)現(xiàn)邊錄邊播應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)邊錄邊播應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
clipse項(xiàng)目遷移到android studio的方法(圖文最新版)
這篇文章主要介紹了clipse項(xiàng)目遷移到android studio(圖文最新版),需要的朋友可以參考下2015-10-10
Android ListView滑動(dòng)改變標(biāo)題欄背景漸變效果
這篇文章主要為大家詳細(xì)介紹了Android ListView滑動(dòng)改變標(biāo)題欄背景漸變效果,透明轉(zhuǎn)變成不透明,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07

