PS: I was surprised to hear the news by chance today! NetEase cloud music temporarily off the shelves, the heart is mixed emotions.

Recently, I am making a music APP, and I want to realize the interface with CD and pointer like NetEase Cloud when playing music, so I am looking for a lot of learning tutorials and paying special attention to the news of NetEase Cloud music.

At the same time also hope to have informed big guy comment, NetEase cloud music after all how?

The following is the process of my study and production. First, the NetEase Cloud play interface is released

1. Hide the statusBar

// Hide the statusBar, the first argument is the flag bit of the new window, The second parameter is the flag bit to be modified getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);Copy the code

2. Layout file (temporarily add back button, background, song title and author)

<? The 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=" music name" 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=" author "Android :textColor="@android:color/white"/> </LinearLayout> </FrameLayout>Copy the code

3. Set the background blur

Using GlideTransTransformations package

(1) Import package (app/build.gradle)

// Remember to import Glide package if it is not introduced, Because both are used with the implementation of 'com. Making. Bumptech. Glide: glide: 4.9.0' / / glide - transformation implementation 'jp. Wasabeef: glide - transformations: 4.0.1'Copy the code

(2) Load the image. Set the effect to blur. For other effects, please refer to the detailed description of the package in Github and the address is github.com/wasabeef/gl…

(3) Operation code, load can be a network picture URL, can also be a file in the module

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);Copy the code

(4) effect

4. Customize the View with pointer disc

(1) a pointer

(2) disc

<? The 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>Copy the code

The XML above is a layout of the custom view. The code for the custom view is shown below

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); }}Copy the code

Then add this custom view to the original layout file and call setMusicIcon in the Activity to set the image as follows:

5. Set the animation (@ integers/XXXX is in app/SRC/main/res/values/integers. The XML custom variables)

(1) Animation of disc rotation

<? The 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>Copy the code

(2) Pointer to CD animation

<?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>
Copy the code

(3) The pointer leaves the disc animation

<? The 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>Copy the code

(4) Set the animation in the custom View, and call the playMusic() method in the play Activity, so that the animation effect starts

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(); fl_disc.setonClickListener (new OnClickListener() {@override public void onClick(View v) {trigger(); }}); /** * defines the animation that needs to be executed: * 1, the animation for the disc rotation * 2. Pointer to CD animation * 3. Pointer to animation away from CD * use startAnimation */ // initialize 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); // Display button iv_play.setvisibility (view.visible); } /** * private void trigger(){if(isPlay){stopMusic(); }else { playMusic(); }}}Copy the code

The last

Why don’t you give a thumbs-up if you see this and think it’s a good article? If you think there is something worth improving, please leave a message. Will inquire seriously, correct inadequacy. thank you

The road to being an Android architect is a long one.