溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-24 16:33:13 來(lái)源：腳本之家 閱讀：340 作者：huang小qing 欄目：移動(dòng)開(kāi)發(fā)

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

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

第一張為播放前的界面，第二張為點(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); 
//加載光盤(pán)view 
musicPlayDiscView = new MusicPlayDiscView(this); 
playDisc.addView(musicPlayDiscView); 

playMusic = (ImageView) findViewById(R.id.music_paly_pause); 
//監(jiān)聽(tīng)方法 
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; 

} 

} 
}); 
} 

}

光盤(pán)界面是自定義的view。MusicPlayDiscView，代碼如下：

public class MusicPlayDiscView extends View { 
 
  Paint paint; 
 
  private Handler handler; 
  // 光盤(pán)圖片 
  Bitmap bitmapDisc = BitmapFactory.decodeResource(getResources(), 
      R.drawable.play_disc); 
  // 專(zhuān)輯圖片 
  Bitmap bitmapImage = BitmapFactory.decodeResource(getResources(), 
      R.drawable.music_play_people); 
  Bitmap bitmapCircularAblum, bitmapDiscCircular; 
  // 光盤(pán)指針圖片 
  Bitmap bitmapNeedle = BitmapFactory.decodeResource(getResources(), 
      R.drawable.play_needle); 
 
  public MusicPlayDiscView(Context context) { 
    super(context); 
    //分別獲得光盤(pán)和專(zhuān)輯的圓形圖片 
    bitmapCircularAblum = getCircularBitmap(bitmapImage, 400); 
    bitmapDiscCircular = getCircularBitmap(bitmapDisc, 
        bitmapDisc.getWidth()); 
 
    paint = new Paint(); 
    handler = new Handler(); 
    handler.post(runnable); 
  } 
 
  /** 
   * 利用線(xiàn)程不斷更新界面 
   */ 
  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); 
 
    /** 
     * 先畫(huà)光盤(pán)與專(zhuān)輯圖片 
     */ 
 
    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(); 
 
    } 
 
    /** 
     * 再畫(huà)光盤(pán)指針圖片,三張圖不能同時(shí)畫(huà) 
     */ 
    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為常量類(lèi)，定義了四個(gè)常量。都是int類(lèi)型，分別為播放、暫停、播放狀態(tài)與轉(zhuǎn)動(dòng)角度。

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

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手