2. 程式人生 > >Android仿網易雲音樂播放介面

Android仿網易雲音樂播放介面

阿新 • • 發佈：2019-01-02

概述

網易雲音樂是一款非常優秀的音樂播放器，尤其是播放介面，使用唱盤機風格，顯得格外古典優雅。這裡拋磚引玉，原文地址：http://www.jianshu.com/p/cb54990219d9
首先來看一下網易的播放效果。
這裡寫圖片描述
要實現上面的功能，我們需要對介面進行一個拆分，拆分後大概包含如下結構：

  • 主介面佈局設計
  • 唱盤佈局設計
  • 動態佈局
  • 唱盤控制元件DiscView對外介面及方法
  • 音樂狀態控制時序圖

分析及實現

主介面佈局設計

主介面佈局從上到下可以劃分幾大區域，如圖：
這裡寫圖片描述
如圖，由上到下主要分為：標題欄區、唱盤區域、時長顯示區域、播放控制區域。
標題欄
使用ToolBar實現，字型可能需要自定義。
唱盤區域
唱盤區域包括唱盤、唱針、底盤、以及實現切換的ViewPager等控制元件，該佈局比較複雜，本案例使用自定義控制元件實現唱盤區域。
時長顯示區域


使用RelativeLayout作為根佈局，進度條使用SeekBar實現。
播放控制區域
比較簡單，使用LinearLayout作為根佈局。

唱盤佈局實現（難點）

唱盤區域由控制元件DiscView實現，以RelativeLayout為根佈局，子控制元件包括：底盤、唱針、ViewPager等。其中，底盤和唱針均用ImageView實現，然後使用ViewPager載入ImageView實現唱片的切換。如圖：
這裡寫圖片描述
唱片佈局如下：

<?ml version="1.0" encoding="utf-8"?>
<com.achillesl.neteasedisc.widget.DiscView

 
    mlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!--底盤-->
    <ImageView
        android:id="@+id/ivDiscBlackgound"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
 

        android:layout_centerHorizontal="true"
        />

    <!--ViewPager實現唱片切換-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vpDiscContain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        />

    <!--唱針-->
    <ImageView
        android:id="@+id/ivNeedle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_needle"/>

</com.achillesl.neteasedisc.widget.DiscView>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

這裡面涉及到一個DiscView類，這個是一個複合類，我們來看一些主要的功能。
唱盤控制元件DiscView提供一個介面IPlayInfo，程式碼如下：

public interface IPlayInfo {
    /*用於更新標題欄變化*/
    void onMusicInfoChanged(String musicName, String musicAuthor);
    /*用於更新背景圖片*/
    void onMusicPicChanged(int musicPicRes);
    /*用於更新音樂播放狀態*/
    void onMusicChanged(MusicChangedStatus musicChangedStatus);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

這上面定義的三個函式作用：　分別用於更新標題欄（音樂名、作者名）、更新背景圖片以及控制音樂播放狀態（播放、暫停、上/下一首等）。
點選主介面播放/暫停、上/下一首按鈕時，呼叫DiscView暴露的方法：

@Override
public void onClick(View v) {
    if (v == mIvPlayOrPause) {
        mDisc.playOrPause();
    } else if (v == mIvNet) {
        mDisc.net();
    } else if (v == mIvLast) {
        mDisc.last();
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

當主介面收到DiscView回撥時，呼叫相關方法控制音樂播放，這樣邏輯就會很清晰，各分職責：

public void onMusicChanged(MusicChangedStatus musicChangedStatus) {
    switch (musicChangedStatus) {
        case PLAY:{
            play();
            break;
        }
        case PAUSE:{
            pause();
            break;
        }
        case NET:{
            net();
            break;
        }
        case LAST:{
            last();
            break;
        }
        case STOP:{
            stop();
            break;
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

音樂狀態控制時序圖

這裡寫圖片描述
音樂控制狀態時序如圖3-3所示，點選Activity的按鈕時，先呼叫DiscView的相關方法，並在合適的時機（如動畫結束）再將狀態回撥到Activity，並通過廣播發送指令到Service，實現音樂狀態切換，最後通過廣播更新UI狀態。
這個狀態的切換隻有你仔細觀察就會明白它的流程了。專案架構介紹到這裡，接下來是部分視覺效果以及設計思路的介紹和專案的一些難點介紹。

解決載入大圖OOM問題

解決大圖載入一般有幾種方案：
1. 設定largeHeap為true。
2. 根據圖片型別選定解碼格式。
3. 根據原始圖片寬高及目標顯示寬高，設定圖片取樣率。

根據實際經驗我們一般採用後兩種，第一種雖然通過增加堆記憶體來延緩了oom的時機，但是治標不治本。這裡我們整理一個類。

private Bitmap getMusicPicBitmap(int musicPicSize, int musicPicRes) {
    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;

    BitmapFactory.decodeResource(getResources(),musicPicRes,options);
    int imageWidth = options.outWidth;

    int sample = imageWidth / musicPicSize;
    int dstSample = 1;
    if (sample > dstSample) {
        dstSample = sample;
    }
    options.inJustDecodeBounds = false;
    //設定圖片取樣率
    options.inSampleSize = dstSample;
    //設定圖片解碼格式
    options.inPreferredConfig = Bitmap.Config.RGB_565;

    return Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(),
            musicPicRes, options), musicPicSize, musicPicSize, true);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

我相信有過幾年Java開發經驗或Android經驗的人都會知道這麼一個常識：首先設定options.inJustDecodeBounds = true，這樣BitmapFactory.decodeResource的時候僅僅會載入圖片的一些資訊，然後通過options.outWidth獲取到圖片的寬度，根據目標圖片尺寸算出取樣率。最後通過inPreferredConfig設定解碼格式，才正式載入圖片，這樣有效的避免了圖片的oom。

生成圓圖最簡單方式

以前我們使用圓圈一般會自定義一個View，然後實現onDraw()，不過Android在android.support.v4.graphics.drawable 裡面為我們實現了一個類RoundedBitmapDrawable。使用如下，我們可以對其做一個簡單的封裝：

private Drawable getDiscBlackgroundDrawable() {
    int discSize = (int) (mScreenWidth * DisplayUtil.SCALE_DISC_SIZE);
    Bitmap bitmapDisc = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R
            .drawable.ic_disc_blackground), discSize, discSize, false);
    RoundedBitmapDrawable roundDiscDrawable = RoundedBitmapDrawableFactory.create
            (getResources(), bitmapDisc);
    return roundDiscDrawable;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

使用LayerDrawable進行圖片合成

LayerDrawable介紹
　　LayerDrawable也可包含一個Drawable陣列，因此係統將會按這些Drawable物件的陣列順序來繪製它們，索引最大的Drawable物件將會被繪製在最上面。 LayerDrawable有點類似PhotoShop圖層的概念。
我們在分析唱片佈局的時候發現原View包含兩個ImageView，估計是一個用來顯示唱盤，一個用來顯示專輯圖片。
這裡寫圖片描述
使用LayerDrawable生成複合圖片程式碼：

private Drawable getDiscDrawable(int musicPicRes) {
    int discSize = (int) (mScreenWidth * DisplayUtil.SCALE_DISC_SIZE);
    int musicPicSize = (int) (mScreenWidth * DisplayUtil.SCALE_MUSIC_PIC_SIZE);

    Bitmap bitmapDisc = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R
            .drawable.ic_disc), discSize, discSize, false);
    Bitmap bitmapMusicPic = getMusicPicBitmap(musicPicSize,musicPicRes);
    BitmapDrawable discDrawable = new BitmapDrawable(bitmapDisc);
    RoundedBitmapDrawable roundMusicDrawable = RoundedBitmapDrawableFactory.create
            (getResources(), bitmapMusicPic);

    //抗鋸齒
    discDrawable.setAntiAlias(true);
    roundMusicDrawable.setAntiAlias(true);

    Drawable[] drawables = new Drawable[2];
    drawables[0] = roundMusicDrawable;
    drawables[1] = discDrawable;

    LayerDrawable layerDrawable = new LayerDrawable(drawables);
    int musicPicMargin = (int) ((DisplayUtil.SCALE_DISC_SIZE - DisplayUtil
            .SCALE_MUSIC_PIC_SIZE) * mScreenWidth / 2);
    //調整專輯圖片的四周邊距
    layerDrawable.setLayerInset(0, musicPicMargin, musicPicMargin, musicPicMargin,
            musicPicMargin);

    return layerDrawable;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

　在上面程式碼中，我們先生成了唱盤物件BitmapDrawable，然後通過RoundedBitmapDrawable生成圓形專輯圖片，然後存放到Drawable[]陣列中，並用來初始化LayerDrawable物件。最後，我們用setLayerInset方法調整專輯圖片的四周邊距，讓它顯示在唱盤正中。

實現背景毛玻璃效果

這個網上的資料很多，也有基於JNI實現的，這個使用JNI實現可以看一下我之前的部落格JNI實現毛玻璃效果，這裡為了方便大家使用，我就直接使用工具類的方式，關於模糊化的實現邏輯大家可以搜尋一下“BlurUtil”，考慮到這部分程式碼可能會阻塞UI執行緒，因此將其放著單獨執行緒中執行。

private void try2UpdateMusicPicBackground(final int musicPicRes) {
    if (mRootLayout.isNeed2UpdateBackground(musicPicRes)) {
        new Thread(new Runnable() {
            @Override
            public void run() {
                final Drawable foregroundDrawable = getForegroundDrawable(musicPicRes);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        mRootLayout.setForeground(foregroundDrawable);
                        mRootLayout.beginAnimation();
                    }
                });
            }
        }).start();
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

使用LayerDrawable與屬性動畫，實現背景切換時漸變效果

仔細觀察網易雲音樂，發現切換歌曲時，背景圖也會隨著變化。其實這種也很好做，可以使用LayerDrawable加屬性動畫來實現。
　思路如下：
　　1. 給LayerDrawable設定兩個圖層，第一圖層是前一個背景，第二圖層是準備顯示的背景。
　　2. 先把準備顯示的背景透明度設為0，因此完全透明，此時只顯示前一個背景圖。
　　3. 通過屬性動畫，動態將第二圖層的透明度從0調整至100，並不斷更新控制元件的背景。

public class BackgourndAnimationRelativeLayout etends RelativeLayout

//初始化LayerDrawable物件
private void initLayerDrawable() {
    Drawable backgroundDrawable = getContet().getDrawable(R.drawable.ic_blackground);
    Drawable[] drawables = new Drawable[2];

    /*初始化時先將前景與背景顏色設為一致*/
    drawables[INDE_BACKGROUND] = backgroundDrawable;
    drawables[INDE_FOREGROUND] = backgroundDrawable;

    layerDrawable = new LayerDrawable(drawables);
}

private void initObjectAnimator() {
    objectAnimator = ObjectAnimator.ofFloat(this, "number", 0f, 1.0f);
    objectAnimator.setDuration(DURATION_ANIMATION);
    objectAnimator.setInterpolator(new AccelerateInterpolator());
    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int foregroundAlpha = (int) ((float) animation.getAnimatedValue() * 255);
            /*動態設定Drawable的透明度，讓前景圖逐漸顯示*/
            layerDrawable.getDrawable(INDE_FOREGROUND).setAlpha(foregroundAlpha);
            BackgourndAnimationRelativeLayout.this.setBackground(layerDrawable);
        }
    });
    objectAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            /*動畫結束後，記得將原來的背景圖及時更新*/
            layerDrawable.setDrawable(INDE_BACKGROUND, layerDrawable.getDrawable(
                    INDE_FOREGROUND));
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    });
}

//對外提供方法，用於播放漸變動畫
public void beginAnimation() {
    objectAnimator.start();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

唱針變化邏輯

我們來看一下唱針的變化，為了真實的模擬真實的場景，唱針主要有以下狀態：

  • 初始狀態為暫停/停止時，點選播放按鈕，此時唱針移動到底部。
  • 初始狀態為播放時，點選暫停按鈕，此時唱針移到頂部。
  • 初始狀態為播放時，手指按住唱盤並稍微偏移，等唱針未移到頂部時，立刻鬆開手指，此時唱針回到頂部後立刻再回到唱盤位置。
  • 初始狀態為暫停/停止時，點選播放，此時唱針往下移動，當唱針還未移到底部，手指馬上按住唱盤並偏移，此時唱針立刻往頂部移動。
  • 初始狀態為播放/暫停/停止時，左右滑動唱片進行音樂切換，唱針動畫未結束時，立刻點選上/下一首按鈕，進行音樂切換，此時唱針狀態不能出現混亂。

初始狀態為暫停/停止時，點選播放按鈕，此時唱針移動到底部。
這裡寫圖片描述
初始狀態為播放時，點選暫停按鈕，此時唱針移到頂部。
這裡寫圖片描述
初始狀態為播放時，手指按住唱盤並稍微偏移，等唱針未移到頂部時，立刻鬆開手指，此時唱針回到頂部後立刻再回到唱盤位置。
這裡寫圖片描述
初始狀態為暫停/停止時，點選播放，此時唱針往下移動，當唱針還未移到底部，手指馬上按住唱盤並偏移，此時唱針立刻往頂部移動。
這裡寫連結內容
初始狀態為播放/暫停/停止時，左右滑動唱片進行音樂切換，唱針動畫未結束時，立刻點選上/下一首按鈕，進行音樂切換，此時唱針狀態不能出現混亂，反覆做了步驟1的動作。
這裡寫圖片描述
我們隊上面的圖片仔細分析，然後結合ViewPager的原理我們來看看。
這裡寫圖片描述
唱片(即ViewPager)的狀態可以通過PageChangeListener得到。唱針的狀態，筆者用列舉來表示，並且在動畫的開始、結束時對唱針狀態及時更新。那麼我們很容易就想到case或者列舉。

 private enum NeedleAnimatorStatus {
        /*移動時：從唱盤往遠處移動*/
        TO_FAR_END,
        /*移動時：從遠處往唱盤移動*/
        TO_NEAR_END,
        /*靜止時：離開唱盤*/
        IN_FAR_END,
        /*靜止時：貼近唱盤*/
        IN_NEAR_END
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

動畫開始時，更新唱針狀態：

@Override
public void onAnimationStart(Animator animator) {
    /**
     *根據動畫開始前NeedleAnimatorStatus的狀態，
     *即可得出動畫進行時NeedleAnimatorStatus的狀態
     **/
    if (needleAnimatorStatus == NeedleAnimatorStatus.IN_FAR_END) {
        needleAnimatorStatus = NeedleAnimatorStatus.TO_NEAR_END;
    } else if (needleAnimatorStatus == NeedleAnimatorStatus.IN_NEAR_END) {
        needleAnimatorStatus = NeedleAnimatorStatus.TO_FAR_END;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

動畫結束時，更新唱針狀態：

@Override
public void onAnimationEnd(Animator animator) {
    if (needleAnimatorStatus == NeedleAnimatorStatus.TO_NEAR_END) {
        needleAnimatorStatus = NeedleAnimatorStatus.IN_NEAR_END;
        int inde = mVpContain.getCurrentItem();
        playDiscAnimator(inde);
    } else if (needleAnimatorStatus == NeedleAnimatorStatus.TO_FAR_END) {
        needleAnimatorStatus = NeedleAnimatorStatus.IN_FAR_END;
    }
｝
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

每種狀態都定義清楚，每個動畫負責的功能都拆分這樣寫起來就比較清楚了。
　比如需要播放動畫時，就包含兩個狀態：　
- 唱針動畫暫停中，唱針處於遠端。
- 唱針動畫播放中，唱針處於從近端往遠端移動

那麼我們呼叫程式碼的時候就這麼用：

/*播放動畫*/
private void playAnimator() {
    /*唱針處於遠端時，直接播放動畫*/
    if (needleAnimatorStatus == NeedleAnimatorStatus.IN_FAR_END) {
        mNeedleAnimator.start();
    } 
    /*唱針處於往遠端移動時，設定標記，等動畫結束後再播放動畫*/
    else if (needleAnimatorStatus == NeedleAnimatorStatus.TO_FAR_END) {
        mIsNeed2StartPlayAnimator = true;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

至於其他的比較跨元件的介面更新，一般會使用廣播，大家也可以使用事件匯流排（EventBus）.
附上原始碼，這裡可能需要大家自己編譯。
附：仿網易雲音樂介面原始碼

相關推薦

Android仿網易雲音樂播放介面

概述 網易雲音樂是一款非常優秀的音樂播放器，尤其是播放介面，使用唱盤機風格，顯得格外古典優雅。這裡拋磚引玉，原文地址：http://www.jianshu.com/p/cb54990219d9 首先來看一下網易的播放效果。 要實現上面的功能，我們需要對介面進行一個拆分，

仿網易雲音樂播放介面

前言 網易雲音樂是一款非常優秀的音樂播放器，尤其是播放介面，使用唱盤機風格，顯得格外古典優雅。筆者出於學習與挑戰的想法，思考播放介面背後的實現原理，並寫了一個小程式。 筆者儘可能地去模仿官方的視覺、互動效果，其中包括了唱盤與唱針切換時的細節處理、背景漸變等。本文將會分享一些視覺效果實現的方法

微信小程式 --- CSS實現仿網易雲音樂播放介面效果（黑膠唱片與唱針純CSS實現）

下面程式碼的效果是網易雲音樂唱針和黑膠唱片的CSS效果實現方式，播放等並沒貼出來 實現效果的範圍 動態圖效果預覽： stylusW,panW是獲取系統寬度計算後的引數 w

Android仿網易雲音樂中鎖屏後在開鎖介面插屏功能

這個功能實現起來應該有多種方式，可以使用WindowManager建立window的方法。 在本文中我們使用開啟一個Activity來充當鎖屏介面。 實現步驟有以下兩步： 一、後臺開啟一個Service，監聽螢幕鎖屏廣播。 二、當螢幕熄滅，收到廣播後，開啟充當鎖屏介面的Activity。 實

Android 仿網易雲音樂 + Java socket自建伺服器 過程&心得分享

介紹 大二下學期的時候做的一個專案，一個線上音樂播放器 UI素材和佈局都參考了網易雲音樂，客戶端使用的是Android編寫的，而伺服器方面則是自己使用Java Socket，並自定義伺服器與客戶端之間的通訊協議~（安全方面就比較殘念） 完成的功能也比較少~

Android仿網易雲音樂開發之緣起

        於Android開發，抑或其他開發，我都屬於一個菜鳥級別的人物，我也算是抖音中毒的一位~但是我看上面的視訊卻笑不起來，更多的有心無力。一把年紀了還在為一點死工資掙扎，大好世界我也想出去走走。然而我翻了一下支付寶餘額，微信餘額，一顆辭職的心收起來了，不敢自稱碼農

Flutter仿網易雲音樂：播放介面

寫在前頭 本來是要做一個仿網易雲音樂的flutter專案，但是因為最近事情比較多，專案週期跨度會比較長，因此分幾個步驟來完成。這是仿網易雲音樂專案系列文章的第一篇。沒有完全照搬網易雲音樂的UI，借鑑了其中的黑膠唱機動畫。 先貼上專案地址 github.com/KinsomyJS/f… 初步效果圖

Android漂亮的音樂歌詞控制元件，仿網易雲音樂滑動效果

前言： 專案有個音樂播發器功能，實現音樂線上播放，同時需要帶有歌詞顯示功能。網上也找過，在github找到勉強能用的控制元件，只是效果還是差強人意，不是特別好。於是趁有空的時間，參考了網上的部分demo，自己也寫了個歌詞控制元件。 只要demo可以拉到最底

史上最牛逼的音樂播放器—仿網易雲音樂（已開源）

前言：音樂播放器倒見過不少，做到幾乎和官方網易雲音樂安卓版差不多的，還是頭第一回見。aa112901 的這款仿網易雲音樂安卓版客戶端，很多地方值得我們學習。無論是下載模組，還是換膚模組，還是炫麗的UI介面。等。用心在每一個細節。aa112901 本專案的github為:

iOS 開發仿網易雲音樂歌詞海報

atomic keyword draw write mode () 解析 efault album 使用網易雲音樂也是一個巧合，我之前一直使用QQ音樂聽歌，前

C# WPF 仿網易雲音樂（PC）左側菜單右側內容效果

ups tle onu urn mar mat 難點 -c nat 我們要做的效果是這樣的，左側是可折疊的菜單欄，右側是內容區域，點擊左側的菜單項右側內容區域則相應地切換。這篇博客標題起得比較隨意了，因為很多軟件、網站都有這種布局效果，所以請忽略。 wpf實現的話，我的辦

零基礎實現網易雲音樂播放器

循環 case phone width shadow rec pda user res H5增加了很多的標簽，面試的時候，如果面試官問你H5都有哪些新標簽，你回答header、footer、nav。這麽回答幾乎是無效的，因為這些標簽在H5裏面的角色，相當於雞骨頭、魚刺、蘑菇

Android 仿網易雲首頁來回滑那種效果

思路:中間ViewPager 畫廊,底部背景ImageView 高斯模糊   過程很曲折:參考了很多 比如網易雲音樂播放器頁面 也有類似效果 底部做成ViewPager 也可以 但是切換動畫 pagertransform 很難弄到合適的 所以最後決定還是ImageVi

WPF 仿網易雲音樂PC端

git demo mage r+ 體驗 music mvvm 成了 skin 簡介 (1)左側菜單采用 Expander+RadioButton； MVVM 綁定 後臺的一個Menu 屬性（使用轉換器） (2)右側采用Frame綁定Page的方式 ## 【更新日誌】

C# WPF 低仿網易雲音樂（PC）Banner動畫控制元件

原文: C# WPF 低仿網易雲音樂（PC）Banner動畫控制元件 由於技術有限沒能做到一模一樣的動畫，只是粗略地做了一下。動畫有點生硬，還有就是沒做出網易雲音樂的立體感。程式碼非常簡單粗暴，而且我也寫有很多註釋，這裡就不多囉嗦了，直接貼程式碼。 算了，囉嗦幾句。原理是這樣的，在自定義使用者控制元件內新

C# WPF 低仿網易雲音樂（PC）歌詞控制元件

原文: C# WPF 低仿網易雲音樂（PC）歌詞控制元件 提醒：本篇部落格記錄了修改的過程，廢話比較多，需要專案原始碼和看演示效果的直接拉到文章最底部~   網易雲音樂獲取歌詞的api地址 http://music.163.com/api/song/media?id=歌曲ID 填

ieaseMusic for Mac(第三方網易雲音樂播放器) v1.3.2中文版

ieasemusic mac版作為Mac平臺上的一款第三方的網易雲音樂客戶端，ieaseMusic繼承了網易雲音樂的所有功能，並且在播放介面和播放體驗上更加提升。按照ieaseMusic開發者的說法，ieaseMusic就是一款酷炫到不行的音樂播放器，非常漂亮，非常帥氣。 ieasemusic

第三方網易雲音樂播放器ieaseMusic

ieasemusic mac中文版是目前mac平臺上最好的網易雲音樂播放器，與網易雲音樂官方客戶端最大的區別是，官方的就是「客戶端」，完全按照其產品內容進行直接堆砌佈局，ieaseMusic繼承了網易雲音樂的所有功能，並且在播放介面和播放體驗上更加提升。按照ieaseMusic開發者的說法

[第三方網易雲音樂播放器]ieaseMusic

ieasemusic mac中文版是目前mac平臺上最好的網易雲音樂播放器，與網易雲音樂官方客戶端最大的區別是，官方的就是「客戶端」，完全按照其產品內容進行直接堆砌佈局，ieaseMusic繼承了網易雲音樂的所有功能，並且在播放介面和播放體驗上更加提升。按照ieaseMusic開發者的說法，ieas

樹莓派網易雲音樂播放器

來源 之前畢業的時候實在閒的無聊，正好手頭上有個樹莓派，就寫了個簡單的網易雲音樂播放器，程式碼很簡單，寫的也很亂，功能更簡單–只能搜尋歌曲，然後播放之，放在了github上，沒想到竟然收到三十多顆星，實在慚愧，然後放年假，就想著把功能稍微完善一下，於是就有了W