미리 보기 효과 구현

먼저 구체 적 으로 분석 하고 실현 하 는 기능 을 살 펴 보 자.그 중에서 수요 분석 은 없어 서 는 안 된다.수요,논리 가 제 거 된 후에 손 으로 코드 를 쓰 면 사고 방향 이 뚜렷 할 것 이다.
1.멀 티 플 렉 스 업 로드 는 먼저 그림 을 선택해 야 합 니 다.
2.사진 을 찍 어 올 리 는 것 은 간단 합 니 다.인터넷 에 도 많은 예 가 있 습 니 다.카 메 라 를 호출 하고 uri 로 돌아 가 사진 을 가 져 옵 니 다.
3.앨범 에서 그림 선택

 3.1 핸드폰 에 있 는 모든 사진 가 져 오기

 3.2 그림 을 사용자 정의 그림 배열 에 저장 합 니 다

 3.3 사용자 정의 ViewPager 그림 탐색

주요 논 리 는 대체로 이렇다.다음은 구체 적 으로 실현 을 살 펴 보 자.
1.먼저 화면 보기:

<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" /> 

NoScroll GridView 입 니 다.프로젝트 가 필요 하기 때문에 스크롤 하지 않 는 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 를 사용 하여 핸드폰 에 있 는 그림 을 가 져 와 배열 에 추가 하여 표시 합 니 다.
여기 앨범 Helper(앨범 도움말 류)를 사 용 했 는데 인터넷 에서 찾 은 코드 가 좋 은 것 같 아 요.

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 를 이용 하여 그림 이 미 끄 러 지 는 것 을 실현 합 니 다.다음은 캡 처 두 장 을 붙 입 니 다.

이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.