实现效果如下
播放时的图
暂停时的效果图
背景的布局
利用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();