GL音乐播放器<三>--界面设计之专辑照片的实现

这篇博客我会向大家介绍如何实现歌曲专辑照片的实现。但是注意，只是歌曲自带的照片（科普一下，一般正版的音乐里都会带有这首歌所在专辑的专辑照片），我们接下来要做的就是找到这个照片，并将它显示出来。

先上效果图：

这就是我们要实现的效果。

 

首先是要获得专辑封面的Uri，得到并进行处理

package com.genius.musicplay;import java.io.FileDescriptor;import java.io.FileNotFoundException;import java.io.IOException;import java.io.InputStream;import com.genius.demo.R;import android.content.ContentResolver;import android.content.ContentUris;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.BitmapFactory.Options;import android.net.Uri;import android.os.ParcelFileDescriptor;public class MediaAlbum {//获取专辑封面的Uriprivate static final Uri albumArtUri = Uri.parse("content://media/external/audio/albumart");/** * 获取默认专辑图片 * @param context * @return */public static Bitmap getDefaultArtwork(Context context,boolean small) {BitmapFactory.Options opts = new BitmapFactory.Options();opts.inPreferredConfig = Bitmap.Config.RGB_565;if(small){//返回小图片return BitmapFactory.decodeStream(context.getResources().openRawResource(R.drawable.ablum_deflaut), null, opts);}return BitmapFactory.decodeStream(context.getResources().openRawResource(R.drawable.ablum_deflaut), null, opts);}/** * 从文件当中获取专辑封面位图 * @param context * @param songid * @param albumid * @return */private static Bitmap getArtworkFromFile(Context context, long songid, long albumid){Bitmap bm = null;if(albumid < 0 && songid < 0) {throw new IllegalArgumentException("Must specify an album or a song id");}try {BitmapFactory.Options options = new BitmapFactory.Options();FileDescriptor fd = null;if(albumid < 0){Uri uri = Uri.parse("content://media/external/audio/media/"+ songid + "/albumart");ParcelFileDescriptor pfd = context.getContentResolver().openFileDescriptor(uri, "r");if(pfd != null) {fd = pfd.getFileDescriptor();}} else {Uri uri = ContentUris.withAppendedId(albumArtUri, albumid);ParcelFileDescriptor pfd = context.getContentResolver().openFileDescriptor(uri, "r");if(pfd != null) {fd = pfd.getFileDescriptor();}}options.inSampleSize = 1;// 只进行大小判断options.inJustDecodeBounds = true;// 调用此方法得到options得到图片大小BitmapFactory.decodeFileDescriptor(fd, null, options);// 我们的目标是在800pixel的画面上显示// 所以需要调用computeSampleSize得到图片缩放的比例options.inSampleSize = 100;// 我们得到了缩放的比例，现在开始正式读入Bitmap数据options.inJustDecodeBounds = false;options.inDither = false;options.inPreferredConfig = Bitmap.Config.ARGB_8888;//根据options参数，减少所需要的内存bm = BitmapFactory.decodeFileDescriptor(fd, null, options);} catch (FileNotFoundException e) {e.printStackTrace();}return bm;}/** * 获取专辑封面位图对象 * @param context * @param song_id * @param album_id * @param allowdefalut * @return */public static Bitmap getArtwork(Context context, long song_id, int album_id, boolean allowdefalut, boolean small){if(album_id < 0) {if(song_id < 0) {Bitmap bm = getArtworkFromFile(context, song_id, -1);if(bm != null) {return bm;}}if(allowdefalut) {return getDefaultArtwork(context, small);}return null;}ContentResolver res = context.getContentResolver();Uri uri = ContentUris.withAppendedId(albumArtUri, album_id);if(uri != null) {InputStream in = null;try {in = res.openInputStream(uri);BitmapFactory.Options options = new BitmapFactory.Options();//先制定原始大小options.inSampleSize = 1;//只进行大小判断options.inJustDecodeBounds = true;//调用此方法得到options得到图片的大小BitmapFactory.decodeStream(in, null, options);/** 我们的目标是在你N pixel的画面上显示。 所以需要调用computeSampleSize得到图片缩放的比例 **//** 这里的target为800是根据默认专辑图片大小决定的，800只是测试数字但是试验后发现完美的结合 **/if(small){options.inSampleSize = computeSampleSize(options, 40);} else{options.inSampleSize = computeSampleSize(options, 600);}// 我们得到了缩放比例，现在开始正式读入Bitmap数据options.inJustDecodeBounds = false;options.inDither = false;options.inPreferredConfig = Bitmap.Config.ARGB_8888;in = res.openInputStream(uri);return BitmapFactory.decodeStream(in, null, options);} catch (FileNotFoundException e) {Bitmap bm = getArtworkFromFile(context, song_id, album_id);if(bm != null) {if(bm.getConfig() == null) {bm = bm.copy(Bitmap.Config.RGB_565, false);if(bm == null && allowdefalut) {return getDefaultArtwork(context, small);}}} else if(allowdefalut) {bm = getDefaultArtwork(context, small);}return bm;} finally {try {if(in != null) {in.close();}} catch (IOException e) {e.printStackTrace();}}}return null;}/** * 对图片进行合适的缩放 * @param options * @param target * @return */public static int computeSampleSize(Options options, int target) {int w = options.outWidth;int h = options.outHeight;int candidateW = w / target;int candidateH = h / target;int candidate = Math.max(candidateW, candidateH);if(candidate == 0) {return 1;}if(candidate > 1) {if((w > target) && (w / candidate) < target) {candidate -= 1;}}if(candidate > 1) {if((h > target) && (h / candidate) < target) {candidate -= 1;}}return candidate;}}

 

接下来是图片处理的工具类，这个是别人已经完成的，所以我就偷懒了，嘻嘻

package com.genius.widget;import java.io.ByteArrayOutputStream;import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.CompressFormat;import android.graphics.Bitmap.Config;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.ColorMatrix;import android.graphics.ColorMatrixColorFilter;import android.graphics.LinearGradient;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.PorterDuff;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.Shader;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;/** * 图片工具类 * */public class ImageUtil {/**图片的八个位置**/public static final int TOP = 0;//上public static final int BOTTOM = 1;//下public static final int LEFT = 2;//左public static final int RIGHT = 3;//右public static final int LEFT_TOP = 4;//左上public static final int LEFT_BOTTOM = 5;//左下public static final int RIGHT_TOP = 6;//右上public static final int RIGHT_BOTTOM = 7;//右下/** * 图像的放大缩小方法 * @param src源位图对象 * @param scaleX宽度比例系数 * @param scaleY高度比例系数 * @return 返回位图对象 */public static Bitmap zoomBitmap(Bitmap src, float scaleX, float scaleY) {Matrix matrix = new Matrix();matrix.setScale(scaleX, scaleY);Bitmap t_bitmap = Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);return t_bitmap;}/** * 图像放大缩小--根据宽度和高度 * @param src * @param width * @param height * @return */public static Bitmap zoomBimtap(Bitmap src, int width, int height) {return Bitmap.createScaledBitmap(src, width, height, true);}/** * 将Drawable转为Bitmap对象 * @param drawable * @return */public static Bitmap drawableToBitmap(Drawable drawable) {return ((BitmapDrawable)drawable).getBitmap();}/** * 将Bitmap转换为Drawable对象 * @param bitmap * @return */public static Drawable bitmapToDrawable(Bitmap bitmap) {Drawable drawable = new BitmapDrawable(bitmap);return drawable;}/** * Bitmap转byte[] * @param bitmap * @return */public static byte[] bitmapToByte(Bitmap bitmap) {ByteArrayOutputStream out = new ByteArrayOutputStream();bitmap.compress(Bitmap.CompressFormat.PNG, 100, out);return out.toByteArray();}/** * byte[]转Bitmap * @param data * @return */public static Bitmap byteToBitmap(byte[] data) {if(data.length != 0) {return BitmapFactory.decodeByteArray(data, 0, data.length);}return null;}/** * 绘制带圆角的图像 * @param src * @param radius * @return */public static Bitmap createRoundedCornerBitmap(Bitmap src, int radius) {final int w = src.getWidth();final int h = src.getHeight();// 高清量32位图Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);Paint paint = new Paint();Canvas canvas = new Canvas(bitmap);canvas.drawARGB(0, 0, 0, 0);paint.setColor(0xff424242);// 防止边缘的锯齿paint.setFilterBitmap(true);Rect rect = new Rect(0, 0, w, h);RectF rectf = new RectF(rect);// 绘制带圆角的矩形canvas.drawRoundRect(rectf, radius, radius, paint);// 取两层绘制交集，显示上层paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 绘制图像canvas.drawBitmap(src, rect, rect, paint);return bitmap;}/** * 创建选中带提示图片 * @param context * @param srcId * @param tipId * @return */public static Drawable createSelectedTip(Context context, int srcId, int tipId) {Bitmap src = BitmapFactory.decodeResource(context.getResources(), srcId);Bitmap tip = BitmapFactory.decodeResource(context.getResources(), tipId);final int w = src.getWidth();final int h = src.getHeight();Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);Paint paint = new Paint();Canvas canvas = new Canvas(bitmap);//绘制原图canvas.drawBitmap(src, 0, 0, paint);//绘制提示图片canvas.drawBitmap(tip, (w - tip.getWidth()), 0, paint);return bitmapToDrawable(bitmap);}/** * 带倒影的图像 * @param src * @return */public static Bitmap createReflectionBitmap(Bitmap src) {// 两个图像间的空隙final int spacing = 4;final int w = src.getWidth();final int h = src.getHeight();// 绘制高质量32位图Bitmap bitmap = Bitmap.createBitmap(w, h + h / 2 + spacing, Config.ARGB_8888);// 创建燕X轴的倒影图像Matrix m = new Matrix();m.setScale(1, -1);Bitmap t_bitmap = Bitmap.createBitmap(src, 0, h / 2, w, h / 2, m, true);Canvas canvas = new Canvas(bitmap);Paint paint = new Paint();//绘制原图像canvas.drawBitmap(src, 0, 0, paint);// 绘制倒影图像canvas.drawBitmap(t_bitmap, 0, h + spacing, paint);// 线性渲染-沿Y轴高到低渲染Shader shader = new LinearGradient(0, h + spacing, 0, h + spacing + h / 2, 0x70ffffff, 0x00ffffff, Shader.TileMode.MIRROR);paint.setShader(shader);// 取两层绘制交集，显示下层。paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));// 绘制渲染倒影的矩形canvas.drawRect(0, h + spacing, w, h + h / 2 + spacing, paint);return bitmap;}/** * 独立的倒影图像 * @param src * @return */public static Bitmap createReflectionBitmapForSingle(Bitmap src) {final int w = src.getWidth();final int h = src.getHeight();// 绘制高质量32位图Bitmap bitmap = Bitmap.createBitmap(w, h / 2, Config.ARGB_8888);// 创建沿X轴的倒影图像Matrix m = new Matrix();m.setScale(1, -1);Bitmap t_bitmap = Bitmap.createBitmap(src, 0, h / 2, w, h / 2, m, true);Canvas canvas = new Canvas(bitmap);Paint paint = new Paint();// 绘制倒影图像canvas.drawBitmap(t_bitmap, 0, 0, paint);// 线性渲染-沿Y轴高到低渲染Shader shader = new LinearGradient(0, 0, 0, h / 2, 0x70ffffff,0x00ffffff, Shader.TileMode.MIRROR);paint.setShader(shader);// 取两层绘制交集。显示下层。paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));// 绘制渲染倒影的矩形canvas.drawRect(0, 0, w, h / 2, paint);return bitmap;}public static Bitmap createGreyBitmap(Bitmap src) {final int w = src.getWidth();final int h = src.getHeight();Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);Canvas canvas = new Canvas(bitmap);Paint paint = new Paint();// 颜色变换的矩阵ColorMatrix matrix = new ColorMatrix();// saturation 饱和度值，最小可设为0，此时对应的是灰度图；为1表示饱和度不变，设置大于1，就显示过饱和matrix.setSaturation(0);ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);paint.setColorFilter(filter);canvas.drawBitmap(src, 0, 0, paint);return bitmap;}/** * 保存图片 * @param src * @param filepath * @param format:[Bitmap.CompressFormat.PNG,Bitmap.CompressFormat.JPEG] * @return */public static boolean saveImage(Bitmap src, String filepath, CompressFormat format) {boolean rs = false;File file = new File(filepath);try {FileOutputStream out = new FileOutputStream(file);if(src.compress(format, 100, out)) {out.flush();//写入流}out.close();} catch (FileNotFoundException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}return rs;}/** * 添加水印效果 * @param src源位图 * @param watermark水印 * @param direction方向 * @param spacing 间距 * @return */public static Bitmap createWatermark(Bitmap src, Bitmap watermark, int direction, int spacing) {final int w = src.getWidth();final int h = src.getHeight();Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);Canvas canvas = new Canvas(bitmap);canvas.drawBitmap(src, 0, 0, null);if(direction == LEFT_TOP) {canvas.drawBitmap(watermark, spacing, spacing, null);} else if(direction == LEFT_BOTTOM){canvas.drawBitmap(watermark, spacing, h - watermark.getHeight() - spacing, null);} else if(direction == RIGHT_TOP) {canvas.drawBitmap(watermark, w - watermark.getWidth() - spacing, spacing, null);} else if(direction == RIGHT_BOTTOM) {canvas.drawBitmap(watermark, w - watermark.getWidth() - spacing, h - watermark.getHeight() - spacing, null);}return bitmap;}/** * 合成图像 * @param direction * @param bitmaps * @return */public static Bitmap composeBitmap(int direction, Bitmap... bitmaps) {if(bitmaps.length < 2) {return null;}Bitmap firstBitmap = bitmaps[0];for (int i = 0; i < bitmaps.length; i++) {firstBitmap = composeBitmap(firstBitmap, bitmaps[i], direction);}return firstBitmap;}/** * 合成两张图像 * @param firstBitmap * @param secondBitmap * @param direction * @return */private static Bitmap composeBitmap(Bitmap firstBitmap, Bitmap secondBitmap,int direction) {if(firstBitmap == null) {return null;}if(secondBitmap == null) {return firstBitmap;}final int fw = firstBitmap.getWidth();final int fh = firstBitmap.getHeight();final int sw = secondBitmap.getWidth();final int sh = secondBitmap.getHeight();Bitmap bitmap = null;Canvas canvas = null;if(direction == TOP) {bitmap = Bitmap.createBitmap(sw > fw ? sw : fw, fh + sh, Config.ARGB_8888);canvas = new Canvas(bitmap);canvas.drawBitmap(secondBitmap, 0, 0, null);canvas.drawBitmap(firstBitmap, 0, sh, null);} else if(direction == BOTTOM) {bitmap = Bitmap.createBitmap(fw > sw ? fw : sw, fh + sh, Config.ARGB_8888);canvas = new Canvas(bitmap);canvas.drawBitmap(firstBitmap, 0, 0, null);canvas.drawBitmap(secondBitmap, 0, fh, null);} else if(direction == LEFT) {bitmap = Bitmap.createBitmap(fw + sw, sh > fh ? sh : fh, Config.ARGB_8888);canvas = new Canvas(bitmap);canvas.drawBitmap(secondBitmap, 0, 0, null);canvas.drawBitmap(firstBitmap, sw, 0, null);} else if(direction == RIGHT) {bitmap = Bitmap.createBitmap(fw + sw, fh > sh ? fh : sh,Config.ARGB_8888);canvas = new Canvas(bitmap);canvas.drawBitmap(firstBitmap, 0, 0, null);canvas.drawBitmap(secondBitmap, fw, 0, null);}return bitmap;}}

 

 

接下来便是在MusicPlayActivity里创建一个用来显示图片的函数

 private ImageView musicAlbum; //音乐专辑封面 private ImageView musicAblumReflection; //倒影反射

//显示专辑照片private void showArtwork(MusicData mp3Info) {Bitmap bm = MediaAlbum.getArtwork(this, mp3Info.MusicId, mp3Info.MusicAlbumId, true, false);//切换播放时候专辑图片出现透明效果Animation albumanim = AnimationUtils.loadAnimation(MusicPlayActivity.this, R.anim.album_replace);//开始播放动画效果musicAlbum.startAnimation(albumanim);if(bm != null) {musicAlbum.setImageBitmap(bm);//显示专辑封面图片musicAblumReflection.setImageBitmap(ImageUtil.createReflectionBitmapForSingle(bm));//显示倒影} else {bm = MediaAlbum.getDefaultArtwork(this, false);musicAlbum.setImageBitmap(bm);//显示专辑封面图片musicAblumReflection.setImageBitmap(ImageUtil.createReflectionBitmapForSingle(bm));//显示倒影}}

然后每次更新歌曲后调用就可以了。