使用RecyclerView选择图片并上传

先看效果图：

在项目中如果多处用到需要上传照片，每次都写重复的代码，未免冗余浪费时间，本文通过封装一个fragment，每次用时只需要在xml文件中写name就可以实现。
即：在当前需要上传图片Activity中，布局文件如下（fragment_select_image）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff"android:orientation="vertical"android:paddingLeft="12dp"android:paddingRight="12dp"tools:context="com.exiu.fragment.selectimageview.MainActivity"><LinearLayout
        android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="22dp"><fragment
            android:id="@+id/fr_image_select"android:name="com.exiu.fragment.selectimageview.SelectImageFragment"android:layout_width="match_parent"android:layout_height="wrap_content"tools:layout="@layout/fragment_select_image"></fragment></LinearLayout><Button
        android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:layout_marginTop="22dp"android:background="@drawable/btn_background"android:text="上传照片"android:textColor="#ffffff"android:textSize="14sp"/>
</LinearLayout>

所以，具体看一下fragment中是如何实现的：
布局文件仅需要一个recyclerView就可以了，如下：

public class SelectImageFragment extends Fragment {private RecyclerView mRecyclerView;private View mView;private ShowImageAdapter mShowImageAdapter;/*** 每次拿到的图片url list集合*/private ArrayList<String> mImageList = new ArrayList<>();/*** 一共所选择图片url list集合*/private ArrayList<String> mTotalImageList = new ArrayList<>();public static final int REQUEST_CODE = 999;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {mView = inflater.inflate(R.layout.fragment_select_image, container, false);initViews();initEvents();return mView;}private void initViews() {mRecyclerView = (RecyclerView) mView.findViewById(R.id.recycler_view);mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3));mShowImageAdapter = new ShowImageAdapter(getContext());mRecyclerView.setAdapter(mShowImageAdapter);}private void initEvents() {mShowImageAdapter.setOnPickerListener(new ShowImageAdapter.OnPickerListener() {@Overridepublic void onPicker(int position) {//根据位置大小判断// 当前是跳转到选择图片Activity(MultiImageSelectorActivity)中还是预览Activity(PhotoPreviewActivity)中if (position == mImageList.size()) {if (position != ShowImageAdapter.MAX_NUMBER) {//此处intent中携带的参数是根据MultiImageSelectorActivity的参数互相匹配使用，个人可根据自己的项目要求进行设置Intent intent = new Intent(getActivity(), MultiImageSelectorActivity.class);intent.putExtra(MultiImageSelectorActivity.EXTRA_SHOW_CAMERA, true);intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_COUNT, ShowImageAdapter.MAX_NUMBER);intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_MODE, MultiImageSelectorActivity.MODE_MULTI);if (mImageList != null && mImageList.size() > 0) {intent.putStringArrayListExtra(MultiImageSelectorActivity.EXTRA_DEFAULT_SELECTED_LIST, mImageList);}startActivityForResult(intent, REQUEST_CODE);}} else {//跳转到图片预览界面PhotoPreviewActivity.startActivity(getActivity(), position, mImageList);}}});}@Overridepublic void onActivityResult(int requestCode, int resultCode, Intent data) {super.onActivityResult(requestCode, resultCode, data);switch (requestCode) {case REQUEST_CODE:if (getActivity().RESULT_OK == resultCode) {//获取图片urlmImageList = data.getStringArrayListExtra(MultiImageSelectorActivity.EXTRA_RESULT);mTotalImageList.clear();for (String imageUrl : mImageList) {mTotalImageList.add(imageUrl);}mShowImageAdapter.setImageUrlList(mTotalImageList);}break;}}
}

在这里说明一下，MultiImageSelectorActivity 是github中开源项目MultiImageSelectorActivity ，根据其所提供的参数进行选择引用即可。

接下来再看一下recyclerView中的Adapter的实现：
布局item文件：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:padding="5dp"android:layout_height="80dp"android:orientation="vertical"><ImageView
        android:id="@+id/iv_pic"android:layout_width="80dp"android:layout_height="80dp"android:src="@mipmap/xiangji"/><ImageView
        android:id="@+id/iv_del"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|end"android:src="@mipmap/image_show_piceker_del"/>
</FrameLayout>

Adapter中实现主要onBindViewHolder()判断显示的类型，以及监听接口设置：

public class ShowImageAdapter extends RecyclerView.Adapter<ShowImageAdapter.ViewHolder> {/*** 图片路径url*/private List<String> mImageUrlList=new ArrayList<>();private Context mContext;/*** 最大选择图片的数量*/public static final int MAX_NUMBER = 9;private OnPickerListener mOnPickerListener;public ShowImageAdapter(Context context) {this.mContext = context;}public void setImageUrlList(List<String> imageUrlList){this.mImageUrlList=imageUrlList;this.notifyDataSetChanged();}public void setOnPickerListener(OnPickerListener onPickerListener) {mOnPickerListener = onPickerListener;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);ViewHolder viewHolder=new ViewHolder(view);return viewHolder;}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {//判断位置显示的内容// 如果当前图片的数量是0，或者大于所选择图片的数量则显示一个带选择图片的image，同时隐藏删除按钮if (mImageUrlList.size() == 0 || mImageUrlList.size() == position) {holder.mImageViewDel.setVisibility(View.GONE);holder.mImageView.setImageBitmap(BitmapFactory.decodeResource(mContext.getResources(),R.mipmap.xiangji));} else {//否则每个图片直接显示删除按钮，并加载显示图片holder.mImageViewDel.setVisibility(View.VISIBLE);//glide加载图片Glide.with(mContext).load(mImageUrlList.get(position)).placeholder(R.mipmap.xiangji).into(holder.mImageView);}}@Overridepublic int getItemCount() {return mImageUrlList.size() < MAX_NUMBER ? mImageUrlList.size() + 1 : mImageUrlList.size();}class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {ImageView mImageView, mImageViewDel;public ViewHolder(View itemView) {super(itemView);mImageViewDel = (ImageView) itemView.findViewById(R.id.iv_del);mImageView = (ImageView) itemView.findViewById(R.id.iv_pic);mImageViewDel.setOnClickListener(this);mImageView.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.iv_pic:mOnPickerListener.onPicker(getLayoutPosition());break;case R.id.iv_del:mImageUrlList.remove(getLayoutPosition());notifyItemRemoved(getLayoutPosition());break;default:break;}}}/*** recyclerView设置的监听接口*/public interface OnPickerListener{void onPicker(int position);}}

基本流程就是这样的，在实现了自定义fragment后，项目中需要用到上传照片的界面直接在布局文件中引用即可，很方便。

使用RecyclerView选择图片并上传相关推荐

微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器
最后更新17.01.20 一.首先这是HTML的代码将要显示一张图片二.然后这是JavaScript代码 var img_my = document.getElementById('my_img_ ...
FileUpload选择图片并上传
在上传按钮的事件里: //文件上传 protected void btn_Click(object sender, EventArgs e) { if (FileUpload1.HasFile)//判 ...
uniapp选择图片裁剪,上传到服务器
uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera(opens new win ...
MUI+HTML5+Plus 拍照或者相册选择图片并上传服务器
引入文件 css:mui.min.css.app.css.iconfont.css.feedback-page.css.font-awesome.min.css js:jquery.js.common ...
unity从本地选择图片并上传
unity实现打开文件夹选择图片的两种方式: 一.引用System.Windows.Forms 此方法需要在unity的安装目录中找到System.Windows.Forms.dll文件并放在项目的P ...
图片粘贴上传(方法二)
针对之前的图片粘贴上传方法进行封装,并给出使用案例,如下: 目录一.封装的文件 1.css文件:paste-img-util.css 2.js文件:paste-img-util.js 3.表单上传j ...
使用SSM框架实现图片的上传
SSM实现图片上传功能效果在前端页面点击上传图片功能按钮,即弹出文件管理器,选择图片并上传: 思路在前端页面添加 input 标签,type选择file. 在后端controller编写方法. ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

使用RecyclerView选择图片并上传

使用RecyclerView选择图片并上传相关推荐

最新文章

热门文章