一个音乐播放器的ui布局

实现效果如下

播放时的图
暂停时的效果图

背景的布局

利用Glide-transformation来实现背景图片的模糊化
这个播放界面的活动为MusicPlayActivity
这里时使用了FrameLayout来布局。

<?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=".activity.MusicPlayActivity">
    <ImageView
        android:id="@+id/iv_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/img1"
        android:scaleType="centerCrop"/>
    <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:layout_marginTop="520dp"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="音乐名称"
        android:textSize="@dimen/titleSize"
        android:textColor="@android:color/white"
        android:textStyle="bold"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="作者"
        android:textSize="@dimen/titleSize"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:layout_marginTop="@dimen/marginSize"/>
</LinearLayout>
</FrameLayout>

布局预览如下

在MusicPlayActivity.java中，
在初始化视图的函数中1.要找到imageView 的对象，利用Glide和Glide-transformation 库，将image View的图片换成一张网络图片，同时对其进行虚拟化。

  mIvBg = fd(R.id.iv_bg);
//        使用Glide_transformation
        Glide.with(this).load(uri1)
                .apply(RequestOptions.bitmapTransform(new BlurTransformation(25, 10)))
                .into(mIvBg);

自定义具有动画效果控件（将指针和圆圈合成一个控件）

自定义控件

定义类 PlayMusicView 继承自 FrameLayout
自定义类的常规操作
1.一个Content 字段。一个init(content) 函数。
在init()中完成对字段Content的赋值。
2.加载布局
3.添加布局 addView(view)
子布局的内容
1.利用FrameLayout 将光盘和里面的图片重叠展示。
注意添加监听事件只要对最外层添加即可。
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:id="@+id/fl_play_music"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/disTopSize">
        <!--        ciclerImageView-->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/disc" />

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/iv_icon"
            android:layout_width="@dimen/playMusicIconSize"
            android:layout_height="@dimen/playMusicIconSize"
            android:layout_gravity="center"
            app:civ_border_color="@android:color/black"
            app:civ_border_width="2dp" />
            <ImageView
                android:id="@+id/iv_playButton"
                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:id="@+id/iv_needle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/needle"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="@dimen/needleDisSize"/>

</FrameLayout>

预览效果

添加动画

指定动画文件

• 1.光盘转动的动画
• 2.指针到光盘的动画
• 3.指针离开光盘的动画

*/
在anim文件下创建3个动画文件,这三个动画都要添加一个线性内插器。
play_music.xml—光盘转动的动画

<?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:pivotY="50%"
        android:pivotX="50%"
        android:duration= "@integer/musicPlayDuration"
        android:repeatCount="infinite"
        />

</set>

play_needle.xml—指针到光盘

<?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:pivotX="0"
    android:pivotY="0"
    android:toDegrees="0"
    android:duration ="@integer/play_needle_duration"
    />

</set>

stop_needle.xml—指针离开光盘

<?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:pivotX="0"
        android:pivotY="0"
        android:toDegrees="-20"
        android:duration ="@integer/play_needle_duration"
        />

</set>

启动动画

1.载入动画对象

mPlayMusicAnim = AnimationUtils.loadAnimation(mContext,R.anim.play_music);
mNeedleStopAnim = AnimationUtils.loadAnimation(mContext,R.anim.stop_needle);
mNeedlePlayAnim = AnimationUtils.loadAnimation(mContext,R.anim.play_needle);

通过View的startAnimation()开始动画，clearAnimation()结束动画。

自定义类的主要实现代码

 private void init(Context context){
        mContext = context;
        mView = LayoutInflater.from(context).inflate(R.layout.play_music_cd,this, false);
        addView(mView);
        mMusicIcon = mView.findViewById(R.id.iv_icon);
        mPlayMusicAnim = AnimationUtils.loadAnimation(mContext,R.anim.play_music);
        mNeedleStopAnim = AnimationUtils.loadAnimation(mContext,R.anim.stop_needle);
        mNeedlePlayAnim = AnimationUtils.loadAnimation(mContext,R.anim.play_needle);
        mIvNeedle =mView.findViewById(R.id.iv_needle);
        //    光盘转到时是整个FrameLay在转到。
        mFlPlayMusic = mView.findViewById(R.id.fl_play_music);
        mIvPlayButton =mView.findViewById(R.id.iv_playButton);
//        点击事件要设置在最外层，
        mFlPlayMusic.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                trigger();
            }
        });

    }

    /**
     * 切换播放状态
     */
    public void trigger(){
        if (isPlaying){
            stopMusic();
        }else {
            playMusic();
        }

    }

    /**
     * 播放音乐
     */
    public void playMusic(){
        isPlaying =true;
        mIvPlayButton.setVisibility(View.INVISIBLE);
        mFlPlayMusic.startAnimation(mPlayMusicAnim);
        mIvNeedle.startAnimation(mNeedlePlayAnim);
    }
    public void stopMusic(){
        isPlaying =false;
        mFlPlayMusic.clearAnimation();
        mIvNeedle.startAnimation(mNeedleStopAnim);
        mIvPlayButton.setVisibility(View.VISIBLE);
    }

    /**
     * 设置光盘中显示的音乐封面图片
     * @param uri
     */
    public void setMusicIcon(String uri){
        Glide.with(mContext)
                .load(uri)
                .into(mMusicIcon);

    }

活动的初始化代码
1.设置网络图片的载入
2.直接调用playMusic()进入播放状态。

  mPlayMusicView =fd(R.id.play_music_view);
        mPlayMusicView.setMusicIcon(uri2);
//        跳转到该界面时时播放状态
        mPlayMusicView.playMusic();

音乐播放器的加载与使用