Android仿网易云音乐播放界面

 更新时间:2020年11月19日 09:49:57   作者:huang小qing  
这篇文章主要为大家详细介绍了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类型,分别为播放、暂停、播放状态与转动角度。

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

相关文章

最新评论