仿照微信類的圖片上傳,支援相簿及拍照

• 先看看xml樣式
  

  點選上傳圖片就可以開啟相簿或者相機如下
  

  點選第一個圖示就開啟拍照, 第二個圖片選擇後,右上角啊會有選擇的數量,這個是虛擬機器裡寫的 所以現實的是英文.
  本例是採用了 一個大神寫的 photopicker 的專案而來的
  github 地址:

,他是通過startactivityforresult 來呼叫他的activity,然後把資料以list 的圖片路徑返回在 onactivityresult 中 ,自己的activity 中通過recycleview 的adapter 更新介面 .
下面看下跳轉

void pickPhoto() {
   PhotoPicker.builder()
            .setPhotoCount(Info.PRODUCT_IMG_NUMBER - mImgUris.size() + 1)
            //設定可以傳多少張 減去一張 <圖片上傳圖片>
            .setShowCamera(true) //是否顯示相機圖示
            .setShowGif(true) //是否支援gif
            .setPreviewEnabled(false) //點選圖片是否 預覽
            .start(ProductCrowdFundingActivity.this, PhotoPicker.REQUEST_CODE);
            //第一個引數傳自己的activity.到時候會呼叫自己activity的 
            onActivityResult 方法 把圖片路徑帶回來
 

}

下面是點選圖片後可以顯示大圖

        /**
         * 檢視照片大圖
         */
    private void watchPhoto(View view, int position) {
        PhotoPreview.builder()
            .setPhotos(mImgUris)  //圖片路徑的集合 List<string>
            .setCurrentItem(position) //點選的是集合中的第幾個圖片
            .start(ProductCrowdFundingActivity.this);
        }
 

下面是 返回資料的處理 .

  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
         if (resultCode == RESULT_OK) {
                List<String> photos = null;
                if (data != null) {
                    photos = data.getStringArrayListExtra(PhotoPicker.KEY_SELECTED_PHOTOS);//圖片路徑集合
                }
                // mImgUris.clear();
                if (photos != null) {
                    //去掉重複的圖片 然後把 <上傳圖片加到最後>
                //新增一個 標記位,作為"上傳圖片" 那個圖片的顯示標記

                    mUploadIsShow = false;
                    mImgUris.removeAll(photos);
                    mImgUris.addAll(photos);
                    if (mImgUris.size() < Info.PRODUCT_IMG_NUMBER && !mUploadIsShow) {
                        mImgUris.add(Info.TAG_PRODUCT_UPLOAD_IMG);
                        mUploadIsShow = true;
                    }
                }
                mImgUriAdapter.notifyDataSetChanged();
            }
        }
 

holder 中的點選事件

     public MyHolder(View itemView) {
        super(itemView);
        mIvImg = (ImageView) itemView.findViewById(R.id.iv_product);
        mIvDel = (ImageView) itemView.findViewById(R.id.iv_del_icon);
        mIvDel.setOnClickListener(this);
        mIvImg.setOnClickListener(this);
    }
    @Override
    public void onClick(View view) {
        int id = view.getId();
        int position = MyHolder.this.getLayoutPosition();
        switch (id) {
            case R.id.iv_product:
                mOnItemClickLitener.onItemWatch(view, position);
                break;
            case R.id.iv_del_icon:
                mOnItemClickLitener.onitemDel(view, position);
                break;
        }
    }

點選事件藉口

public interface OnItemClickLitener {
    /**
     * 點選大圖片時 檢視圖片細節圖
     *
     * @param view
     * @param position
     */
    void onItemWatch(View view, int position);

    /**
     * 點選小圖片時 刪除圖片
     *
     * @param view
     * @param position
     */
    void onitemDel(View view, int position);
}

然後就是adapter 顯示資料了
本例中有個獨特的圖片 就是沒有圖片時 顯示的那個 -上傳照片-

在沒有上傳或者上傳數量小於固定值時都要顯示他,在上傳到最大數量(本例預設為8)是將他 隱藏,我是寫了一個特殊的標記 來標識這個圖片的路徑,在adapter獨到這個路徑時顯示這個圖片. 同時在每次圖片集合資料發生變更時要把這個圖片標記加到圖騙集合的尾部

圖片支援刪除 ,點選右上角的標記就可以從集合中刪除.點選事件是 adapter中寫的介面 ,然後在activity中通過實現藉口來呼叫方法
holder 中的點選事件

    @Override
    public void onClick(View view) {
        int id = view.getId();
        int position = MyHolder.this.getLayoutPosition();
        switch (id) {
            case R.id.iv_product:
                mOnItemClickLitener.onItemWatch(view, position);
                break;
            case R.id.iv_del_icon:
                mOnItemClickLitener.onitemDel(view, position);
                break;
        }
    }       

然後就是點選事件的介面

 public interface OnItemClickLitener {
    /**
     * 點選大圖片時 檢視圖片細節圖
     */
    void onItemWatch(View view, int position);

    /**
     * 點選小圖片時 刪除圖片
     */
    void onitemDel(View view, int position);
}

第一次用markdown 這種樣式程式碼看起來可能比較費勁,我把專案傳到github 上了 大家可以看下載下來使用.