RecyclerView配合GridLayoutManager实现选择图片和视频

先看截图

在这里插入图片描述

activity 布局
<?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="match_parent"
    android:background="#FFFFFF"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <include layout="@layout/action_bar" />

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#F5F5F5"
        android:overScrollMode="never">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:gravity="center_vertical"
                android:text="问题和意见"
                android:textColor="#666666"
                android:textSize="18sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/etFeed"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_bg_white_002"
                android:gravity="left|top"
                android:hint="请填写您的宝贝意见,感谢您的支持(必填)"
                android:minLines="6"
                android:padding="4dp"
                android:textColor="#999999"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:gravity="center_vertical"
                android:text="图片和视频"
                android:textColor="#666666"
                android:textSize="18sp"
                android:textStyle="bold" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/mRecyclerView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFFFFF"
                android:nestedScrollingEnabled="false"
                android:padding="12dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:gravity="center_vertical"
                android:text="联系方式"
                android:textColor="#666666"
                android:textSize="18sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/etPhone"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:background="@drawable/tv_bg_white_002"
                android:gravity="left|top"
                android:hint="请留下您的联系方式,以便于我们更好的了解问题"
                android:maxLength="11"
                android:inputType="phone"
                android:padding="4dp"
                android:textColor="#999999"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tvSubmit"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_marginTop="60dp"
                android:layout_marginBottom="40dp"
                android:background="@drawable/btn_bg_red_201"
                android:gravity="center"
                android:singleLine="true"
                android:text="提交"
                android:textAllCaps="false"
                android:textColor="#FFFFFF"
                android:textSize="18sp"
                android:textStyle="bold" />

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</LinearLayout>
activity 业务逻辑主要代码
// 注意:这里有两个集合需要贴出来,有关集合的内容自行修改
private List<String> mPicList;              // 从图库选择图片返回的图片路径
private List<String> mPicIdList = new ArrayList<>();            // 上传图片后返回的图片id


mRecyclerView.setLayoutManager(new GridLayoutManager(mActivity, 4, OrientationHelper.VERTICAL, false));
mRecyclerView.setAdapter(mRecyclerViewAdapter = new FormImgAdapter(mActivity));
mRecyclerViewAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {
    @Override
    public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
        if (view.getId() == R.id.ivDelete) {
            mPicIdList.remove(position);
            mRecyclerViewAdapter.remove(position);
        }
    }
});

// FootView
View footView = getLayoutInflater().inflate(R.layout.item_gd_img, null);
RoundedImageView ivPic = footView.findViewById(R.id.ivPic);
ivPic.setImageResource(R.mipmap.add_1);
ivPic.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    	// 这里使用里知乎的图片选择框架,关于知乎图片选择框架的信息看文章最后
        Matisse.from(mActivity)
                //.choose(MimeType.of(MimeType.JPEG, MimeType.PNG))     // 要显示的文件类型,带过滤功能
                .choose(MimeType.ofImage())         // 要显示的文件类型
                .countable(true)
                .showSingleMediaType(true)          // 只显示一种文件类型
                .maxSelectable(30)                  // 不写这个方法或者方法参数传1是单选,传数字几就是选几个
                .theme(R.style.Matisse_Zhihu)       // 蓝色主题:Matisse_Zhihu   深色主题:Matisse_Dracula
                .restrictOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED)
                .thumbnailScale(0.85f)
                .imageEngine(new MyGlideEngine())
                .capture(true)                      // 使用相机,和 captureStrategy 一起使用
                .captureStrategy(new CaptureStrategy(true, "com.elon.zhzh.fileProvider"))
                .forResult(1024);

    }
});
// mPicListAdapter.addHeaderView(headerView);
// mPicListAdapter.setHeaderViewAsFlow(true);// 不允许占一行
mRecyclerViewAdapter.addFooterView(footView);
mRecyclerViewAdapter.setFooterViewAsFlow(true);// 不允许占一行




// 接收选中的图片数据
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    try {
        // 选图片
        if (requestCode == 1024 && resultCode == RESULT_OK) {
            uploadFileSuccSize = 0;
            List<String> mPicList = Matisse.obtainPathResult(data);
            if (mPicList != null && mPicList.size() > 0) {
                for (String item : mPicList) {
                    mPicIdList.add(item); 
                    mRecyclerViewAdapter.addData(item);
                }
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
        ToastUtils.showShort("数据异常");
    }
}

FormImgAdapter 数据适配器
/**
 * 图片列表
 */
// 关于 BaseQuickAdapter 请看文章后面
public class FormImgAdapter extends BaseQuickAdapter<String, BaseViewHolder> {
    private final Context context;
    private boolean showDelete = true;// 删除按钮

    public FormImgAdapter(Context context) {
        super(R.layout.item_gd_img, null);// 加载布局
        this.context = context;
        setOnItemClickListener((adapter, view, position) ->
                ImagePreview.getInstance()
                        .setContext(context)
                        .setIndex(position)
                        .setImageList(getData())
                        .setLoadStrategy(ImagePreview.LoadStrategy.AlwaysOrigin)
                        .setEnableDragClose(true)
                        .setShowCloseButton(true)
                        .setShowDownButton(false)
                        .start());
    }

    @Override
    protected void convert(BaseViewHolder helper, String item) {
        helper.setVisible(R.id.ivDelete, showDelete);// 删除按钮的显示和隐藏
        helper.addOnClickListener(R.id.ivDelete);// 添加点击事件
        if (item != null) {
            RequestOptions options = new RequestOptions()
                    .error(R.drawable.default_error_img)
                    .placeholder(R.drawable.default_image);

            Glide.with(context)
                    .load(item)
                    .thumbnail(0.5f)
                    .apply(options)
                    .into((RoundedImageView) helper.getView(R.id.ivPic));
        }
    }

    public void showDelete(boolean showDelete) {
        this.showDelete = showDelete;
        notifyDataSetChanged();
    }
}

item 截图

在这里插入图片描述

item 布局
<?xml version="1.0" encoding="utf-8"?>
<com.elon.zhzh.elon.widget.GrideViewItemLayout 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="match_parent"
    android:padding="4dp">

    <com.itheima.roundedimageview.RoundedImageView
        android:id="@+id/ivPic"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        app:riv_corner_radius="10dp"
        app:riv_mutate_background="true"
        app:riv_oval="false"
        app:riv_tile_mode="clamp" />

    <ImageView
        android:id="@+id/ivDelete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:padding="10dp"
        android:src="@drawable/appitem_del_btn"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/ivVideo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        android:src="@drawable/ic_video_file_picker"
        android:visibility="gone" />

</com.elon.zhzh.elon.widget.GrideViewItemLayout>
item 根布局 GrideViewItemLayout 类代码
/**
 * 控制GrideView的item显示成正方形
 */
public class GrideViewItemLayout extends RelativeLayout {

    public GrideViewItemLayout(Context context) {
        super(context);
    }

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

    public GrideViewItemLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec));
        int childWidhtSize = getMeasuredWidth();
        heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidhtSize, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}
关于知乎图片选择框架
// matisse 知乎图片选择框架
implementation 'com.zhihu.android:matisse:0.5.3-beta3'// AndroidX架构
// implementation 'com.zhihu.android:matisse:0.5.2-beta3'
关于 BaseQuickAdapter 类BaseRecyclerViewAdapterHelper 框架
// BaseQuickAdapter 是 BaseRecyclerViewAdapterHelper 框架封装的类,这里放出gradle依赖,想了解更多请自行Google
// BaseRecyclerViewAdapterHelper
implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.30'
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值