Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android仿QQ、新浪相冊的實現

Android仿QQ、新浪相冊的實現

編輯:關於Android編程

在移動應用中,很多時候都會用到圖片選擇、圖片裁剪等功能。最近我也在准備一個開源的相冊項目,以方便以後開發應用的時候使用,也盡可能的方便需要的人。一個完整的相冊,應該包含相冊列表、圖片列表、圖片的單選和多選、圖片的裁剪、拍照、多選圖片的大圖預覽等功能。這也是我這個項目將要包含的功能。在本篇博客中,將會講述下我在這個項目中相冊列表和圖片列表的大致實現。

實現效果

結合幾個常用的APP中的相冊效果,當前項目中已經實現了一些基本的功能和UI,在後續完善的過程中還會有所變動。項目在Github上開源,歡迎fork和star。先展示實現的效果(後面會增加拍照功能):
單選效果 單選未選擇時的效果 單選已選擇的效果

功能分析

在實現相冊功能之前,我們先需要明確它的邏輯。參照QQ、新浪、微博這中巨頭級的APP,當我們需要用選擇圖片時,會先打開相冊,獲取到最新的照片列表。然後點擊一個按鈕可以展開相冊列表,點擊列表內容,可以切換相冊,刷新當前照片列表中的內容。而且選擇這篇的時候,會有單選、多選、單選並裁剪等情況,多選的時候還要出現選擇效果和指示器等,單選的時候如果需要裁剪則進入裁剪頁,不裁剪則默認確定選擇,(拍照功能在後續博客中再說明)。
這樣,我們就可以明確我們需要實現的功能有:

1.獲取手機中的最新圖片
2.獲取手機中的相冊列表
3.獲取制定相冊中的所有圖片
4.展示圖片和相冊
5.多圖選擇時需要有選擇效果和指示器
6.單選裁剪時需要用到裁剪功能

另外,掃描手機中的圖片也是一個相對耗時的工作,所以這個工作還需要主要避免放到主線程中。

准備數據

為了使用方便,我們可以將相冊列表的查詢、制定相冊的查詢、最新圖片的查詢都放到一個工具類中,主要工具類代碼如下:

public class AlbumTool {

 private Handler handler;
 //private Semaphore semaphore;
 private Callback callback;
 private Context context;

 private final int TYPE_FOLDER=1;
 private final int TYPE_ALBUM=2;

 public AlbumTool(Context context){
  this.context=context;
  handler=new Handler(Looper.getMainLooper()){
   @Override
   public void handleMessage(Message msg) {
    if(callback!=null){
     switch (msg.what){
      case TYPE_FOLDER:
       callback.onFolderFinish((ImageFolder) msg.obj);
       break;
      case TYPE_ALBUM:
       callback.onAlbumFinish((ArrayList<ImageFolder>) msg.obj);
       break;
     }
    }
    super.handleMessage(msg);
   }
  };
 }

 public void setCallback(Callback callback){
  this.callback=callback;
 }

 public void findAlbumsAsync(){
  new Thread(new Runnable() {
   @Override
   public void run() {
    getAlbums(context);
   }
  }).start();
 }

 public void findFolderAsync(final ImageFolder folder){
  new Thread(new Runnable() {
   @Override
   public void run() {
    getFolder(context,folder);
   }
  }).start();
 }

 //獲取所有圖片集
 private ArrayList<ImageFolder> getAlbums(Context context) {
  ArrayList<ImageFolder> albums=new ArrayList<>();
  albums.add(getNewestPhotos(context));
  //利用ContentResolver查詢數據庫,找出所有包含圖片的文件夾,保存到相冊列表中
  ContentResolver resolver = context.getContentResolver();
  Cursor cursor = resolver.query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
    new String[]{
      MediaStore.Images.Media.DATA,
      MediaStore.Images.ImageColumns.BUCKET_ID,
      MediaStore.Images.Media.DATE_MODIFIED,
      "count(*) as count"
    },
    MediaStore.Images.Media.MIME_TYPE + "=? or " +
      MediaStore.Images.Media.MIME_TYPE + "=? or " +
      MediaStore.Images.Media.MIME_TYPE + "=?) " +
      "group by (" + MediaStore.Images.ImageColumns.BUCKET_ID,
    new String[]{"image/jpeg", "image/png", "image/jpg"},
    MediaStore.Images.Media.DATE_MODIFIED + " desc");
  if (cursor != null) {
   while (cursor.moveToNext()) {
    final File file = new File(cursor.getString(0));
    ImageFolder imageFolder = new ImageFolder();
    imageFolder.setDir(file.getParent());
    imageFolder.setId(cursor.getString(1));
    imageFolder.setFirstImagePath(cursor.getString(0));
    String[] all=file.getParentFile().list(new FilenameFilter() {

     private boolean e(String filename,String ends){
      return filename.toLowerCase().endsWith(ends);
     }

     @Override
     public boolean accept(File dir, String filename) {
      return e(filename,".png") || e(filename,".jpg") || e(filename,"jpeg");
     }
    });
    if(all!=null&&all.length>0){
     imageFolder.setCount(all.length);
     albums.add(imageFolder);
    }
   }
   cursor.close();
  }
  sendMessage(TYPE_ALBUM,albums);
  return albums;
 }

 //獲取《最新圖片》集
 private ImageFolder getNewestPhotos(Context context) {
  ImageFolder newestFolder=new ImageFolder();
  newestFolder.setName(ChooserSetting.newestAlbumName);
  ArrayList<ImageInfo> imageBeans = new ArrayList<>();
  ContentResolver resolver = context.getContentResolver();
  Cursor cursor = resolver.query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
    new String[]{
      MediaStore.Images.Media.DATA,
      MediaStore.Images.Media.DISPLAY_NAME,
      MediaStore.Images.Media.DATE_MODIFIED,
    },
    MediaStore.Images.Media.MIME_TYPE + "=? or "
      + MediaStore.Images.Media.MIME_TYPE + "=? or "
      + MediaStore.Images.Media.MIME_TYPE + "=?",
    new String[]{"image/jpeg", "image/png", "image/jpg"},
    MediaStore.Images.Media.DATE_MODIFIED + " desc"
      + (ChooserSetting.newestAlbumSize < 0 ? ""
      : (" limit " + ChooserSetting.newestAlbumSize)));
  if (cursor != null){
   while (cursor.moveToNext()) {
    ImageInfo info=new ImageInfo();
    info.path=cursor.getString(0);
    info.displayName=cursor.getString(1);
    info.time=cursor.getLong(2);
    imageBeans.add(info);
   }
   cursor.close();
   newestFolder.setFirstImagePath(imageBeans.get(0).path);
   newestFolder.setDatas(imageBeans);
   newestFolder.setCount(imageBeans.size());
  }
  sendMessage(TYPE_FOLDER,newestFolder);
  return newestFolder;
 }

 //獲取具體圖片集,確保圖片數據已被查詢
 private ImageFolder getFolder(Context context,ImageFolder folder) {
  ContentResolver resolver = context.getContentResolver();
  Cursor cursor;
  if(folder!=null&&folder.getDatas()!=null&&folder.getDatas().size()>0){
   sendMessage(TYPE_FOLDER,folder);
   return folder;
  }
  if (folder == null) {
   return getNewestPhotos(context);
  } else {
   cursor = resolver.query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
     new String[]{
       MediaStore.Images.Media.DATA,
       MediaStore.Images.Media.DISPLAY_NAME,
       MediaStore.Images.Media.DATE_MODIFIED
     },
     MediaStore.Images.ImageColumns.BUCKET_ID + "=? and (" +
       MediaStore.Images.Media.MIME_TYPE + "=? or "
       + MediaStore.Images.Media.MIME_TYPE + "=? or "
       + MediaStore.Images.Media.MIME_TYPE + "=?) ",
     new String[]{folder.getId(), "image/jpeg", "image/png", "image/jpg"},
     MediaStore.Images.Media.DATE_MODIFIED + " desc");
  }
  ArrayList<ImageInfo> datas=new ArrayList<>();
  folder.setDatas(datas);
  if (cursor != null){
   while (cursor.moveToNext()) {
    ImageInfo info=new ImageInfo();
    info.path=cursor.getString(0);
    info.displayName=cursor.getString(1);
    info.time=cursor.getLong(2);
    datas.add(info);
   }
   cursor.close();
  }
  sendMessage(TYPE_FOLDER,folder);
  return folder;
 }

 private void sendMessage(int what,Object obj){
  Message msg=new Message();
  msg.what=what;
  msg.obj=obj;
  handler.sendMessage(msg);
 }

 public interface Callback{

  //文件夾查找完畢
  void onFolderFinish(ImageFolder folder);
  //成功搜索出所有的圖片集
  void onAlbumFinish(ArrayList<ImageFolder> albums);

 }

}

這樣,我們就可以利用這個工具類方便的獲取相冊列表、獲取制定相冊的圖片了(最新照片合集當做是一個相冊)。裡面主要就是使用ContentResolver來做查詢,Android入門級問題,四大組件——Activity、Service、ContentProvider和BroadcastReceiver,中的ContentProvider和ContentResolver就是一對CP了,ContentProvider用來提供數據,ContentResolver用來獲取數據。

展示相冊和相冊列表

有了獲取相冊列表和獲取指定相冊的方法,展示相冊和相冊列表就容易了,按照通常的方式,我們直接使用GridView來展示相冊,用ListView來展示相冊列表。當然,你也可以選擇使用RecyclerView來替代掉GridView和ListView,其實也都一樣。
顯示圖片直接使用成熟的第三方框架即可,我使用的是Glide。
值得注意的是,在相冊中,我們展示出來的圖片都是正方塊、並且需要三個(你也可以設置四個或者五個,只要你高興)鋪滿寬度。在這裡我使用的是比較懶的方式,直接用一個自定義的布局作為Item的跟布局,這個自定義布局繼承RelativeLayout,然後將復寫它的onMeasure方法:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}

心有多懶,人就能有多懶。這樣它的高度就被強制保持為何寬度一致了。

選擇指示器

像QQ中,選擇圖片時,圖片會根據選擇的順序,在圖片上的那個圈圈裡面顯示出1234……等數字,然後取消選擇時,被選的數字會順序補位,比如你選了七張圖片、然後取消了顯示數字3的那張,這時4就變成3了、5變成了4、6變成了5。
像新浪微博中的圖片選擇,不會出現數字,而是出現一個勾,選中的時候這個勾還有動畫效果。
這樣的功能怎麼實現呢?
我實現的方式是,在每個Item中都有一個固定大小的View,根據圖片是否被選中,加載不同的Drawable。當然,寫這個項目既然是為了以後在不同的項目中使用,這個自然要方便被使用者自行設置。所以我寫一個抽象類:

public abstract class IChooseDrawable{

 private Paint paint;
 protected int width=0;
 protected int height=0;

 private SparseArray<Drawable> drawables;

 public IChooseDrawable(){
  paint=new Paint();
  paint.setAntiAlias(true);
  paint.setColor(0x88000000);
  drawables=new SparseArray<>();
 }

 public Drawable get(int state){
  if(drawables.indexOfKey(state)>=0){
   return drawables.get(state);
  }else{
   InDrawable drawable=new InDrawable(state);
   drawables.put(state,drawable);
   return drawable;
  }
 }

 public void clear(){
  drawables.clear();
 }

 public int getBaseline(Paint paint,int top,int bottom){
  Paint.FontMetrics i=paint.getFontMetrics();
  return (int) ((bottom+top-i.top-i.bottom)/2);
 }

 //state表示第幾個被選擇,0表示未選中
 public abstract void draw(Canvas canvas,Paint paint,int state);

 private class InDrawable extends Drawable{

  private int state=0;

  InDrawable(int state){
   this.state=state;
  }

  @Override
  public void draw(@NonNull Canvas canvas) {
   IChooseDrawable.this.draw(canvas,paint,state);
  }

  @Override
  public void setAlpha(int alpha) {

  }

  @Override
  public void setColorFilter(ColorFilter colorFilter) {

  }

  @Override
  public int getOpacity() {
   return PixelFormat.TRANSPARENT;
  }
 }
}

在相冊的Adapter的構造函數中會傳入一個IChooseDrawable實體,在顯示每個Item時,會根據當前狀態通過drawable.get(int state)取得指定的Drawable,設置為指示器View的背景。
上面效果圖中的指示器(也可配置為只顯示對號)實現為:

public class CircleChooseDrawable extends IChooseDrawable {

 private boolean isShowNum=true;
 private int chooseBgColor=0xFFFF6600;
 private Path path;

 public CircleChooseDrawable(){
  super();
 }

 public CircleChooseDrawable(boolean isShowNum,int chooseBgColor){
  super();
  this.isShowNum=isShowNum;
  this.chooseBgColor=chooseBgColor;
 }

 @Override
 public void draw(Canvas canvas, Paint paint, int state) {
  width=canvas.getWidth();
  height=canvas.getHeight();
  if(state==0){ //未選擇狀態
   paint.setColor(0x55000000);
   paint.setStyle(Paint.Style.FILL);
   canvas.drawCircle(width/2,height/2,width/2-2,paint);
   paint.setColor(0xDDFFFFFF);
   paint.setStrokeWidth(2);
   paint.setStyle(Paint.Style.STROKE);
   canvas.drawCircle(width/2,height/2,width/2-2,paint);
  }else{ //選中狀態
   paint.setColor(chooseBgColor);
   paint.setStyle(Paint.Style.FILL);
   canvas.drawCircle(width/2,height/2,width/2-2,paint);
   paint.setColor(0xDDFFFFFF);
   paint.setStrokeWidth(2);
   paint.setStyle(Paint.Style.STROKE);
   canvas.drawCircle(width/2,height/2,width/2-2,paint);
   paint.setColor(0xDDFFFFFF);
   if(isShowNum){ //顯示數字
    paint.setStyle(Paint.Style.FILL);
    paint.setTextAlign(Paint.Align.CENTER);
    paint.setTextSize(width*0.53f);
    canvas.drawText(state+"",width/2,getBaseline(paint,0,height),paint);
   }else{ //顯示一個√號
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(3);
    paint.setStrokeCap(Paint.Cap.ROUND);
    if(path==null){
     path=new Path();
     path.moveTo(width/4f,height/2f);
     path.lineTo(width*2/5f,height*5/7f);
     path.lineTo(width*3/4f,height/3f);
    }
    canvas.drawPath(path,paint);
   }
  }
 }
}

裁剪、單選和多選

單選和多選的區別在於單選的時候,沒有選擇指示器,選中直接攜帶數據返回。而多選時,有選擇指示器,選擇完成後,需要確定後攜帶數據返回,在確定前可以取消之前所選的內容。
所以實現的時候,只需要判斷用戶傳入的選擇意圖,做出相應的處理。如果是裁剪,則選擇一張圖片後,進入到裁剪頁面,裁剪結束後攜帶裁剪結果返回到進入到相冊前的頁面。如果是單選,則選擇一張圖片後,直接攜帶數據返回到進入相冊前的頁面。如果是多選,則要在點擊確認按鈕後,攜帶數據返回到進入相冊前的頁面。裁剪的實現見上一篇博客——Android 圖片裁剪。

其他

其他的一些功能,主要是拍照的功能、和大圖切換預覽現在還未添加進項目中,目前准備是利用OpenGl做拍照預覽和拍照(也許會添加些許常用濾鏡),實現的相關細節也會在後續單獨寫博客來介紹。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持本站。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved