Android实现照片墙背景

项目开发中，有一个这样的需求：



在个人主页里会有12张图片的背景墙。这12张图片由服务器返回，会不定时刷新。

第一种方案

起初，自己的实现思路是：xml直接定义12个ImageView，然后在接收到图片路径后，再进行异步加载。

显然，这种方法是肯定可以的，但是却显得不“优雅”。而且后续可能会对这整个背景墙有个缩放的动画之类的，那么再实现起来便会比较复杂了。

第二种方案

之后，我想到了GridView，显然也是可以的，在得到图片路径后传入到Adapter中即可。比起方案一稍微“优雅”些，但是也是很难将这个背景墙当成一个整体，进行将来可能会添加的动画特效需求。

第三种方案

最后，我想到，既然要当成一整个整体，那么自定义View或许是个不错的办法。

思路是这样的：

首先ImageView展示初始图片；

下载图片；

所有图片下载完成后刷新View，显示下载的图片墙。

下面上代码。

自定义ImageView：

public class JointImageView extends ImageView {

private Paint mPaint;// 画笔
private List<Bitmap> bitmaps;// 位图
private List<Rect> rectList; // 正方形画bitmap
private int width; // 边长
private static int pictureInRow = 4; // 每一行显示4张图片

public JointImageView(Context context) {
super(context);
}

public JointImageView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}

/**
* 设置Bitmap数据
*
* @param bitmaps
*/
public void setBitmaps(List<Bitmap> bitmaps) {
this.bitmaps = bitmaps;
width = getMeasuredWidth() / pictureInRow;
createRect();
postInvalidate(); // 在设置Bitmaps之后重绘
}

private void createRect() { // 计算12个矩形的坐标
rectList = new ArrayList<>(AppConfigs.PROFILE_PICTURE_NUM);
for (int i = 0; i < AppConfigs.PROFILE_PICTURE_NUM; i++) {
Rect rect = new Rect((i % pictureInRow) * width, (i / pictureInRow) * width,
(i % pictureInRow + 1) * width, (i / pictureInRow + 1) * width);
rectList.add(rect);
}
}

@Override
protected void onDraw(Canvas canvas) {
if (bitmaps == null) {
super.onDraw(canvas);
} else {
for (int i = 0; i < bitmaps.size(); i++) {
if (bitmaps.get(i) != null) {
canvas.drawBitmap(bitmaps.get(i), null, rectList.get(i), mPaint); // 画图
}
}
}
}

}

布局文件中使用：

<com.android.widget.JointImageView
android:id="@+id/my_profile_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/background" />

项目中使用的Universal-Image-Loader三方库进行图片的加载。

下载图片的异步任务代码：

private class BitmapLoaderTask extends AsyncTask<String[], Integer, List<Bitmap>> {

private List<Bitmap> bitmaps;

public BitmapLoaderTask() {
bitmaps = new ArrayList<>(AppConfigs.PROFILE_PICTURE_NUM);
}

@Override
protected List<Bitmap> doInBackground(String[]... params) {
ImageSize imageSize = new ImageSize(80, 80); // 图片压缩到80*80的大小
for (int i = 0; i < params[0].length && i < AppConfigs.PROFILE_PICTURE_NUM; i++) {
// 使用UIL同步下载图片的方法下载图片，存到bitmap数组
Bitmap bitmap = ImageLoader.getInstance().loadImageSync(params[0][i], imageSize);
bitmaps.add(bitmap);
}
return bitmaps;
}

@Override
protected void onPostExecute(List<Bitmap> bitmaps) {
// 全部下载完毕，通知View进行重绘
if (bitmaps != null && bitmaps.size() == AppConfigs.PROFILE_PICTURE_NUM) {
profileBackground.setBitmaps(bitmaps);
}
}

@Override
protected void onCancelled() {
super.onCancelled();
}
}

通过方案三，在实现当下需求的同时，也可以作为一个单独的View，在将来拓展可能的缩放等特效动画。

但是也有一个缺点：必须所有的图片下载完毕才进行刷新。

当然，也可以将刷新策略调整成下载一张刷新一次，这个就得看具体的需求了。

题外话

对于图片中的阴影效果，我们可以采用alpha背景来实现。也可以通过色彩矩阵在绘制的时候进行调整。

通过alpha背景实现很简单，在FrameLayout上遮罩一个View，alpha设置成相应的值即可。

<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.7"
android:background="#000000" />

通过色彩矩阵就得不停的调整了。

// 生成色彩矩阵
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
0.5F, 0, 0, 0, 0,
0, 0.5F, 0, 0, 0,
0, 0, 0.5F, 0, 0,
0, 0, 0, 1, 0,
});
mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));  // 画笔设置色彩矩阵，这样再绘制的时候就会有效果了