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

PS：今天偶然聽到前不久的一個消息，我也是驚了！網易雲音樂暫時下架了，內心就是五味陳雜。

由於最近自己在做一個音樂APP，在播放音樂時，想實現網易雲那種帶光盤和指針的界面，所以在查找了許多的學習教程，對網易雲音樂的消息也特別的關注。

同時也希望有知情的大佬評論一下，網易雲音樂到底怎麼了？

以下是我的學習製作過程，先放出網易雲播放界面

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中該包的詳細說明，地址是 https://github.com/wasabeef/glide-transformations

(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) 效果

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開發程序員痛心事蹟：實現音樂播放界面，模仿網易雲音樂

1.隱藏statusBar

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

3.設置背景模糊

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

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

最後

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

leetcode 60 排列序列

一個docker容器暴露多個端口

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

資深Android程序員向你發問：如果離開公司這個平臺，你還能靠什麼賺錢？

身爲一位程序員：你是否思考過自己想成爲什麼級別的程序員？

論“Android”在未來十年的發展

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

不同層級的Android開發者的不同行爲，我們該如何進階和規劃？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結