Android图片上传实现预览效果

首先具体分析一下，实现的功能，其中需求分析是必不可少的，需求、逻辑清除之后，再上手写代码，思路会很清晰。

1.多图上传首先得选择图片（这里项目需求是既可以拍照上传也可以从相册中选择）

2.拍照上传很简单了网上也有很多例子，调用照相机，返回uri，获取图片

3.从相册中选择图片

•  3.1 获取手机中的所有图片
•  3.2 将图片存到自定义图片数组中显示
•  3.3 自定义viewpager浏览图片

主要的逻辑大体是这样，下面具体看一下实现：

一、首先看一下界面：

<com.view.noscrollgridview 
          android:id="@+id/noscrollgridview" 
          android:layout_marginleft="@dimen/smaller_space" 
          android:layout_marginright="@dimen/smaller_space" 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:horizontalspacing="3dp" 
          android:listselector="@color/transparent" 
          android:numcolumns="3" 
          android:scrollbars="none" 
          android:layout_gravity="center" 
          android:layout_margintop="@dimen/smaller_space" 
          android:verticalspacing="5dp" /> 

是一个 noscrollgridview，项目需要，所以用了不滚动的gridview，大家用gridview也是一样的。

noscrollgridview = (gridview) findviewbyid(r.id.noscrollgridview); 
    noscrollgridview.setselector(new colordrawable(color.transparent)); 
    /*新建传值给adapter*/ 
    if (file == null) { 
      picadapter = new pictureadapter(this, 0, null); 
    } else { 
      //添加失败的图片到数组中 
      for (int i=0;i<file.getmulfailfilepaths().length;i++){ 
        imageitem imageitem = new imageitem(); 
        imageitem.setimagepath(file.getmulfailfilepaths()[i].trim()); 
        bimp.tempselectbitmap.add(imageitem); 
      } 
      /*上传失败传值给adapter*/ 
      picadapter = new pictureadapter(this, 2, file); 
    } 

这个是初始化图片数组，适配器（新建、上传失败、上传成功的图片我用的都是一个adapter）

imageitem是图片的模型，下面有它的属性

//从图库选择的图片model 
public class imageitem extends file implements serializable { 
  @id 
  public string imageid; //图片id 
  public string thumbnailpath;  
  public string imagepath; //图片路径 
  private bitmap bitmap;  
  public boolean isselected = false; 
   
  public string getimageid() { 
    return imageid; 
  } 
  public void setimageid(string imageid) { 
    this.imageid = imageid; 
  } 
  public string getthumbnailpath() { 
    return thumbnailpath; 
  } 
  public void setthumbnailpath(string thumbnailpath) { 
    this.thumbnailpath = thumbnailpath; 
  } 
  public string getimagepath() { 
    return imagepath; 
  } 
  public void setimagepath(string imagepath) { 
    this.imagepath = imagepath; 
  } 
  public boolean isselected() { 
    return isselected; 
  } 
  public void setselected(boolean isselected) { 
    this.isselected = isselected; 
  } 
[java] view plain copy print?
/*根据图片路径获取图片的bitmap*/ 
public bitmap getbitmap() {      
  if(bitmap == null){ 
    try { 
      bitmap = bimp.revitionimagesize(imagepath); 
    } catch (ioexception e) { 
      // todo auto-generated catch block 
      e.printstacktrace(); 
    } 
  } 
  return bitmap; 
} 
public void setbitmap(bitmap bitmap) { 
  this.bitmap = bitmap; 
} 

 接下来是适配器：

由于涉及到添加图片，adapter中添加一个flag用来显示新建的图片，将选择的图片添加到公有的图片数组中，初始化的时候加载图片数组显示。（大家在看的时候可以忽略掉我的flag）

@suppresslint("handlerleak") 
public class pictureadapter extends baseadapter { 
  private layoutinflater inflater; 
  private int selectedposition = -1; 
  private boolean shape; 
  private int flag = 0;//0 默认新建 1上传成功 2上传失败 
  private appitem_file file; 
  public boolean isshape() { 
    return shape; 
  } 
  private activity context; 
 
  public void setshape(boolean shape) { 
    this.shape = shape; 
  } 
 
  public pictureadapter(activity context,int flag,appitem_file file) { 
    this.context = context; 
    inflater = layoutinflater.from(context); 
    this.flag = flag; 
    this.file = file; 
  } 
 
//  public void update() { 
//    loading(); 
//  } 
 
  public int getcount() { 
    if (flag==0){  //新建图片 
      if (bimp.tempselectbitmap.size() == 6) { 
        return 6; 
      } 
      return (bimp.tempselectbitmap.size() + 1); 
    } 
    else if (flag==1){ //上传成功 
      return file.getfilelist().size(); 
    } 
    else { //上传失败 
      return file.getmulfailfilepaths().length; 
    } 
 
  } 
 
 
 
  public object getitem(int arg0) { 
    if (flag==1){ 
      return file.getfilelist().get(arg0); 
    }else { 
      return file.getmulfailfilepaths()[arg0]; 
    } 
  } 
 
  public long getitemid(int arg0) { 
    return arg0; 
  } 
 
  public void setselectedposition(int position) { 
    selectedposition = position; 
  } 
 
  public int getselectedposition() { 
    return selectedposition; 
  } 
 
  public view getview(int position, view convertview, viewgroup parent) { 
    viewholder holder = null; 
    if (convertview == null) { 
      //根据图片的数量加载不同布局 
      if (getcount()==1&&flag!=0){ 
        convertview = inflater.inflate(r.layout.item_published_singal_item, 
            parent, false); 
      } 
      else { 
        convertview = inflater.inflate(r.layout.item_published_grida, 
            parent, false); 
      } 
 
      holder = new viewholder(); 
      holder.image = (imageview) convertview 
          .findviewbyid(r.id.item_grida_image); 
      convertview.settag(holder); 
    } else { 
      holder = (viewholder) convertview.gettag(); 
    } 
 
    /** 
     * 根据初始化adapter传过来的flag值，去不同的地方找图片 
     * flag=0，去bimp的图片数组中找 
     * flag=1，证明上传成功的，去下载好的getfilelist中找 
     * flag=2，为上传失败的，图片保存在failfile中的list<imageitem>中 
     * 优化图片显示 
     */ 
    if (flag==0){  //新建图片 
      if (position == bimp.tempselectbitmap.size()) { 
        holder.image.setimagebitmap(bitmapfactory.decoderesource( 
            convertview.getresources(), r.drawable.icon_add_pic_unfocused)); 
        if (position == 6) { 
          if (flag==0){ 
            holder.image.setvisibility(view.gone); 
          } 
        } 
      } else { 
        holder.image.setimagebitmap(bimp.tempselectbitmap.get(position).getbitmap()); 
      } 
    } 
    else if (flag==1){ //上传成功 
//      list<integer> ids = new arraylist<integer>(); 
//      for (int i=0;i<file.getfilelist().size();i++){ 
//        ids.add(file.getfilelist().get(i).gets_id()); 
//      } 
      int id=file.getfilelist().get(position).gets_id(); 
      try { 
//        file file= needapplication.db.findbyid(file.class,id); 
        string filebigimguri =needapplication.db.findbyid(file.class,id).getfileuribig(); 
        if (filebigimguri!=null&&!"null".equals(filebigimguri)) 
        imageloader.getinstance().displayimage((filebigimguri).trim(),holder.image); 
      } catch (dbexception e) { 
        e.printstacktrace(); 
      } 
    } 
    else { //上传失败 
        string url = "file://"+file.getmulfailfilepaths()[position].trim(); 
        imageloader.getinstance().displayimage(url, holder.image); 
    } 
 
 
    return convertview; 
  } 
 
  public class viewholder { 
    public imageview image; 
  } 
 
} 

 下面是自定义相册界面，用来选择图片的

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"  
  android:background="#e1e0de" 
  > 
 
  <relativelayout 
    android:id="@+id/headview" 
    android:layout_width="fill_parent" 
    android:layout_height="45dp" 
    android:background="@drawable/plugin_camera_title_bar" 
    android:gravity="center_vertical" 
    android:layout_marginbottom="3dp" 
    > 
    <button 
      android:layout_width="60dp" 
      android:layout_height="wrap_content" 
      android:textsize="14sp" 
      android:textcolor="#fff" 
      android:id="@+id/back" 
      android:text="相册" 
      android:background="@drawable/plugin_camera_title_btn_back" 
      android:layout_margintop="5dp" 
      android:layout_marginbottom="5dp" 
      android:layout_centervertical="true" 
      /> 
    <button 
      android:layout_width="67dp"  
      android:layout_height="wrap_content" 
      android:textsize="14sp" 
      android:textcolor="#fff" 
      android:id="@+id/cancel" 
      android:text="取消" 
      android:background="@drawable/plugin_camera_title_btn_cancel" 
      android:layout_centervertical="true" 
      android:layout_marginright="5dp" 
      android:layout_alignparentright="true"  
      /> 
  </relativelayout> 
 
  <relativelayout 
    android:id="@+id/bottom_layout" 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:layout_alignparentbottom="true" 
    android:background="@drawable/plugin_camera_bottom_bar" 
    android:layout_margintop="3dp" 
    > 
    <button 
      android:id="@+id/preview" 
      android:layout_width="90dp" 
      android:layout_height="wrap_content" 
      android:layout_alignparentleft="true" 
      android:layout_centervertical="true" 
      android:layout_marginleft="10dp" 
      android:text="预览" 
      android:background="@drawable/plugin_camera_title_btn_preview" 
      /> 
    <button 
      android:id="@+id/ok_button" 
      android:layout_width="90dp" 
      android:layout_height="wrap_content" 
      android:layout_alignparentright="true" 
      android:layout_centervertical="true" 
      android:layout_marginright="10dp" 
      android:background="@drawable/plugin_camera_ok_btn_state" 
      /> 
  </relativelayout> 
 
  <gridview 
    android:id="@+id/mygrid" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:layout_above="@id/bottom_layout" 
    android:layout_below="@id/headview" 
    android:layout_centerinparent="true" 
    android:layout_margintop="2dp" 
    android:horizontalspacing="10dp" 
    android:numcolumns="4" 
    android:verticalspacing="10dp" 
    android:background="#e1e0de" /> 
  <textview 
    android:id="@+id/mytext" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:text="相册没有图片" 
    android:textcolor="@color/black" 
    /> 
 
</relativelayout> 

 同样也是用了gridview，获取手机中的图片，添加到数组中，显示

这里用到了一个albumhelper（相册帮助类），网上找的代码，感觉挺好的

public list<imagebucket> getimagesbucketlist(boolean refresh) { 
    if (refresh || (!refresh && !hasbuildimagesbucketlist)) { 
      buildimagesbucketlist(); 
    } 
    list<imagebucket> tmplist = new arraylist<imagebucket>(); 
    iterator<entry<string, imagebucket>> itr = bucketlist.entryset() 
        .iterator(); 
    while (itr.hasnext()) { 
      entry<string, imagebucket> entry = (entry<string, imagebucket>) itr 
          .next(); 
      tmplist.add(entry.getvalue()); 
    } 
    return tmplist; 
  } 

获取到数据源之后，该显示了，也就是利用的获取图片帮助类里面的方法

// 初始化，给一些对象赋值 
  private void init() { 
    helper = albumhelper.gethelper(); 
    helper.init(getapplicationcontext()); 
     
    contentlist = helper.getimagesbucketlist(false); 
    datalist = new arraylist<imageitem>(); 
    for(int i = 0; i<contentlist.size(); i++){ 
      datalist.addall( contentlist.get(i).imagelist ); 
    } 
     
    back = (button) findviewbyid(r.id.back); 
    cancel = (button) findviewbyid(r.id.cancel); 
    cancel.setonclicklistener(new cancellistener()); 
    back.setonclicklistener(new backlistener()); 
    preview = (button) findviewbyid(r.id.preview); 
    preview.setonclicklistener(new previewlistener()); 
    intent = getintent(); 
    bundle bundle = intent.getextras(); 
    gridview = (gridview) findviewbyid(r.id.mygrid); 
    gridimageadapter = new albumgridviewadapter(mcontext,datalist,bimp.tempselectbitmap); 
    gridview.setadapter(gridimageadapter); 
    tv = (textview) findviewbyid(r.id.mytext); 
    gridview.setemptyview(tv); 
    okbutton = (button) findviewbyid(r.id.ok_button); 
    okbutton.settext("完成"+"(" + bimp.tempselectbitmap.size() 
        + "/"+ needapplication.picnums+")"); 
  } 

gridimageadapter 
        .setonitemclicklistener(new albumgridviewadapter.onitemclicklistener() { 
 
          @override 
          public void onitemclick(final togglebutton togglebutton, 
              int position, boolean ischecked,button choosebt) { 
            if (bimp.tempselectbitmap.size() >= needapplication.picnums) { 
              togglebutton.setchecked(false); 
              choosebt.setvisibility(view.gone); 
              if (!removeonedata(datalist.get(position))) { 
                toast.maketext(albumactivity.this, "超出可选图片张数", toast.length_short).show(); 
              } 
              return; 
            } 
            if (ischecked) { 
              choosebt.setvisibility(view.visible); 
              bimp.tempselectbitmap.add(datalist.get(position)); 
              okbutton.settext("完成"+"(" + bimp.tempselectbitmap.size() 
                  + "/"+ needapplication.picnums+")"); 
            } else { 
              bimp.tempselectbitmap.remove(datalist.get(position)); 
              choosebt.setvisibility(view.gone); 
              okbutton.settext("完成"+"(" + bimp.tempselectbitmap.size() + "/"+ needapplication.picnums+")"); 
            } 
            isshowokbt(); 
          } 
        }); 

点击图片选择加到公有图片数组中显示已选择。

最后是预览图片，利用自定义viewpager，实现图片滑动，下面贴两张截图吧：

以上就是本文的全部内容，希望对大家的学习有所帮助。