Android小坑Android开发经验谈Android开发

用RecyclerView实现动态添加本地图片

2017-08-09  本文已影响117人  badc59a1a8c4

本文所用的多图选择的library来自:https://github.com/lovetuzitong/MultiImageSelector

简单介绍一下用法:
1、跳转到图片选择页面:

  Intent intent = new Intent(PassengerSetActivity.this, MultiImageSelectorActivity.class);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SHOW_CAMERA, true);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_COUNT, 9);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_MODE, MultiImageSelectorActivity.MODE_SINGLE);
                    startActivityForResult(intent, 10001);//10001-->添加

2、通过onActivityResult获取信息:

 final ArrayList<String> paths = data.getStringArrayListExtra(MultiImageSelectorActivity.EXTRA_RESULT);
                Bitmap bitmap = BitmapFactory.decodeFile(paths.get(0), DIY_dialog.getBitmapOption(4));

首先设置布局管理器为:

recyclerview.setLayoutManager(new GridLayoutManager(this, 3));

然后设置适配器(这里在代码里面有详细的注释):

public class PassengerAdapter extends RecyclerView.Adapter<PassengerAdapter.ViewHolder> {
    private Context mContext;
    private OnItemClickLitener listener;//点击事件接口
    private ArrayList<String> imageUrls;
    private ImageFetcher imageFetcher;
    private ViewHolder viewHolder;
    private View view;

    /**
     * 在构造方法中传入图片地址的数据
     * @param context
     * @param imageUrls
     */
    public PassengerAdapter(Context context, ArrayList<String> imageUrls) {
        this.mContext = context;
        this.imageUrls = imageUrls;
        //初始化加载网络图片的jar包
        imageFetcher = new ImageFetcher(context);
        imageFetcher.setImageCache(ImageCache.getInstance(context));
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         view = LayoutInflater.from(mContext).inflate(R.layout.lay_passager, null);
         viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //设置内容为“hehe”的的元素为默认的添加按钮
        if (imageUrls.get(position).equals("hehe")) {
            holder.imageViewBig.setBackgroundResource(R.mipmap.add);
            //当图片是添加按钮的时候隐藏删除按钮
            holder.imageViewSmall.setVisibility(View.GONE);
        } else {
            holder.imageViewSmall.setVisibility(View.VISIBLE);
            /**
             * 判断图片路径是网络地址还是本地图片
             * 设置路径之中包含“storage”的为本地图片
             */
            if (imageUrls.get(position).contains("storage")) {
                try {
                    File file = new File(imageUrls.get(position));
                    //将bitmap转化成drawable
                   Bitmap bmp = MediaStore.Images.Media.getBitmap(mContext.getContentResolver(), Uri.fromFile(file));
                    Drawable drawable =new BitmapDrawable(bmp);
                    //按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)
                    holder.imageViewBig.setScaleType(ImageView.ScaleType.CENTER_CROP);
                    holder.imageViewBig.setImageBitmap(bmp);
                } catch (IOException e) {
                    e.printStackTrace();
                }
//                holder.imageViewBig.setImageURI(Uri.parse(imageUrls.get(position)));
            } else {
                imageFetcher.loadImage(imageUrls.get(position), holder.imageViewBig, R.mipmap.touxiang);
            }
        }
    }


    @Override
    public int getItemCount() {
        return imageUrls.size();
    }



    public void setOnItemClickLitener(OnItemClickLitener listener) {
        this.listener = listener;
    }

    public interface OnItemClickLitener {
        void onBigClick(int position);

        void onSmallClick(int position);
    }
    class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageViewBig, imageViewSmall;

        public ViewHolder(View itemView) {
            super(itemView);
            imageViewBig = (ImageView) itemView.findViewById(R.id.imageViewBig);
            imageViewSmall = (ImageView) itemView.findViewById(R.id.imageViewSmall);
            /**
             *
             * 因为元素是变化的,动态的,所以对点击事件的处理放在ViewHolder类里面,调用getposition()
             * 可以获取到当前的元素位子
             */
            imageViewBig.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = (Integer) v.getTag();
                    listener.onBigClick(getPosition());
                }
            });
            imageViewSmall.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = (Integer) v.getTag();
                    listener.onSmallClick(getPosition());
                }
            });
        }
    }
}

recycler的布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/lay_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageViewBig"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:background="@mipmap/background"
            />
        <ImageView
            android:id="@+id/imageViewSmall"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@mipmap/del"
            android:layout_gravity="right"/>
    </FrameLayout>
</FrameLayout>

配置recyclerview和设置点击事件

recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerview.setLayoutManager(new GridLayoutManager(this, 3));
        if(imageUrls.size()==0){
            imageUrls.add("hehe");
        }
        passengerAdapter = new PassengerAdapter(this, imageUrls);
        recyclerview.setAdapter(passengerAdapter);
        passengerAdapter.setOnItemClickLitener(new PassengerAdapter.OnItemClickLitener() {
            @Override
            public void onBigClick(int position) {
                Log.d(TAG, "onBigClick: "+passengerAdapter.getItemCount());
                Log.d(TAG, "onBigClick: "+position);
                if (position==imageUrls.size()-1) {
                    //添加本地相册图片,更新视图
                    Intent intent = new Intent(PassengerSetActivity.this, MultiImageSelectorActivity.class);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SHOW_CAMERA, true);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_COUNT, 9);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_MODE, MultiImageSelectorActivity.MODE_SINGLE);
                    startActivityForResult(intent, 10001);//10001-->添加
                } else {
                    Intent intent = new Intent(PassengerSetActivity.this, MultiImageSelectorActivity.class);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SHOW_CAMERA, true);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_COUNT, 9);
                    intent.putExtra(MultiImageSelectorActivity.EXTRA_SELECT_MODE, MultiImageSelectorActivity.MODE_SINGLE);
                   poss = position;
                    startActivityForResult(intent, 10002);//10002-->修改
                    //修改图片,更新视图
                }

            }
            @Override
            public void onSmallClick(int position) {
                imageUrls.remove(position);
                passengerAdapter.notifyItemRemoved(position);
                //删除图片,更新视图
            }
        });

选择完图片后,进行ui更新的操作

  /**
     * 返回图片url,并上传七牛
     *
     * @param requestCode
     * @param resultCode
     * @param data
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(data!=null){
            if (requestCode == 10001 || requestCode == 10002) {
                final ArrayList<String> paths = data.getStringArrayListExtra(MultiImageSelectorActivity.EXTRA_RESULT);
                Bitmap bitmap = BitmapFactory.decodeFile(paths.get(0), DIY_dialog.getBitmapOption(4));
                //添加图片
                if (requestCode == 10001) {
                    //将添加的图片放在第一位
                   imageUrls.add(0,paths.get(0));
                    //更新第一个位置的图片
                    passengerAdapter.notifyItemInserted(0);
                }
                //修改图片
                else if (requestCode == 10002&&imageUrls.size()>0) {
                    int pos = poss;
                    imageUrls.set(pos,paths.get(0));
                    passengerAdapter.notifyItemChanged(pos);
                }

            }
        }

    }

大概就是这样了,简单的说一下思路,就是在存储图片的list<String>的最后一项添加一个具有不同标识的数据,当点击时对应的标识和该标识一致,则添加,反之为修改。使用recylerview可以直接更新有变化的子项,而不用更新全部子项,用户体验更好,性能也提高了。
好了,今天就这样了。
---2016-07-15

上一篇下一篇

猜你喜欢

热点阅读