Android GridView仿微信添加多图效果

 更新时间:2018年05月14日 08:41:07   作者:dwf_学海无涯  
这篇文章主要为大家详细介绍了Android GridView仿微信添加多图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了GridView仿微信添加多图效果展示的具体代码,供大家参考,具体内容如下

栗子惯例,先上GIF


在项目中这种添加⑨图的效果应该是非常常见的,后面有个添加的按钮应该怎么实现,这也许让一部分小白抓狂了吧~来吧,淡漠带你飞,走起~~啦啦啦......

起飞前先说下,本篇只是讲解九宫格添加图片的效果,至于选择图片的效果是别人写的库,我只是接过来做选择图片用的~

1.首先这是用GridView实现的
xml布局就一个GridView

 <GridView
  android:id="@+id/gridView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:columnWidth="90dp"
  android:gravity="center"
  android:horizontalSpacing="4dp"
  android:numColumns="3"
  android:scrollbars="none"
  android:stretchMode="columnWidth"
  android:verticalSpacing="4dp" />

2.接下来看看java代码

 //图片数据,ImageItem是图片选择的库自带的Bean
 private ArrayList<ImageItem> images;
 //adapter是核心,添加按钮的处理删除的处理都在里面,后面会说,别急
 private MultiImageAdapter adapter;
 //初次进入的时候先只传this
 adapter = new MultiImageAdapter(this);
 gridView.setAdapter(adapter);

 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);
  if (data != null && requestCode == 3) {
   //判断一下是否有数据,有的话就addAll(),不会覆盖已经有的图
   if(images == null){
    images = (ArrayList<ImageItem>)
      data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS);
   }else{
    images.addAll((ArrayList<ImageItem>)
      data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS));
   }
   //拿到图片数据后把images传过去
   adapter = new MultiImageAdapter(this,images);
   gridView.setAdapter(adapter);
  } else {
   Toast.makeText(this, "没有选择图片", Toast.LENGTH_SHORT).show();
  }
 }

Ok,Java代码也讲完了,到这里没有什么复杂的吧,添加按钮和删除按钮的处理都在Adapter里面,下面开始说核心的Adapter

3.核心Adapter

先看xml吧

 <?xml version="1.0" encoding="utf-8"?>
 <com.anfq.mylibrary.view.SquareLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:background="#ffffff"
  android:layout_height="match_parent">
  <RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <ImageView
    android:id="@+id/ivIcon"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:scaleType="fitXY" />
   <ImageButton
    android:id="@+id/ibDelete"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@null"
    android:padding="10dp"
    android:src="@drawable/del" />
  </RelativeLayout>
  <ImageButton
   android:id="@+id/ibAdd"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_centerInParent="true"
   android:background="#eeeeee"
   android:src="@drawable/add"
   android:visibility="gone" />
 </com.anfq.mylibrary.view.SquareLayout>

xml也不复杂,最外层的SquareLayout是一个让GridView显示的Item为正方形的处理,RelativeLayout里有个ImageView这个是用来展示图片的,ImageButton是删除的按钮;然后外面ImageButton是添加按钮,设置了隐藏属性android:visibility="gone",只有在需要的时候才把添加按钮召唤出来,添加完9个图片的时候是没有添加按钮的。

把SquareLayout的代码也插上吧~

 public class SquareLayout extends RelativeLayout {
  public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
   super(context, attrs, defStyle);
  }
  public SquareLayout(Context context, AttributeSet attrs) {
   super(context, attrs);
  }
  public SquareLayout(Context context) {
   super(context);
  }
  @SuppressWarnings("unused")
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),
     getDefaultSize(0, heightMeasureSpec));
   int childWidthSize = getMeasuredWidth();
   int childHeightSize = getMeasuredHeight();
   // 高度和宽度一样
   heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(
     childWidthSize, MeasureSpec.EXACTLY);
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }
 }

Adapter来了

 public class MultiImageAdapter extends BaseAdapter {
  private Activity activity;
  private LayoutInflater inflater;
  private ArrayList<ImageItem> mImages;
  //用来判断是否是刚刚进入,刚进入只显示添加按钮,也就是上面java代码中只传this的时候
  private boolean is = false;
  ImagePicker imagePicker = ImagePicker.getInstance();
  public MultiImageAdapter(Activity activity, ArrayList<ImageItem> images) {
   this.activity = activity;
   this.inflater = LayoutInflater.from(activity);
   this.mImages = images;
   initImagePicker();//设置图片选择的一些属性
  } public MultiImageAdapter(Activity activity) {
   this.activity = activity;
   this.inflater = LayoutInflater.from(activity);
   is = true;//设置为true表示第一次初始化
   initImagePicker();//设置图片选择的一些属性
  }
  @Override
  public int getCount() {
   if(!is){
    //这里判断数据如果有9张就size等于9,否则就+1,+1是为按钮留的位置
    return mImages.size()==9?mImages.size():mImages.size()+1;
   }
   //没有数据就是1,1是为按钮留的位置
   return 1;
  }
  @Override
  public Object getItem(int position) {
   return mImages.get(position);
  }
  @Override
  public long getItemId(int position) {
   return position;
  }
  @Override
  public View getView(final int position, View view, final ViewGroup parent) {
   ViewHolder holder = null;
   if (null == view) {
    view = inflater.inflate(R.layout.item_ulti_image, null);
    holder = new ViewHolder();
    holder.ivIcon = (ImageView) view.findViewById(R.id.ivIcon);
    holder.ibAdd = (ImageButton) view.findViewById(R.id.ibAdd);
    holder.ibDelete = (ImageButton) view.findViewById(R.id.ibDelete);
    view.setTag(holder);
   } else {
    holder = (ViewHolder) view.getTag();
   }
   if(!is){
    //选了图片后会进入这里,先判断下position 是否等于size
    if(position == mImages.size()){
     //执行到这里就说明是最后一个位置,判断是否有9张图
     if(mImages.size() != 9){
      //没有9张图就显示添加按钮
      holder.ibAdd.setVisibility(View.VISIBLE);
     }else{
      //有就隐藏
      holder.ibAdd.setVisibility(View.GONE);
     }
    }else{
     //还不是最后一个位置的时候执行这里
     //隐藏添加按钮,要设置图片嘛~
     holder.ibAdd.setVisibility(View.GONE);
     //根据条目位置设置图片
     ImageItem item = mImages.get(position);
     Glide.with(activity)
       .load(item.path)
       .into(holder.ivIcon);
    }
    //删除按钮的点击事件
    holder.ibDelete.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
      //移除图片
      mImages.remove(position);
      //更新
      notifyDataSetChanged();
     }
    });
   }else{
    //初次初始化的时候显示添加按钮
    holder.ibAdd.setVisibility(View.VISIBLE);
   }
   //添加按钮点击事件
   holder.ibAdd.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
     //判断是否是初始化进入
     if(!is){
      //到这里表示已经选过了,然后用9-size算出还剩几个图的位置
      imagePicker.setSelectLimit(9-mImages.size());//选中数量限制
     }
     //跳转到图片选择
     Intent intent = new Intent(activity, ImageGridActivity.class);
     activity.startActivityForResult(intent, 3);
    }
   });
   return view;
  }
  protected class ViewHolder {
   /** icon */
   protected ImageView ivIcon;
   /** 移除 */
   protected ImageButton ibDelete;
   /**添加 */
   protected ImageButton ibAdd;
  }
  private void initImagePicker() {
   imagePicker.setImageLoader(new GlideImageLoader()); //设置图片加载器
   imagePicker.setShowCamera(true);//显示拍照按钮
   imagePicker.setCrop(true);//允许裁剪(单选才有效)
   imagePicker.setSaveRectangle(true);//是否按矩形区域保存
   imagePicker.setSelectLimit(9);//选中数量限制
   imagePicker.setStyle(CropImageView.Style.CIRCLE);//裁剪框的形状
   imagePicker.setFocusWidth(100);//裁剪框的宽度。单位像素(圆形自动取宽高最小值)
   imagePicker.setFocusHeight(100);//裁剪框的高度。单位像素(圆形自动取宽高最小值)
   imagePicker.setOutPutX(1000);//保存文件的宽度。单位像素
   imagePicker.setOutPutY(1000);//保存文件的高度。单位像素
  }
 }

总结:其实原理就是把数据的size+1,做为添加按钮的放置,然后判断下有9张图就不显示添加按钮,并且size也不+1,就这样,一个带添加按钮的GridView就好了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android应用开发中自定义ViewGroup视图容器的教程

    Android应用开发中自定义ViewGroup视图容器的教程

    这篇文章主要介绍了Android应用开发中自定义ViewGroup视图容器的教程,重点在于View之间的参数传递,文中还讲到了使用ViewDragHelper自定义ViewGroup的方法,需要的朋友可以参考下
    2016-04-04
  • OpenGL ES透视投影实现方法(四)

    OpenGL ES透视投影实现方法(四)

    这篇文章主要为大家详细介绍了OpenGL ES透视投影的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Android如何实现蓝牙配对连接功能

    Android如何实现蓝牙配对连接功能

    Android 并没有开放配对连接耳机的接口,而且网上大部分资料都是讲解如何连接蓝牙4.0的,很少有资料详细介绍蓝牙2.0相关的。期间还是踩了不少坑才摸索出解决办法。所以把我自己摸索总结出来的经验梳理记录下,以便备份
    2021-05-05
  • 解决Android模拟器端口被占用问题的办法

    解决Android模拟器端口被占用问题的办法

    这篇文章主要为大家分享了Android模拟器端口被占用问题的解决办法,遇到Android模拟器端口被占用的时候,真的很头疼,如何才能解决端口被占用的问题,下文为大家揭晓
    2015-12-12
  • Android ListView隐藏右侧滚动条功能

    Android ListView隐藏右侧滚动条功能

    这篇文章主要介绍了Android ListView隐藏右侧滚动条功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • android实现Uri获取真实路径转换成File的方法

    android实现Uri获取真实路径转换成File的方法

    这篇文章主要介绍了android实现Uri获取真实路径转换成File的方法,涉及Android操作路径的相关技巧,需要的朋友可以参考下
    2015-05-05
  • Android开发软键盘遮挡登陆按钮的完美解决方案

    Android开发软键盘遮挡登陆按钮的完美解决方案

    在应用登陆页面我们需要填写用户名和密码。当填写这些信息的时候,软键盘会遮挡登陆按钮,这使得用户体验较差。今天小编给大家分享本教程给大家介绍解决android软键盘遮挡登陆按钮的方法,感兴趣的朋友一起学习吧
    2016-10-10
  • android中图片的三级缓存cache策略(内存/文件/网络)

    android中图片的三级缓存cache策略(内存/文件/网络)

    实现图片缓存也不难,需要有相应的cache策略。这里我采用 内存-文件-网络 三层cache机制,其中内存缓存包括强引用缓存和软引用缓存(SoftReference),其实网络不算cache,这里姑且也把它划到缓存的层次结构中
    2013-06-06
  • 简单实现Android验证码

    简单实现Android验证码

    在登录或者注册的时候要求输入验证码,这篇文章主要为大家详细介绍了如何简单实现Android验证码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Android编程实现上方通知栏里闪动效果的方法

    Android编程实现上方通知栏里闪动效果的方法

    这篇文章主要介绍了Android编程实现上方通知栏里闪动效果的方法,结合实例形式分析了Android通知栏动画特效具体实现技巧,需要的朋友可以参考下
    2017-02-02

最新评论