一、前言
應工作上的要求，需要有一個類似於微信朋友圈發動態上傳圖片的功能，想起曾經已經做過了，但奈何不忍看自己以前寫的代碼的慘狀，覺得重新封裝一個使用方便，易於維護的類似功能的類，自己之后用起來也順手，當然也方便一下大家，這樣可以加快我們工作的效率，讓我們有更多的時間學習（划水）。
功能上的話，目前有添加圖片、查看大圖、刪除圖片
二、效果圖
先貼一下效果圖吧
三、實現功能
庫有用到butterknife和顯示圖片的glide
適配器用的rvadapter，加一個刪除功能的氣泡彈窗
引入一下相關依賴：
api 'com.jakewharton:butterknife:10.2.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.1'
implementation 'com.github.bumptech.glide:glide:4.5.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.5.0'
//氣泡彈窗
implementation 'me.kareluo.ui:popmenu:1.1.0'
implementation 'com.zhy:base-rvadapter:3.0.3'
（一）布局文件
主頁面上的話，只有一個RecyclerView，他的LayoutManager設為GridLayoutManager，一行為3個
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_images"
android:paddingTop="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
子布局的話，有兩個ImageView，一個是普通的圖片，另外一個固定為那個添加的按鈕
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="90dp"
android:gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_thum"
android:visibility="gone"
android:scaleType="centerCrop"
android:layout_width="90dp"
android:layout_height="match_parent" />
<ImageView
android:visibility="gone"
android:id="@+id/iv_add"
android:src="@mipmap/add_icon"
android:scaleType="centerCrop"
android:layout_width="90dp"
android:layout_height="match_parent" />
</LinearLayout>
（二）Activity代碼
先來看一下如何在我們的頁面里使用我已經寫好的這個adapter
首先初始化一下控件和adapter，給adapter設置一個點擊添加圖片的監聽
private void initView() {
rvImages.setLayoutManager(new GridLayoutManager(this, 3));
adapter = new NineGridAdapter(MainActivity.this, mSelectList, rvImages);
adapter.setMaxSize(maxNum);
rvImages.setAdapter(adapter);
adapter.setOnAddPicturesListener(new OnAddPicturesListener() {
@Override
public void onAdd() {
pickImage();
}
});
}
選擇圖片頁面的啟動
private void pickImage() {
MultiImageSelector selector = MultiImageSelector.create(context);
selector.showCamera(true);
selector.count(maxNum);
selector.multi();
selector.origin(mSelectList);
selector.start(instans, REQUEST_IMAGE);
}
拿到選擇圖片頁面的返回數據，添加至List中
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == REQUEST_IMAGE) {
if (resultCode == RESULT_OK) {
List<String> select = data.getStringArrayListExtra(MultiImageSelector.EXTRA_RESULT);
mSelectList.clear();
mSelectList.addAll(select);
adapter.notifyDataSetChanged();
}
}
}
（三）適配器代碼
首先在構造函數中，往list里添加一個空串，為添加按鈕占位。之后初始化一下刪除氣泡按鈕跟大圖顯示的控件
public NineGridAdapter(Context context, List<String> selectPath, RecyclerView rvImages) {
super(context, R.layout.item_img, selectPath);
this.context = context;
selectPath.add("");
initDeleteMenu();
initTransfer(rvImages);
}
兩個控件初始化的代碼
/**
* 初始化大圖查看控件
*/
private void initTransfer(RecyclerView rvImages) {
transferee = Transferee.getDefault(context);
config = TransferConfig.build()
.setSourceImageList(getDatas())
.setProgressIndicator(new ProgressBarIndicator())
.setIndexIndicator(new NumberIndexIndicator())
.setImageLoader(GlideImageLoader.with(context.getApplicationContext()))
.setJustLoadHitImage(true)
.bindRecyclerView(rvImages, R.id.iv_thum);
}
/**
* 初始化圖片刪除小彈窗
*/
private void initDeleteMenu() {
menuView = new PopupMenuView(context, R.menu.menu_pop, new MenuBuilder(context));
menuView.setSites(PopupView.SITE_TOP);
menuView.setOnMenuClickListener(new OptionMenuView.OnOptionMenuClickListener() {
@Override
public boolean onOptionMenuClick(int position, OptionMenu menu) {
getDatas().remove(deletePosition);
if (!getDatas().get(getDatas().size() - 1).equals("")) {
//列表最后一張不是添加按鈕時，加入添加按鈕
getDatas().add("");
}
notifyDataSetChanged();
return true;
}
});
}
在item填充的函數中完成圖片的顯示，點擊和長按的監聽
@Override
protected void convert(ViewHolder viewHolder, String item, final int position) {
ImageView ivThum = viewHolder.getView(R.id.iv_thum);
ImageView ivAdd = viewHolder.getView(R.id.iv_add);
if (item.equals("")) {
//item為添加按鈕
ivThum.setVisibility(View.GONE);
ivAdd.setVisibility(View.VISIBLE);
} else {
//item為普通圖片
ivThum.setVisibility(View.VISIBLE);
ivAdd.setVisibility(View.GONE);
}
Glide.with(mContext).load(item).into(ivThum);
ivThum.setOnClickListener(new PicturesClickListener(position));
ivAdd.setOnClickListener(new PicturesClickListener(position));
ivThum.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View view) {
deletePosition = position;
//最上面的三個刪除按鈕是往下的 其他的都是往上的
if (position < 3) {
menuView.setSites(PopupView.SITE_BOTTOM);
} else {
menuView.setSites(PopupView.SITE_TOP);
}
menuView.show(view);
return false;
}
});
}
點擊事件代碼
private class PicturesClickListener implements View.OnClickListener {
int position;
public PicturesClickListener(int position) {
this.position = position;
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.iv_thum:
//點擊圖片
config.setNowThumbnailIndex(position);
config.setSourceImageList(getDatas());
transferee.apply(config).show();
break;
case R.id.iv_add:
//點擊添加按鈕
if (listener != null)
listener.onAdd();
break;
}
}
}
四、關於老v7項目的問題
前段時間也是剛把自己的項目從v7手動改為androidx的，忙活了半天，后來發現android studio有一鍵將v7項目改為新的androidx的項目，算是給自己記個筆記
有問題和建議都可以在評論區給我留言哦