Android 圖片選擇框架點選放大(可新增多個item,可刪除)

阿新 • • 發佈：2018-11-21

一.這個功能相信每個小夥伴都會遇到，話不多說，直接上效果圖（花屏是錄屏軟體的原因）與步驟，以供小夥伴們參考。

嘿嘿嘿！.gif

1.依賴：

//圖片選擇器
compile 'com.jph.takephoto:takephoto_library:4.0.3'
//仿iOS的AlertViewController 
compile 'com.bigkoo:alertview:1.0.3'
//最新版本Glide
compile 'com.github.bumptech.glide:glide:3.7.0'
//design中包含的RecycleView
compile 'com.android.support:design:25.3.1'
//ButterKnife
compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
//photoView 圖片放大控制元件
compile 'com.github.chrisbanes:PhotoView:1.3.0'

2.xml檔案佈局：

      <android.support.v7.widget.RecyclerView
        android:id="@+id/recycleview_check"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ></android.support.v7.widget.RecyclerView>

3.當前Activity中初始化程式碼：

    RecycleView recyCheck =(Recycleview)findViewById(R.id.recycleview_check);
    //設定展示框中單行展示的圖片個數
    recyCheck.setLayoutManager(new GridLayoutManager(this, 5));
    //初始化自定義Adapter，onAddPicListener是新增圖片的點選監聽器，onPicClickListener是新增圖片成功以後，點選放大的監聽器。
    photoAdapter = new PhotoAdapter(this, onAddPicListener, onPicClickListener);
    //設定多選時最多選擇的圖片張數
    photoAdapter.setSelectMax(5);
    recyCheck.setAdapter(photoAdapter);

其中，PhotoAdapter程式碼如下：

public class PhotoAdapter extends
    RecyclerView.Adapter<PhotoAdapter.ViewHolder> {

private int selectMax = 3;
public final int TYPE_CAMERA = 1;
public final int TYPE_PICTURE = 2;

private Context mContext;
private LayoutInflater mInflater;
private List<TImage> list = new ArrayList<>();


//點選新增圖片跳轉
private onAddPicListener mOnAddPicListener;

public interface onAddPicListener {
    void onAddPicClick(int type, int position);
}

//點選圖片放大
private onPicClickListener mOnPicClickListener;

public interface onPicClickListener {
    void onPicClick(View view, int position);
}

public PhotoAdapter(Context context, onAddPicListener mOnAddPicListener, onPicClickListener mOnPicClickListener) {
    mInflater = LayoutInflater.from(context);
    this.mContext = context;
    this.mOnAddPicListener = mOnAddPicListener;
    this.mOnPicClickListener = mOnPicClickListener;
}

public void setSelectMax(int selectMax) {
    this.selectMax = selectMax;
}

public void setList(List<TImage> list) {
    this.list = list;
}

public class ViewHolder extends RecyclerView.ViewHolder {

    ImageView mPhoto_image;
    ImageView mPhoto_del;

    public ViewHolder(View view) {
        super(view);
        mPhoto_image = (ImageView) view.findViewById(R.id.photo_image);
        mPhoto_del = (ImageView) view.findViewById(R.id.photo_del);
    }
}

@Override
public int getItemCount() {
    if (list.size() < selectMax) {
        return list.size() + 1;
    } else {
        return list.size();
    }
}

@Override
public int getItemViewType(int position) {
    if (isShowAddItem(position)) {
        return TYPE_CAMERA;
    } else {
        return TYPE_PICTURE;
    }
}

/**
 * 建立ViewHolder
 */
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View view = mInflater.inflate(R.layout.activity_photo_item,
            viewGroup, false);
    final ViewHolder viewHolder = new ViewHolder(view);

    return viewHolder;
}

private boolean isShowAddItem(int position) {
    int size = list.size() == 0 ? 0 : list.size();
    return position == size;
}

/**
 * 設定值
 */
@Override
public void onBindViewHolder(final ViewHolder viewHolder, final int position) {
    //少於3張，顯示繼續新增的圖示
    Log.d("...", "onBindViewHolder: " + position);
    if (getItemViewType(position) == TYPE_CAMERA) {
        //設定新增按鈕圖片的樣式
        viewHolder.mPhoto_image.setImageResource(R.mipmap.icon_addpic);
        viewHolder.mPhoto_image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mOnAddPicListener.onAddPicClick(0, viewHolder.getAdapterPosition());
            }
        });
        viewHolder.mPhoto_del.setVisibility(View.INVISIBLE);
    } else {
        viewHolder.mPhoto_del.setVisibility(View.VISIBLE);
        viewHolder.mPhoto_image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mOnPicClickListener.onPicClick(view, viewHolder.getAdapterPosition());
            }
        });
        viewHolder.mPhoto_del.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mOnAddPicListener.onAddPicClick(1, viewHolder.getAdapterPosition());
            }
        });

        Glide.with(mContext)
                .load(list.get(position).getCompressPath())
                .crossFade()
                .into(viewHolder.mPhoto_image);
    }
  }  
}

PhotoAdapter中所依賴的xml檔案如下：

  <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true">
<ImageView
    android:id="@+id/photo_image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:scaleType="centerCrop"
    android:src="@color/image_color" />

<ImageView
    android:id="@+id/photo_del"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|top"
    android:scaleType="center"
    android:src="@mipmap/icon_delete" />
</FrameLayout>

新增圖片的點選監聽器onAddPicListener 程式碼及所呼叫方法如下：

private List<TImage> selectMedia = new ArrayList<>();
private List<TImage> updateMedia = new ArrayList<>();
ArrayList<String> imageUrls = new ArrayList<>();
private List<String> internetUrls = new ArrayList<>();
private PhotoAdapter.onAddPicListener onAddPicListener = new PhotoAdapter.onAddPicListener() {
    @Override
    public void onAddPicClick(int type, int position) {
        switch (type) {
            case 0: //點選圖片
                new AlertView("上傳圖片", null, "取消", null,
                        new String[]{"拍照", "從相簿中選擇"},
                        MainActivity.this, AlertView.Style.ActionSheet, new OnItemClickListener() {
                    @Override
                    public void onItemClick(Object o, int position) {
                        TakePhoto takePhoto = getTakePhoto();
                        //獲取TakePhoto圖片路徑
                        if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
                             d(TAG, "SD卡可用");

                            File file = new File(Environment.getExternalStorageDirectory(), "/photo/" + System.currentTimeMillis() + ".jpg");
                            if (!file.getParentFile().exists()) file.getParentFile().mkdirs();
                            Uri imageUri = Uri.fromFile(file);
                            d(TAG, "檔案建立成功並獲取URL == " + imageUri);
                            //設定takephoto的照片使用壓縮
                            configCompress(takePhoto);
                            //設定Takephoto 使用TakePhoto自帶的相簿   照片旋轉角度糾正
                            configTakePhotoOption(takePhoto);
                            switch (position) {
                                case 0:  //拍照
                                    takePhoto.onPickFromCapture(imageUri);
                                    break;
                                case 1:  //相簿選擇
                                    //如果已展示圖片的個數為0，就設定多選時最多選中3張
                                    if (selectMedia.size() == 0) { 
                                        takePhoto.onPickMultiple(3);
                                    //如果已展示圖片的個數為1，就設定多選時最多選中2張
                                    } else if (selectMedia.size() == 1) {
                                        takePhoto.onPickMultiple(2);
                                   //如果已展示圖片的個數為2，就設定多選時最多選中1張
                                    } else if (selectMedia.size() == 2) {
                                        takePhoto.onPickMultiple(1);
                                    }
                                    break;
                            }
                        } else {
                            Log.d(TAG, "SD卡bu可用");
                        }

                    }
                }).show();
                break;
            case 1:  //點選刪除按鈕
                
                    selectMedia.remove(position);
                    photoAdapter.notifyItemRemoved(position);
                    internetUrls.remove(position);

                break;
        }
    }
};
//設定Takephoto 使用TakePhoto自帶的相簿   照片旋轉角度糾正
private void configTakePhotoOption(TakePhoto takePhoto) {
    TakePhotoOptions.Builder builder = new TakePhotoOptions.Builder();
    builder.setWithOwnGallery(true);
    builder.setCorrectImage(true);
    takePhoto.setTakePhotoOptions(builder.create());
}

//設定takephoto的照片使用壓縮
private void configCompress(TakePhoto takePhoto) {
    CompressConfig config;
    config = new CompressConfig.Builder()
            .setMaxSize(102400)
            .setMaxPixel(800)
            .enableReserveRaw(true)
            .create();
    takePhoto.onEnableCompress(config, false);
}
/**
 * 獲取TakePhoto例項
 * 沒有繼承TakePhotoActivity 所寫
 */
public TakePhoto getTakePhoto() {
    if (takePhoto == null) {
        takePhoto = (TakePhoto) TakePhotoInvocationHandler.of(this).bind(new TakePhotoImpl(this, this));
    }
    return takePhoto;
}

getTakePhoto中會報錯，此時，我們讓當前Activity實現InvokeListener與TakePhoto.TakeResultListener介面，重寫invoke與方法，重寫以下方法程式碼如下：

image.png

@Override
public void takeCancel() {
    Log.d(TAG, "takeCancel");
}

@Override
public void takeFail(TResult result, String msg) {
    ArrayList<TImage> images = result.getImages();
    showImg(result.getImages());
    Log.d(TAG, "takeFail" + images.get(0).toString());
}

@Override
public void takeSuccess(TResult result) {
    showImg(result.getImages());
}

//沒有繼承TakePhotoActivity 所寫
@Override
protected void onSaveInstanceState(Bundle outState) {
    getTakePhoto().onSaveInstanceState(outState);
    super.onSaveInstanceState(outState);
}

//沒有繼承TakePhotoActivity 所寫
@Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    PermissionManager.TPermissionType type = PermissionManager.onRequestPermissionsResult(requestCode, permissions, grantResults);
    PermissionManager.handlePermissionsResult(this, type, invokeParam, this);
}

//沒有繼承TakePhotoActivity 所寫
@Override
public PermissionManager.TPermissionType invoke(InvokeParam invokeParam) {
    PermissionManager.TPermissionType type = PermissionManager.checkPermission(TContextWrap.of(this), invokeParam.getMethod());
    if (PermissionManager.TPermissionType.WAIT.equals(type)) {
        this.invokeParam = invokeParam;
    }
    return type;
}


//圖片成功後返回執行的方法
private void showImg(ArrayList<TImage> images) {
    Log.d(TAG, images.toString());
    //目的是防止上傳重複的圖片
    updateMedia.clear();

    for (int i = 0; i < images.size(); i++) {
        if (images.get(i).getCompressPath() != null) {
            selectMedia.add(images.get(i));
            updateMedia.add(images.get(i));
        }
    }
    if (selectMedia != null) {
        photoAdapter.setList(selectMedia);
        photoAdapter.notifyDataSetChanged();
    }
    //需上傳圖片，請使用用updateMedia陣列。
}

回過頭來看，既然照相肯定有回撥，我們應當在當前Activity中重寫回調方法，並交給takePhoto來操作

   //沒有繼承TakePhotoActivity 所寫
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    //將拍照返回的結果交給takePhoto處理
    getTakePhoto().onActivityResult(requestCode, resultCode, data);
    super.onActivityResult(requestCode, resultCode, data);
}

圖片點選放大監聽器onPicClickListener程式碼如下：

 //圖片點選事件
private PhotoAdapter.onPicClickListener onPicClickListener = new PhotoAdapter.onPicClickListener() {
    @Override
    public void onPicClick(View view, int position) {
        imageUrls.clear();
        for (int i = 0; i < selectMedia.size(); i++) {
            String compressPath = selectMedia.get(i).getCompressPath();
            imageUrls.add(compressPath);
        }
        imageBrower(position, imageUrls);
    }
};
 private void imageBrower(int position, ArrayList<String> imageUrls) {
    Intent intent = new Intent(this, ImagePagerActivity.class);
    intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_URLS, imageUrls);
    intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_INDEX, position);
    startActivity(intent);
}

我們可以看到，圖片點選以後跳轉到了另一個Activity，這個Activity就是我們專門用來放大圖片的Activity了，使用的方法很簡單，傳入需要展示的圖片陣列和你點選的圖片索引，就會自動選中對應的圖片進行展示並具備左右滑動切換圖片的效果，程式碼如下（可當作工具類使用，應用於專案各個需要展示圖片陣列的位置，呼叫imageBrower方法即可）：

public class ImagePagerActivity extends FragmentActivity {
private static final String STATE_POSITION = "STATE_POSITION";
public static final String EXTRA_IMAGE_INDEX = "image_index";
public static final String EXTRA_IMAGE_URLS = "image_urls";

@BindView(R.id.indicator)
TextView indicator;
@BindView(R.id.pager)
HackyViewPager pager;

private int pagerPosition;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.image_detail_pager);
    ButterKnife.bind(this);
    MyUtils.setSystemColor(this,R.color.bg_shouye);

    pagerPosition = getIntent().getIntExtra(EXTRA_IMAGE_INDEX, 0);
    ArrayList<String> urls = getIntent().getStringArrayListExtra(EXTRA_IMAGE_URLS);
    ImagePagerAdapter mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), urls);
    pager.setAdapter(mAdapter);
    CharSequence text = getString(R.string.viewpager_indicator, 1, pager.getAdapter().getCount());
    indicator.setText(text);
    // 更新下標
    pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageSelected(int arg0) {
            CharSequence text = getString(R.string.viewpager_indicator, arg0 + 1, pager.getAdapter().getCount());
            indicator.setText(text);
        }
    });
    if (savedInstanceState != null) {
        pagerPosition = savedInstanceState.getInt(STATE_POSITION);
    }
    pager.setCurrentItem(pagerPosition);

}

@Override
protected void onSaveInstanceState(Bundle outState) {
    outState.putInt(STATE_POSITION, pager.getCurrentItem());
}

private class ImagePagerAdapter extends FragmentStatePagerAdapter {
    public ArrayList<String> fileList;

    public ImagePagerAdapter(FragmentManager fm, ArrayList<String> fileList) {
        super(fm);
        this.fileList = fileList;
    }

    @Override
    public int getCount() {
        return fileList == null ? 0 : fileList.size();
    }

    @Override
    public Fragment getItem(int position) {
        String url = fileList.get(position);
        return ImageDetailFragment.newInstance(url);
    }
  }
}

ImagePagerActivity 對應的xml檔案如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/bg_shouye"
>

<com.mihomes.checkphotodemo.HackyViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black" />

<TextView
    android:id="@+id/indicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@android:color/transparent"
    android:gravity="center"
    android:text="@string/viewpager_indicator"
    android:textColor="@android:color/white"
    android:textSize="18sp" />
</LinearLayout>

HackyViewPager是一個重寫了ViewPager的自定義類，解決了PhotoView和ViewPager的滑動衝突，程式碼如下：

public class HackyViewPager extends ViewPager {
  private static final String TAG = "HackyViewPager";
  public HackyViewPager(Context context) {
    super(context);
}

public HackyViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    try {
        return super.onInterceptTouchEvent(ev);
    } catch (IllegalArgumentException e) { // 不理會
        Log.e(TAG, "hacky viewpager error1");
        return false;
    } catch (ArrayIndexOutOfBoundsException e) {
        // 不理會
        Log.e(TAG, "hacky viewpager error2");
        return false;
    }
  }
}

同時，ImagePagerActivity中所引用的ImageDetailFragment程式碼如下：

public class ImageDetailFragment extends Fragment {
private static final String TAG = "ImageDetailFragment";
private String mImageUrl;
private PhotoView mImageView;
private ProgressBar progressBar;
private PhotoViewAttacher mAttacher;
private Dialog dialog;
private Button save;
private Button saveCancel;
public static ImageDetailFragment newInstance(String imageUrl) {
    final ImageDetailFragment f = new ImageDetailFragment();
    final Bundle args = new Bundle();
    args.putString("url", imageUrl);
    f.setArguments(args);
    return f;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mImageUrl = getArguments() != null ? getArguments().getString("url") : null;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.image_detail_fragment, container, false);
    mImageView = (PhotoView) v.findViewById(R.id.maxphoto_image);
    mAttacher = new PhotoViewAttacher(mImageView);
    mAttacher.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
        @Override
        public void onPhotoTap(View arg0, float arg1, float arg2) {
            getActivity().finish();
        }

        @Override
        public void onOutsidePhotoTap() {

        }
    });

    progressBar = (ProgressBar) v.findViewById(R.id.maxphoto_loading);
    Glide.with(getContext()).load(mImageUrl).into(mImageView);
    mAttacher.update();
    return v;
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

  }
}

ImageDetailFragment所引用的xml檔案程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_shouye">

<uk.co.senab.photoview.PhotoView
    android:id="@+id/maxphoto_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

<ProgressBar
    android:id="@+id/maxphoto_loading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:visibility="gone" />
</LinearLayout>

最後，莫要忘了在清單檔案（AndroidManifest.xml）中宣告我們所引用的ImagePagerActivity：

<activity android:name=".ImagePagerActivity"></activity>

該Demo中所用的色值屬性如下：

<color name="image_color">#f6f6f6</color>
<color name="bg_shouye">#333333</color>

文字屬性如下：

  <string name="viewpager_indicator">指示器</string>

二.值得一提的是，takePhoto多選框修改樣式的方法如下

自定義相簿

如果TakePhoto自帶相簿的UI不符合你應用的主題的話，你可以對它進行自定義。方法如下：

自定義Toolbar

在“res/layout”目錄中建立一個名為“toolbar.xml”的佈局檔案，內容如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/CustomToolbarTheme"
    android:background="#ffa352">
</android.support.v7.widget.Toolbar>

在“toolbar.xml”檔案中你可以指定TakePhoto自帶相簿的主題以及Toolbar的背景色。

自定義狀態列

在“res/values”目錄中建立一個名為“colors.xml”的資原始檔，內容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="multiple_image_select_primaryDark">#212121</color>
</resources>

通過上述方式便可以自定義狀態列的顏色。

自定義提示文字

在“res/values”目錄的“string.xml”檔案衝新增如下程式碼：

<resources>    
    <string name="album_view">選擇圖片</string>
    <string name="image_view">單擊選擇</string>
    <string name="add">確定</string>
    <string name="selected">已選</string>
    <string name="limit_exceeded">最多能選 %d 張</string>
</resources>

重寫上述程式碼，便可以自定義TakePhoto自帶相簿的提示文字。

自定義標題欄顏色

在styles.xml裡面重寫以下style即可：

<style name="MultipleImageSelectTheme"
 parent="Theme.AppCompat.Light.NoActionBar"> 
 <item name="colorPrimary">@color/multiple_image_select_primary</item>//標題欄顏色
 <item name="colorPrimaryDark">@color/multiple_image_select_primaryDark</item> //狀態列顏色          
 <item name="colorAccent">@color/multiple_image_select_accent</item> 
 <item name="actionModeStyle">@style/CustomActionModeStyle</item>
 <item name="windowActionModeOverlay">true</item>
 <item name="actionMenuTextColor">@android:color/white</item>   //標題欄文字顏色
</style>
<style name="CustomActionModeStyle" parent="Base.Widget.AppCompat.ActionMode">
    <item name="background">@color/rdb_bg</item>  //選中標題欄背景顏色
</style>

三.本專案GitHub地址：https://github.com/MiHomes/checkPhotoDemo

Android 圖片選擇框架點選放大(可新增多個item,可刪除)

自定義相簿

自定義標題欄顏色

Android 圖片選擇框架點選放大(可新增多個item,可刪除)

圖片漂浮與點選放大

Github挺好用的android圖片選擇框架（拍照+從相簿）

innosetup多語言選擇，可新增多個

封裝RecyclerView Adapter 實現可新增多個header和footer,可設定loadingView，低耦合的多種佈局。

Android最簡單的圖片點選放大檢視器

Android瀏覽圖片，點選放大至全屏效果

Android相簿支援檢視本地相簿，點選放大圖片，滑動切換圖片，手勢放大縮小

android圖片點選放大動畫，並遮擋旁邊的控制元件

求一個手機端上傳圖片後可點選放大檢視的外掛

imge 點選放大圖片

利用photoView實現可點選放大到全屏顯示的控制元件，效果類似於微信朋友圈點開看大圖

微信小程式圖片點選放大

網頁對應圖片點選放大 html+js

Jquery圖片點選放大

layui 上傳圖片回顯並點選放大實現

ionic 圖片點選放大，雙指縮放

Android簡單互動，點選控制元件時短暫的放大後恢復正常

仿微信朋友圈圖片點選放大效果

前端jquery實現圖片點選放大縮小

Android 圖片選擇框架 點選放大(可新增多個item,可刪除)

自定義相簿

自定義標題欄顏色

相關推薦

Android 圖片選擇框架點選放大(可新增多個item,可刪除)