下面介绍下音乐播放列表UI上的处理,效果如下图
UI上的处理主要表现在
1. 播放图层添加圆角处理
在 music_detail_layout.xml中添加自定义的drawalbe
<span style="font-family:Microsoft YaHei;">android:background="@drawable/shape</span>
shape.xml
<span style="font-family:Microsoft YaHei;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#2f000000"/>
<corners android:radius="12px"/>
<stroke android:color="#5A5F6B"
android:width="3px"
/>
</shape> </span>
设置边框的颜色, 圆角角度等
2. 图片添加圆角处理
图片的布局定义
<span style="font-family:Microsoft YaHei;"> <ImageView
android:id="@+id/music_pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/music_title"
android:layout_marginLeft="25.0dp"
android:layout_marginTop="10.0dp"
android:layout_marginRight="25.0dp"
android:layout_marginBottom="130.0dp"
android:layout_centerHorizontal="true"
/></span>
ImageUtil.java
<span style="font-family:Microsoft YaHei;">package com.saberhao.support;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.Drawable;
public class ImageUtil {
//放大缩小图片
public static Bitmap zoomBitmap(Bitmap bitmap,int w,int h){
int width = bitmap.getWidth();
int height = bitmap.getHeight();
Matrix matrix = new Matrix();
float scaleWidht = ((float)w / width);
float scaleHeight = ((float)h / height);
matrix.postScale(scaleWidht, scaleHeight);
Bitmap newbmp = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
return newbmp;
}
//将Drawable转化为Bitmap
public static Bitmap drawableToBitmap(Drawable drawable){
int width = drawable.getIntrinsicWidth();
int height = drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(width, height,
drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
: Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0,0,width,height);
drawable.draw(canvas);
return bitmap;
}
//获得圆角图片的方法
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,float roundPx){
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
} </span>
在主界面调用方法进行UI裁剪
MediaDetailActivity.java
<span style="font-family:Microsoft YaHei;"> mMusicPic = (ImageView)findViewById(R.id.music_pic);
musicSinger = (TextView)findViewById(R.id.music_singer);
musicTitle = (TextView)findViewById(R.id.music_title);
//图片圆角转换
Drawable drawable = getResources().getDrawable(R.drawable.play_bg);
Bitmap bitmap = ImageUtil.drawableToBitmap(drawable);
Bitmap roundBitmap = ImageUtil.getRoundedCornerBitmap(bitmap, 10.0f);
mMusicPic.setImageBitmap(roundBitmap); </span>
如果接下来有时间,播放器功能和UI 会继续Upate,相关文章也会尽快分析,敬请期待~~