快捷導(dǎo)航

Android仿網(wǎng)易云音樂播放界面

更新時(shí)間：2020年11月19日 09:49:57 作者：huang小qing

這篇文章主要為大家詳細(xì)介紹了Android仿網(wǎng)易云音樂播放界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

現(xiàn)在很多的播放器的播放界面都是采用光盤的轉(zhuǎn)動(dòng)，下面是我仿造網(wǎng)易的播放界面。先上兩張圖：

第一張為播放前的界面，第二張為點(diǎn)擊播放按鈕的圖片。布局文件如下：

<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); 
//監(jiān)聽方法 
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); 
  } 
 }; 
 
 //狀態(tài)標(biāo)志： 
 int before = 0; 
 //角度標(biāo)志 
 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為屏幕的中間位置，手機(jī)是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(); 
 
  } 
 
  /** 
   * 再畫光盤指針圖片,三張圖不能同時(shí)畫 
   */ 
  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); 
   //獲得指針旋轉(zhuǎn)后的圖片 
   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為常量類，定義了四個(gè)常量。都是int類型，分別為播放、暫停、播放狀態(tài)與轉(zhuǎn)動(dòng)角度。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: