Android音乐播放器 -- UI处理

下面介绍下音乐播放列表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，相关文章也会尽快分析，敬请期待~~