小編給大家分享一下怎么使用Android實(shí)現(xiàn)微信的圖片選擇器,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
為黃梅等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及黃梅網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、黃梅網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
現(xiàn)在大部分的App都上傳圖片的功能,比如設(shè)置用戶(hù)頭像、聊天發(fā)送圖片、發(fā)表動(dòng)態(tài)、論壇帖子等。上傳圖片需要先從選擇手機(jī)中選擇要上傳的圖片,所以圖片選擇器在App中是很常見(jiàn)的組件,一般的手機(jī)都會(huì)自帶一個(gè)圖片選擇器。不過(guò)很多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è)列表將圖片顯示出來(lái)。
3、選擇圖片。
4、把選中的圖片返回給調(diào)用者。
準(zhǔn)備工作
首先需要導(dǎo)入兩個(gè)第三方庫(kù)。
//圖片加載庫(kù),用于加載圖片 compile 'com.github.bumptech.glide:glide:3.7.0' //圖片縮放庫(kù),用于圖片的預(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 { //沒(méi)有權(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類(lèi),并通過(guò)DataCallback把掃描的結(jié)果返回給調(diào)用者。返回的結(jié)果是一個(gè)文件夾的列表,這是因?yàn)槲覀兊膱D片選擇器需要實(shí)現(xiàn)文件夾切換的功能,所以我把掃描出來(lái)的圖片按文件夾進(jìn)行了拆分。
下面看文件夾實(shí)體類(lèi)Folder 和圖片實(shí)體類(lèi) Image:
/** * 圖片文件夾實(shí)體類(lèi) */ 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í)體類(lèi) */ 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; } }
注意,最核心的代碼來(lái)了:使用ContentProvider掃描手機(jī)中的所有圖片。
public class ImageModel { /** * 從SDCard加載圖片 */ public static void loadImageForSDCard(final Context context, final DataCallback callback) { //由于掃描圖片是耗時(shí)的操作,所以要在子線(xiàn)程處理。 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)); //獲取圖片名稱(chēng) 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ù)圖片路徑,獲取圖片文件夾名稱(chēng) */ 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ī)里的所有圖片了,接下來(lái)就是展示圖片列表。
第二步:展示圖片
這個(gè)非常的簡(jiǎn)單,其實(shí)就是寫(xiě)一個(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)行操作,所以我就直接寫(xiě)在了ImageAdapter類(lèi)里。選中的圖片用一個(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ù)量還沒(méi)有達(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í),把選中的圖片通過(guò)Intent返回給調(diào)用者。
private void confirm() { //因?yàn)閳D片的實(shí)體類(lèi)是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)擊確定,把選中的圖片通過(guò)Intent傳給上一個(gè)Activity。 Intent intent = new Intent(); intent.putStringArrayListExtra(ImageSelectorUtils.SELECT_RESULT, images); setResult(RESULT_OK, intent); //關(guān)閉頁(yè)面 finish(); }
到這里,圖片選擇器的基本現(xiàn)實(shí)思路和主要的功能代碼就介紹完了。在這個(gè)ImageSelector項(xiàng)目中,還有很多其他的知識(shí),比如圖片文件夾切換、手機(jī)橫豎屏切換、圖片預(yù)覽、動(dòng)畫(huà)效果、點(diǎn)擊效果等,這里就不一一介紹了。
以上是“怎么使用Android實(shí)現(xiàn)微信的圖片選擇器”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前標(biāo)題:怎么使用Android實(shí)現(xiàn)微信的圖片選擇器
當(dāng)前地址:http://vcdvsql.cn/article2/pdsgic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、服務(wù)器托管、網(wǎng)站改版、App開(kāi)發(fā)、小程序開(kāi)發(fā)、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)