Android照片墙实现 -- 布局设计以及数据处理

本文主要介绍照片墙的布局和数据处理

1. 主界面为GridView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    >
	
    <GridView 
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:id="@+id/photo_wall"
	    android:layout_width="fill_parent"  
	    android:layout_height="fill_parent"
	    android:columnWidth="90dp"
	    android:numColumns="auto_fit"
	    android:verticalSpacing="12dp"
	    android:horizontalSpacing="12dp"
	    android:stretchMode="columnWidth"
	    android:gravity="center"
        ></GridView>
    
</LinearLayout>

2. 图片的样式设计

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:background="#00000000"
    >

    <ImageView 
        android:id="@+id/photo"
        android:background="@+drawable/android:picture_frame"
       	android:layout_width="100dp"
        android:layout_height="110dp"  
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        />

</RelativeLayout>

很简单，有两个需要注意的地方

a. 将图片设置为同样尺寸

原本打算通过计算图像按比例进行缩小，但是实现效果不好，出现卡顿，主要因为处理图片比较耗时，最后采用的版本是对图层进行裁剪，使得图片自动填充组件

 android:scaleType="fitXY"

b. 增加图片底层阴影效果

百度了一下，有三种方法：1.使用shape方法  2. 使用plant画笔  3.使用android:elevation

找了很久，再参考谷歌Deamon，最后发现还有一种方法，就是我最好采用的 

android:background="@+drawable/android:picture_frame"

谷歌原来就已经提供了带阴影的组件，非常方便，但是效果不是很明显，加个白边

android:paddingRight="10dp"
android:paddingBottom="10dp

duang~ 效果一下就出来了，有木有

对比前两种方法，是方便很多，第三种方法可以自定义阴影大小，非常强大 ， 但是不知的地方就是只有5.0以上才支持

3.数据处理

基本数据处理和之前 MediaPlayer一样

a. 定义数据类型 ImgInfo

package com.saberhao.support;

import java.io.File;

import com.saberhao.shpicturewall.R;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.net.Uri;


public class ImgInfo
{
    long      mId = 0;
    ImageInfo mImageInfo = null;
    
    public ImgInfo()
    {
        mImageInfo = new ImageInfo();
    }
    
    public void setId(long id)
    {
        mId = id;
    }
    
    public long getId()
    {
        return mId;
    }
    
    public int getOrientation()
    {
        return mImageInfo.orientation;
    }

    public void setOrientation(int orientation)
    {
        this.mImageInfo.orientation = orientation;
    }

    public Drawable getErrorDrawable()
    {
        return mImageInfo.errorDrawable;
    }
    
    public void setErrorDrawable(Context context)
    {
        int id = R.drawable.missing_thumb_picture;
        mImageInfo.errorDrawable = (null != context) ? context.getResources().getDrawable(id) : null;
    }

    public Bitmap getImageThumb()
    {
        return mImageInfo.imageThumb;
    }

    public void setImageThumb(Bitmap imageThumb)
    {
        if (this.mImageInfo.imageThumb != imageThumb)
        {
            this.mImageInfo.imageThumb = imageThumb;
        }
    }
    
    public void setErrorBitmap(Bitmap errorBitmap)
    {
        if (this.mImageInfo.errorBitmap != errorBitmap)
        {
            this.mImageInfo.errorBitmap = errorBitmap;
        }
    }
    
    public Bitmap getOriImage()
    {
        return mImageInfo.oriImage;
    }
    
    public void setOriImage(Bitmap image)
    {
        this.mImageInfo.oriImage = image;
    }

    public Uri getImageUri()
    {
        return mImageInfo.imageUri;
    }

    public void setImageUri(Uri imageUri)
    {
        this.mImageInfo.imageUri = imageUri;
    }

    public String getDisplayName()
    {
        return mImageInfo.displayName;
    }

    public void setDisplayName(String displayName)
    {
        this.mImageInfo.displayName = displayName;
    }
    
    public String getFullPath()
    {
        return mImageInfo.fullPath;
    }
    
    public void setFullPath(String fullPath)
    {
        this.mImageInfo.fullPath = fullPath;
    }
    
    public String getFileName()
    {
        if (null == mImageInfo.fullPath)
        {
            return null;
        }
        
        mImageInfo.fileName = new File(mImageInfo.fullPath).getName();
        
        return mImageInfo.fileName;
    }
    
    public void setTitle(String title)
    {
        mImageInfo.title = title;
    }
    
    public void setSize(long size)
    {
        mImageInfo.size = size;
    }
    
    public void setDateAdded(long dateAdded)
    {
        mImageInfo.dateAdded = dateAdded;
    }
    
    public void setDateModified(long dateModified)
    {
        mImageInfo.dateModified = dateModified;
    }
    
    public void setMimeType(String mimeType)
    {
        mImageInfo.mimeType = mimeType;
    }
    
    public void setDescription(String desc)
    {
        mImageInfo.desc = desc;
    }
    
    public void setIsPrivate(int isPrivate)
    {
        mImageInfo.isPrivate = isPrivate;
    }
    
    public void setLatitude(double latitude)
    {
        mImageInfo.latitude = latitude;
    }
    
    public void setLongGitude(double longitude)
    {
        mImageInfo.longitude = longitude;
    }
    
    public void setMiniThumbMagic(int miniThumbMagic)
    {
        mImageInfo.miniThumbMagic = miniThumbMagic;
    }
    
    public void setBucketId(String bucketId)
    {
        mImageInfo.bucketId = bucketId;
    }
    
    public void setOrientation(String orientation)
    {
    }
    
    public void setDateTaken(long dateTaken)
    {
        mImageInfo.dateTaken = dateTaken;
    }
    
    public void setBucketDisplayName(String displayName)
    {
        mImageInfo.displayName = displayName;
    }
    
    public void setPicasaId(String picasaId)
    {
        mImageInfo.picasaId = picasaId;
    }
    
    public void setBytes(byte[] bytes)
    {
        mImageInfo.bytes = bytes;
    }
    
    @SuppressWarnings("unused")
    private static class ImageInfo
    {
        private int     orientation = 0;
        private boolean canRecycle  = true;
        private Bitmap  imageThumb  = null;
        private Bitmap  errorBitmap = null;
        private Bitmap  oriImage    = null;
        private Drawable errorDrawable = null;
        private Uri     imageUri    = null;
        private String  displayName = null;
        private String  fullPath    = null;
        private String  fileName    = null;
        private String  title;
        private long size;
        private long dateAdded;
        private long dateModified;
        private String mimeType;
        private String desc;
        private int isPrivate;
        private double latitude;
        private double longitude;
        private int miniThumbMagic;
        private String bucketId;
        private long dateTaken;
        private String bucketDisplayName;
        private String picasaId;
        private byte[] bytes;
   }
}

b. 定义相关操作 LocalImgSet.java

public class LocalImgSet {
	/**
	 * 用于从数据库中查询图片的信息，保存在ImageDataSet集合当中
	 * 
	 * @return
	 */
	public static ImageDataSet<ImgInfo> getImageInfos(Context context) {
		Cursor cursor = null;
		ImageDataSet<ImgInfo> imginfos = new ImageDataSet<ImgInfo>();
		String[] proj = 
	        {
	            MediaStore.MediaColumns._ID,            // INTEGER
	            MediaStore.MediaColumns.DISPLAY_NAME,   // TEXT
	            MediaStore.MediaColumns.TITLE,          // TEXT
	            MediaStore.MediaColumns.DATA,           // TEXT
	            MediaStore.MediaColumns.SIZE,           // LONG
	            MediaStore.MediaColumns.DATE_ADDED,     // INTEGER
	            MediaStore.MediaColumns.DATE_MODIFIED,  // INTEGER
	            MediaStore.MediaColumns.MIME_TYPE,      // TEXT
	            
	            MediaStore.Images.ImageColumns.DESCRIPTION, // TEXT
	            MediaStore.Images.ImageColumns.IS_PRIVATE,  // INTEGER
	            MediaStore.Images.ImageColumns.LATITUDE,    // DOUBLE
	            MediaStore.Images.ImageColumns.LONGITUDE,   // DOUBLE
	            MediaStore.Images.ImageColumns.MINI_THUMB_MAGIC,    // INTEGER
	            MediaStore.Images.ImageColumns.BUCKET_ID,   // TEXT
	            MediaStore.Images.ImageColumns.ORIENTATION, // TEXT
	            MediaStore.Images.ImageColumns.DATE_TAKEN,  // INTEGER
	            MediaStore.Images.ImageColumns.BUCKET_DISPLAY_NAME, // TEXT
	            MediaStore.Images.ImageColumns.PICASA_ID,   // TEXT
	        };
	        
	        Uri baseUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
		
		try{
			cursor = context.getContentResolver().query(baseUri, proj, null, null, null);
			for(int i = 0; i < cursor.getCount(); i++) {
				cursor.moveToNext();
				ImgInfo imginfo = new ImgInfo();
				//fill the picture info
				imginfo.setId(cursor.getLong(0));
				imginfo.setDisplayName(cursor.getString(1));
				imginfo.setTitle(cursor.getString(2));
				imginfo.setFullPath(cursor.getString(3));
				imginfo.setSize(cursor.getLong(4));
				imginfo.setDateAdded(cursor.getLong(5));
				imginfo.setDateModified(cursor.getLong(6));
				imginfo.setMimeType(cursor.getString(7));
				imginfo.setDescription(cursor.getString(8));
				imginfo.setIsPrivate(cursor.getInt(9));
				imginfo.setLatitude(cursor.getDouble(10));
				imginfo.setLongGitude(cursor.getDouble(11));
				imginfo.setMiniThumbMagic(cursor.getInt(12));
				imginfo.setBucketId(cursor.getString(13));
				imginfo.setOrientation(cursor.getInt(14));
				imginfo.setDateTaken(cursor.getLong(15));
				imginfo.setBucketDisplayName(cursor.getString(16));
				imginfo.setPicasaId(cursor.getString(17));
				imginfo.setImageUri(Uri.withAppendedPath(baseUri, String.valueOf(imginfo.getId())));
				
				imginfo.setBytes(new byte[1024*6]);
				imginfos.add(imginfo);		
			} 
		} catch(Exception e) {
			e.printStackTrace();
		} finally {
			if(cursor != null)
				cursor.close();			
		}
		return imginfos;
	}
	
}

下一篇文章我们将 介绍 图片加载 ，敬请期待

如果需要源码的，请 点击  saberhao的照片墙 下载