Android仿网易云音乐播放界面

现在很多的播放器的播放界面都是采用光盘的转动，下面是我仿造网易的播放界面。先上两张图：

第一张为播放前的界面，第二张为点击播放按钮的图片。布局文件如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#ffffff" > 

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" > 

    <RelativeLayout
      android:layout_width="fill_parent"
      android:layout_height="48dp"
      android:background="#222222" > 

      <ImageView
        android:id="@+id/back_main_activity"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:background="@drawable/back_main_view" /> 

      <TextView
        android:id="@+id/play_music_name"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_centerInParent="true"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/back_main_activity"
        android:paddingTop="5dp"
        android:text="music"
        android:textColor="#ffffff"
        android:textSize="20dp" />
    </RelativeLayout> 

    <RelativeLayout
      android:id="@+id/play_disc"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:gravity="center|center_vertical" >
    </RelativeLayout>
  </LinearLayout> 

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:layout_below="@+id/seekbarLayout"
    android:background="#222222"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true" > 

    <ImageView
      android:id="@+id/music_paly_pause"
      android:layout_width="80dp"
      android:layout_height="fill_parent"
      android:background="@drawable/play_btn_play" />
  </LinearLayout> 

</RelativeLayout>

MainActivity的代码如下：

public class MainActivity extends Activity {
private RelativeLayout playDisc;
private MusicPlayDiscView musicPlayDiscView;
//播放按钮
private ImageView playMusic; 

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); 

playDisc = (RelativeLayout) findViewById(R.id.play_disc);
//加载光盘view
musicPlayDiscView = new MusicPlayDiscView(this);
playDisc.addView(musicPlayDiscView); 

playMusic = (ImageView) findViewById(R.id.music_paly_pause);
//监听方法
playMusic.setOnClickListener(new OnClickListener() { 

@Override
public void onClick(View v) {
switch (Constant.CurrentState) {
case Constant.Pause:
Constant.CurrentState = Constant.Play;
playMusic.setBackgroundResource(R.drawable.play_btn_pause);
break;
case Constant.Play:
Constant.CurrentState = Constant.Pause;
playMusic.setBackgroundResource(R.drawable.play_btn_play);
break; 

} 

}
});
} 

}

光盘界面是自定义的view。MusicPlayDiscView，代码如下：

public class MusicPlayDiscView extends View { 

  Paint paint; 

  private Handler handler;
  // 光盘图片
  Bitmap bitmapDisc = BitmapFactory.decodeResource(getResources(),
      R.drawable.play_disc);
  // 专辑图片
  Bitmap bitmapImage = BitmapFactory.decodeResource(getResources(),
      R.drawable.music_play_people);
  Bitmap bitmapCircularAblum, bitmapDiscCircular;
  // 光盘指针图片
  Bitmap bitmapNeedle = BitmapFactory.decodeResource(getResources(),
      R.drawable.play_needle); 

  public MusicPlayDiscView(Context context) {
    super(context);
    //分别获得光盘和专辑的圆形图片
    bitmapCircularAblum = getCircularBitmap(bitmapImage, 400);
    bitmapDiscCircular = getCircularBitmap(bitmapDisc,
        bitmapDisc.getWidth()); 

    paint = new Paint();
    handler = new Handler();
    handler.post(runnable);
  } 

  /**
   * 利用线程不断更新界面
   */
  private Runnable runnable = new Runnable() {
    public void run() {
      postInvalidate();
      handler.postDelayed(runnable, 50);
    }
  }; 

  //状态标志：
  int before = 0;
  //角度标志
  private int degreeFlag = 0; 

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas); 

    /**
     * 先画光盘与专辑图片
     */ 

    if (Constant.CurrentState == Constant.Play) {
      Constant.Degree++;
      if (Constant.Degree > 360)
        Constant.Degree = 0; 

      degreeFlag = Constant.Degree; 

      canvas.save();
      //360为屏幕的中间位置，手机是720的宽度
      canvas.rotate(Constant.Degree, 360,
          170 + bitmapDiscCircular.getHeight() / 2);
      canvas.drawBitmap(bitmapCircularAblum,
          360 - bitmapCircularAblum.getWidth() / 2, 200, paint); 

      canvas.drawBitmap(bitmapDisc,
          360 - bitmapDiscCircular.getWidth() / 2, 170, paint); 

      canvas.restore(); 

    } else {
      //before = 0; 

      canvas.save();
      canvas.rotate(degreeFlag, 360,
          170 + bitmapDiscCircular.getHeight() / 2);
      canvas.drawBitmap(bitmapCircularAblum,
          360 - bitmapCircularAblum.getWidth() / 2, 200, paint); 

      canvas.drawBitmap(bitmapDisc,
          360 - bitmapDiscCircular.getWidth() / 2, 170, paint);
      canvas.restore(); 

    } 

    /**
     * 再画光盘指针图片,三张图不能同时画
     */
    if (Constant.CurrentState == Constant.Play ) {
      canvas.drawBitmap(bitmapNeedle, 360 - bitmapNeedle.getWidth() / 2,
          0, paint); 

    } else {
      canvas.save();
      Matrix matrix = new Matrix();
      matrix.postRotate(-45);
      paint.setAntiAlias(true);
      //获得指针旋转后的图片
      Bitmap bm = Bitmap.createBitmap(bitmapNeedle, 0, 0,
          bitmapNeedle.getWidth(), bitmapNeedle.getHeight(), matrix,
          true);
      canvas.drawBitmap(bm, 360 - bitmapNeedle.getWidth() / 2 + 5, -60,
          paint); 

      canvas.restore();
    } 

  } 

  /**
   * 获得圆形图片的方法
   *
   */
  private Bitmap getCircularBitmap(Bitmap bitmap, int radius) {
    Bitmap sbmp = Bitmap.createScaledBitmap(bitmap, radius, radius, false); 

    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),
        Config.ARGB_8888);
    Canvas canvas = new Canvas(output); 

    Paint paint = new Paint();
    Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight()); 

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.BLACK);
    canvas.drawCircle(sbmp.getWidth() / 2, sbmp.getHeight() / 2,
        sbmp.getWidth() / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);
    return output;
  } 

}

Constant为常量类，定义了四个常量。都是int类型，分别为播放、暂停、播放状态与转动角度。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

• android音乐播放器监听电话状态实现代码
• android暂停或停止其他音乐播放器的播放实现代码
• Android中播放在线音乐代码
• 教你轻松制作Android音乐播放器
• Android简单音乐播放实例
• Android编程开发音乐播放器实例
• Android基于service实现音乐的后台播放功能示例
• Android MediaPlayer实现音乐播放器实例代码
• Android简易音乐播放器实现代码
• Android 使用mediaplayer播放res/raw文件夹中的音乐的实例