Android開發程序員痛心事蹟：實現音樂播放界面，模仿網易雲音樂

時間 2019-11-17

標籤 android 開發程序員痛心事蹟實現音樂播放界面模仿網易欄目 Android 简体版

原文原文鏈接

PS：今天偶然聽到消息，我也是驚了！網易雲音樂暫時下架了，心裏就是五味陳雜。android

因爲最近本身在作一個音樂APP，在播放音樂時，想實現網易雲那種帶光盤和指針的界面，因此在查找了許多的學習教程，對網易雲音樂的消息也特別的關注。git

同時也但願有知情的大佬評論一下，網易雲音樂到底怎麼了？程序員

如下是個人學習製做過程，先放出網易雲播放界面 github

1.隱藏statusBar

//隱藏statusBar,第一個參數是新窗口的標誌位，第二個參數時要修改的標誌位
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
複製代碼

2.佈局文件（暫時添加返回按鈕、背景、歌名和做者）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".activities.PlayMusicActivity">
 <ImageView
 android:id="@+id/iv_bg"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="centerCrop"
 android:src="@mipmap/album1"
 />
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@mipmap/no_bar_back"
 android:layout_margin="@dimen/marginSize"
 android:onClick="onBackClick"/>
 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:gravity="center_horizontal"
 android:layout_marginTop="480dp">
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="音樂名稱"
 android:textColor="@android:color/white"
 android:textSize="@dimen/textSize"
 android:textStyle="bold"/>
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="@dimen/marginSize"
 android:textSize="@dimen/infoSize"
 android:text="做者"
 android:textColor="@android:color/white"/>
 </LinearLayout>
</FrameLayout>
複製代碼

3.設置背景模糊

使用GlideTransTransformations包小程序

(1) 引入包(app/build.gradle)微信小程序

//若是沒有引入Glide的包也要記得引入，由於二者是配合使用的
 implementation 'com.github.bumptech.glide:glide:4.9.0'
 //glide-transformation
 implementation 'jp.wasabeef:glide-transformations:4.0.1'
複製代碼

(2) 加載圖片，這裏設置效果爲模糊，具體的其餘效果能夠參考github中該包的詳細說明，地址是 github.com/wasabeef/gl…api

(3) 操做代碼，load中的能夠是網絡圖片url，也能夠是模塊中的文件性能優化

iv_bg = this.findViewById(R.id.iv_bg);
 //glide-transformation
 Glide.with(this)
 .load(R.mipmap.album1)
 .apply(RequestOptions.bitmapTransform(new BlurTransformation(25,10)))
 .into(iv_bg);
複製代碼

(4) 效果 bash

4.自定義帶指針光盤的View

(1) 指針微信

(2) 光盤

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 xmlns:app="http://schemas.android.com/apk/res-auto">
 <!--光盤-->
 <FrameLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="@dimen/discTopSize">
 
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@mipmap/disc" />
 <!--CircleImageView-->
 <de.hdodenhof.circleimageview.CircleImageView
 android:id="@+id/cv_icon"
 android:layout_width="@dimen/playMusicIconSize"
 android:layout_height="@dimen/playMusicIconSize"
 android:layout_gravity="center"
 app:civ_border_width="2dp"
 app:civ_border_color="@android:color/black"/>
 <!--播放按鈕-->
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@mipmap/play_music"
 android:layout_gravity="center"
 android:visibility="gone"/>
 </FrameLayout>
 <!--指針-->
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@mipmap/needle"
 android:layout_gravity="center_horizontal"
 android:layout_marginLeft="@dimen/needleMarginSize"/>
</FrameLayout>
複製代碼

上面的xml，是這個自定義view的一個佈局，具體的自定義view的代碼以下

package com.musicplaer.eminemmusic.views;
import android.content.Context;
import android.os.Build;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import com.bumptech.glide.Glide;
import com.musicplaer.eminemmusic.R;
import de.hdodenhof.circleimageview.CircleImageView;
public class PlayMusicView extends FrameLayout {
 private Context mContext;
 private View mView;
 private CircleImageView cv_icon;
 public PlayMusicView(@NonNull Context context) {
 super(context);
 init(context);
 }
 public PlayMusicView(@NonNull Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init(context);
 }
 public PlayMusicView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context);
 }
 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
 public PlayMusicView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
 super(context, attrs, defStyleAttr, defStyleRes);
 init(context);
 }
 private void init(Context context){
 this.mContext = context;
 mView = LayoutInflater.from(mContext).inflate(R.layout.play_music,this,false);
 cv_icon = mView.findViewById(R.id.cv_icon);
 addView(mView);
 }
 /**
 * 設置光盤中顯示的音樂封面圖片
 */
 public void setMusicIcon(String icon){
 Glide.with(mContext)
 .load(icon)
 .into(cv_icon);
 }
 public void setMusicIcon(int album1) {
 cv_icon.setImageResource(album1);
 }
}
複製代碼

而後將該自定義的view添加到原先的佈局文件中，在Activity中調用setMusicIcon來設置圖片，效果以下：

5.設置動畫（@integers/xxxx是在app/src/main/res/values/integers.xml中自定義的變量）

(1) 光盤轉動動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/linear_interpolator">
 <!--轉動效果-->
 <rotate
 android:fromDegrees="0"
 android:toDegrees="360"
 android:pivotX="50%"
 android:pivotY="50%"
 android:duration="@integer/play_music_anim_duration"
 android:repeatCount="infinite"/>
</set>
複製代碼

(2) 指針指向光盤動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/linear_interpolator">
 <!--指針旋轉動畫-->
 <rotate
 android:fromDegrees="-20"
 android:toDegrees="0"
 android:pivotX="0"
 android:pivotY="0"
 android:duration="@integer/play_needle_anim_duration"
 />
</set>
複製代碼

(3) 指針離開光盤動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/linear_interpolator"
 android:fillAfter="true">
 <rotate
 android:fromDegrees="0"
 android:toDegrees="-20"
 android:pivotY="0"
 android:pivotX="0"
 android:duration="@integer/play_needle_anim_duration"
 />
</set>
複製代碼

(4) 在自定義View中設置動畫，且在播放Activity中還要調用playMusic()的方法，使得一開始就有動畫效果

package com.musicplaer.eminemmusic.views;
import android.content.Context;
import android.os.Build;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.musicplaer.eminemmusic.R;
import de.hdodenhof.circleimageview.CircleImageView;
public class PlayMusicView extends FrameLayout {
 private Context mContext;
 private View mView;
 private CircleImageView cv_icon;
 private Animation mPlayMusicAnim,mPlayNeedleAnim,mStopNeedleAnim;
 private FrameLayout fl_disc;
 private ImageView iv_needle,iv_play;
 private boolean isPlay;
 public PlayMusicView(@NonNull Context context) {
 super(context);
 init(context);
 }
 public PlayMusicView(@NonNull Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init(context);
 }
 public PlayMusicView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context);
 }
 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
 public PlayMusicView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
 super(context, attrs, defStyleAttr, defStyleRes);
 init(context);
 }
 private void init(Context context){
 this.mContext = context;
 mView = LayoutInflater.from(mContext).inflate(R.layout.play_music,this,false);
 cv_icon = mView.findViewById(R.id.cv_icon);
 iv_play = mView.findViewById(R.id.iv_play);
 fl_disc = mView.findViewById(R.id.fl_fisc);
 iv_needle = mView.findViewById(R.id.iv_needle);
 //設置監聽事件
 fl_disc.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View v) {
 trigger();
 }
 });
 /**
 * 定義所須要執行的動畫：
 * 1，光盤轉動的動畫
 * 2.指針指向光盤的動畫
 * 3.指針離開光盤的動畫
 * 使用startAnimation
 */
 //初始化
 mPlayMusicAnim = AnimationUtils.loadAnimation(mContext,R.anim.play_music_animation);
 mPlayNeedleAnim = AnimationUtils.loadAnimation(mContext,R.anim.play_needle_anim);
 mStopNeedleAnim = AnimationUtils.loadAnimation(mContext,R.anim.stao_needle_anim);
 addView(mView);
 }
 /**
 * 設置光盤中顯示的音樂封面圖片
 */
 public void setMusicIcon(String icon){
 Glide.with(mContext)
 .load(icon)
 .into(cv_icon);
 }
 public void setMusicIcon(int album1) {
 cv_icon.setImageResource(album1);
 }
 /**
 * 播放音樂：設置動畫執行效果
 */
 public void playMusic(){
 isPlay = true;
 fl_disc.startAnimation(mPlayMusicAnim);
 iv_needle.startAnimation(mPlayNeedleAnim);
 }
 /**
 * 中止音樂：設置動畫執行效果
 */
 private void stopMusic(){
 isPlay = false;
 fl_disc.clearAnimation();
 iv_needle.startAnimation(mStopNeedleAnim);
 //顯示按鈕
 iv_play.setVisibility(View.VISIBLE);
 }
 /**
 * 切換播放狀態
 */
 private void trigger(){
 if(isPlay){
 stopMusic();
 }else {
 playMusic();
 }
 }
}
複製代碼

最後

若是你看到了這裏，以爲文章寫得不錯就給個小讚唄？若是你以爲那裏值得改進的，請給我留言。必定會認真查詢，修正不足。謝謝。

最後針對Android程序員，小編這邊給你們整理了一些資料，其中分享內容包括不限於**【高級UI、性能優化、移動架構師、NDK、混合式開發（ReactNative+Weex）微信小程序、Flutter等全方面的Android進階實踐技術】**但願能幫助到你們，也節省你們在網上搜索資料的時間來學習，也能夠分享動態給身邊好友一塊兒學習！