One, foreword
To the requirements of the work, the need to have a similar WeChat friends send dynamic function to upload pictures, remembered has ever done, but the horror of having to watch his former write code, think to encapsulate a easy to use, easy to maintain similar functionality, after their use conveniently, but also convenient, so we can speed up the efficiency of our work, Let’s have more time to learn.
In terms of functions, there are currently adding pictures, viewing large pictures and deleting pictures
Second, the effect drawing
Let’s paste the effect picture first
Three, to achieve the function
Rvadapter for Glide Adapter for Butterknife and display image, add a bubble popover for delete function to introduce the following dependencies:
API 'com. Jakewharton: butterknife: 10.2.1 annotationProcessor' com. Jakewharton: butterknife - compiler: 10.2.1 ' Implementation 'com. Making. Bumptech. Glide: glide: 4.5.0' annotationProcessor 'com. Making. Bumptech. Glide: the compiler: 4.5.0' / / bubble popup window implementation 'me. Kareluo. UI: popmenu: 1.1.0' implementation 'com. Zhy: base - rvadapter: 3.0.3'Copy the code#### (a) layout file on the home page, only a RecyclerView, his LayoutManager set to GridLayoutManager, a behavior of 3
<? The 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>Copy the codeFor the sub-layout, there are two ImageViews, one for the normal image, and one for the fixed button that was added
<? The 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>Copy the code(2) Activity code
Let’s take a look at how to use the adapter I’ve already written in our page
First initialize the control and adapter, and give the adapter a listener that clicks add image
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(); }}); }Copy the codeSelect the image page to launch
private void pickImage() {
MultiImageSelector selector = MultiImageSelector.create(context);
selector.showCamera(true);
selector.count(maxNum);
selector.multi();
selector.origin(mSelectList);
selector.start(instans, REQUEST_IMAGE);
}
Copy the codeTake the returned data from the selected image page and add it to the 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(); }}}Copy the code(iii) Adapter code
First, in the constructor, add an empty string to the list to make room for the add button. Then initialize the control to remove the bubble button and the large image display
public NineGridAdapter(Context context, List<String> selectPath, RecyclerView rvImages) {
super(context, R.layout.item_img, selectPath);
this.context = context;
selectPath.add("");
initDeleteMenu();
initTransfer(rvImages);
}
Copy the codeCode for initialization of two controls
/ / private void initTransfer(RecyclerView rvImages) {transferee = transfere.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.mu.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("")) {// Add the add button getDatas().add(""); } notifyDataSetChanged(); return true; }}); }Copy the codeDisplay the picture in the function filled with item, click and long press
@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 adds the button ivthum.setvisibility (view.gone); ivAdd.setVisibility(View.VISIBLE); } else {//item is a normal image 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); if (position < 3) {menuView.setSites(popupview.site_bottom); } else { menuView.setSites(PopupView.SITE_TOP); } menuView.show(view); return false; }}); }Copy the codeClick event code
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: / / click picture config. The setNowThumbnailIndex (position); config.setSourceImageList(getDatas()); transferee.apply(config).show(); break; Case r.i.iv_add: // Click the add button if (listener! = null) listener.onAdd(); break; }}}Copy the code# 4, About the old V7 project question some time ago also just changed my project from V7 manually to AndroidX, busy for a long time, later found that Android Studio has a button to change the V7 project to the new AndroidX project, as a note to myself
Let me know in the comments section if you have any questions or suggestions
Source code address: github.com/Giftedcat/D…