Android仿网易云音乐播放界面

发布时间:2020-10-24 16:33:13 作者:huang小qing
来源:脚本之家 阅读:332

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

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类型,分别为播放、暂停、播放状态与转动角度。

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

推荐阅读:
  1. 仿QQ界面
  2. Vuejs仿网易云音乐实现听歌及搜索功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

android 音乐播放 播放界面

上一篇:云主机跟vps的区别是什么

下一篇:使用美国云服务器好吗

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》