【达内课程】音乐播放器4.0（播放详情页上）

2024-05-12 09:48
文章标签 音乐 播放 播放器 课程 4.0 详情页

本文主要是介绍【达内课程】音乐播放器4.0（播放详情页上），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

开发步骤

【开发步骤】
点击 CircleImageView 时，弹出完整的播放界面
1、给 CircleImageView 添加 onClick 监听
2、编写 RelativeLayoutPlayMusic 界面
3、完成弹出动画操作
4、点击返回键，弹出 RelativeLayoutPlayMusic

我们按照步骤开发，修改 actviity_test 布局为 RelativeLayout 同时增加要弹出的界面布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/tv_title_bar"android:layout_width="match_parent"android:layout_height="50dp"android:background="#2894FF"android:gravity="center"android:text="音乐播放器"android:textColor="#fff" /><RadioGroupandroid:id="@+id/radioGroup"android:layout_width="match_parent"android:layout_height="40dp"android:layout_below="@+id/tv_title_bar"android:orientation="horizontal"><RadioButtonandroid:id="@+id/radioButtonNew"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:checked="true"android:gravity="center"android:text="新歌榜"android:textColor="@drawable/selector_tab"android:textSize="18sp" /><RadioButtonandroid:id="@+id/radioButtonHot"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:gravity="center"android:text="热歌榜"android:textColor="@drawable/selector_tab"android:textSize="18sp" /></RadioGroup><androidx.viewpager.widget.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_above="@+id/ll_bottom"android:layout_below="@+id/radioGroup"android:layout_weight="1"android:background="#ffffff" /><LinearLayoutandroid:id="@+id/ll_bottom"android:layout_width="match_parent"android:layout_height="50dp"android:layout_alignParentBottom="true"android:background="#2894FF"android:gravity="center_vertical"android:paddingLeft="10dp"android:paddingRight="10dp"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/img_music_thumb"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginRight="10dp"android:src="@mipmap/ic_launcher" /><TextViewandroid:id="@+id/tv_music_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="歌名"android:textColor="@android:color/white" /></LinearLayout><RelativeLayoutandroid:id="@+id/rlPlayMusic"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@mipmap/bg_music"android:visibility="invisible"><ImageViewandroid:id="@+id/img_play_music_background"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop" /><TextViewandroid:id="@+id/tv_play_music_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_marginTop="20dp"android:text="hehe"android:textColor="@android:color/white"android:textSize="22dp" /><TextViewandroid:id="@+id/tv_play_music_singer"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/tv_play_music_title"android:layout_centerHorizontal="true"android:layout_marginTop="20dp"android:text="hehe"android:textColor="@android:color/white"android:textSize="18dp" /><ImageViewandroid:id="@+id/img_play_music_thumb"android:layout_width="300dp"android:layout_height="300dp"android:layout_below="@+id/tv_play_music_singer"android:layout_centerHorizontal="true"android:layout_marginTop="10dp"android:scaleType="centerCrop"android:src="@mipmap/ic_launcher" /><TextViewandroid:id="@+id/img_play_music_lrc"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/img_play_music_thumb"android:layout_alignLeft="@+id/img_play_music_thumb"android:layout_alignRight="@+id/img_play_music_thumb"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:gravity="center"android:text="歌词歌词歌词"android:textColor="@android:color/white" /><SeekBarandroid:id="@+id/sk_play_music_progress"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/img_play_music_lrc"android:layout_margin="5dp" /><TextViewandroid:id="@+id/tv_play_music_current_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/sk_play_music_progress"android:layout_alignLeft="@+id/sk_play_music_progress"android:text="00:00"android:textColor="@android:color/white" /><TextViewandroid:id="@+id/tv_play_music_total_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/sk_play_music_progress"android:layout_alignRight="@+id/sk_play_music_progress"android:text="3:50"android:textColor="@android:color/white" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="20dp"><ImageViewandroid:id="@+id/img_pre_music"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:src="@android:drawable/ic_media_previous" /><ImageViewandroid:id="@+id/img_pause_music"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:src="@android:drawable/ic_media_pause" /><ImageViewandroid:id="@+id/img_next_music"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:src="@android:drawable/ic_media_next" /></LinearLayout></RelativeLayout></RelativeLayout>

在 Activity 中给界面控件初始化，然后给转动的底部图片增加点击事件，让刚才增加的 RelativeLayout 弹出，然后点击返回，再弹回

public class TestActivity extends AppCompatActivity implements View.OnClickListener {......private RelativeLayout rlPlayMusic;private ImageView img_play_music_background;private ImageView img_play_music_thumb;.....private void setViews() {.....tvMusicTitle = findViewById(R.id.tv_music_title);rlPlayMusic = findViewById(R.id.rlPlayMusic);img_play_music_background = findViewById(R.id.img_play_music_background);img_play_music_thumb = findViewById(R.id.img_play_music_thumb);}......private void setListeners() {......imgMusicThumb.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.img_music_thumb://显示出RelativeLayoutrlPlayMusic.setVisibility(View.VISIBLE);//弹出TranslateAnimation animation = new TranslateAnimation(0, 0, rlPlayMusic.getHeight(), 0);animation.setDuration(500);rlPlayMusic.setAnimation(animation);break;}}@Overridepublic void onBackPressed() {if (rlPlayMusic.getVisibility() == View.VISIBLE) {rlPlayMusic.setVisibility(View.INVISIBLE);TranslateAnimation animation = new TranslateAnimation(0, 0, 0, rlPlayMusic.getHeight());animation.setDuration(500);rlPlayMusic.setAnimation(animation);} else {super.onBackPressed();}}......
}

其中添加动画时，是从底部弹出，到原来的位置（RelativeLayout 本来覆盖在屏幕全屏的），所以 X 坐标变化是0->0，Y 坐标变化是 RelativeLayout 的高度->0（Y左边原点0，越往下坐标值越大，越往上坐标值越小）
在这里插入图片描述
【开发步骤】
显示播放界面中的：背景图片与专辑图片
当音乐开始播放后，获取该音乐的两个图片路径
异步发送 http 请求，获取图片 bitmap，设置到相应的 ImageView 中

根据开放步骤修改 Activity

class MusicInfoBroadCastReceiver extends BroadcastReceiver {@Overridepublic void onReceive(Context context, Intent intent) {String action = intent.getAction();if (action.equals(Globalconsts.ACTION_MUSIC_STARTED)) {......tvMusicTitle.setText(title);//更新专辑图片String thumb = music.albumPic;BitmapUtils.loadBitmap(thumb, new BitmapCallback() {@Overridepublic void onBitmapLoaded(Bitmap bitmap) {if (bitmap != null) {img_play_music_thumb.setImageBitmap(bitmap);} else {img_play_music_thumb.setImageResource(R.mipmap.ic_launcher);}}});//更新背景图final String background = music.albumPic;BitmapUtils.loadBitmap(background, new BitmapCallback() {@Overridepublic void onBitmapLoaded(Bitmap bitmap) {if (bitmap != null) {//模糊化处理BitmapUtils.loadBlurBitmap(bitmap, new BitmapCallback() {@Overridepublic void onBitmapLoaded(Bitmap bitmap) {img_play_music_background.setImageBitmap(bitmap);}});} else {img_play_music_background.setImageResource(R.mipmap.ic_launcher);}}});}}}

BitmapUtils 增加以下方法

/*** 异步加载模糊图片** @param bitmap   源图片* @param callback*/public static void loadBlurBitmap(final Bitmap bitmap, final BitmapCallback callback) {//只要有耗时的操作就不能在主线程执行AsyncTask<String, String, Bitmap> task = new AsyncTask<String, String, Bitmap>() {@Overrideprotected Bitmap doInBackground(String... strings) {Bitmap b = createBlurBitmap(bitmap, 10);return b;}@Overrideprotected void onPostExecute(Bitmap bitmap) {callback.onBitmapLoaded(bitmap);}};task.execute();}

其中 createBlurBitmap 方法是一个模糊 bitmap 的方法，可以参考：模糊化处理Bitmap的一个方法

查看效果图

在这里插入图片描述

BitmapUtils 中新增一个可以展示压缩过后 bitmap 的方法

/*** @param path  资源路径* @param scale 压缩比例* @param bitmapCallback*/public static void loadBitmap(final String path, final int scale, final BitmapCallback bitmapCallback) {AsyncTask<String, String, Bitmap> task = new AsyncTask<String, String, Bitmap>() {@Overrideprotected Bitmap doInBackground(String... strings) {try {//先从内存缓存中读//再从文件中读String filename = path.substring(path.lastIndexOf("/") + 1);File file = new File(MusicApplication.getApp().getCacheDir(), "images/" + filename);Bitmap b = bitmap(file, scale);if (b != null) {return b;}InputStream is = HttpUtils.getInputStream(path);//下载图片并且不压缩b = BitmapFactory.decodeStream(is);//下载下来的原始尺寸图片，存入缓存中save(b, file);//从文件中读取bitmap，按照scale压缩b = bitmap(file, scale);return b;} catch (IOException e) {e.printStackTrace();}return null;}//主线程中执行回调方法@Overrideprotected void onPostExecute(Bitmap bitmap) {bitmapCallback.onBitmapLoaded(bitmap);}};task.execute();}

同时修改bitmap方法，同时修改调用该方法的地方，传入第二个参数0

public static Bitmap bitmap(File file, int scale) {if (!file.exists()) {return null;}if (scale == 0) {Bitmap b = BitmapFactory.decodeFile(file.getAbsolutePath());return b;} else {BitmapFactory.Options opts = new BitmapFactory.Options();opts.inSampleSize = scale;Bitmap b = BitmapFactory.decodeFile(file.getAbsolutePath(), opts);return b;}}

MainActivity 中更新背景图处的方法修改为

//更新背景图final String background = music.albumPic;BitmapUtils.loadBitmap(background, 10,new BitmapCallback() {@Overridepublic void onBitmapLoaded(Bitmap bitmap) {if (bitmap != null) {//模糊化处理BitmapUtils.loadBlurBitmap(bitmap, new BitmapCallback() {@Overridepublic void onBitmapLoaded(Bitmap bitmap) {img_play_music_background.setImageBitmap(bitmap);}});} else {img_play_music_background.setImageResource(R.mipmap.ic_launcher);}}});

这篇关于【达内课程】音乐播放器4.0（播放详情页上）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/982281。

相关文章

Python实现多路视频多窗口播放功能

Python实现多路视频多窗口播放功能

《Python实现多路视频多窗口播放功能》这篇文章主要为大家详细介绍了Python实现多路视频多窗口播放功能的相关知识,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下... 目录一、python实现多路视频播放功能二、代码实现三、打包代码实现总结一、python实现多路视频播放功能服务端开
阅读更多...
流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台，是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力，在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术，能够处理多种视频流格式，并以多种格式（RTMP、RTSP、HTTP-FLV、WebS
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
一款支持同一个屏幕界面同时播放多个视频的视频播放软件

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具，支持在一块屏幕上同时播放多个视频。其主要功能包括： 多视频播放：用户可以在一个窗口中同时播放任意数量的视频，数量仅受硬件性能限制。支持多种格式和流媒体：GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL（如 m3u8 链接）。自定义网格布局：用户可以配置播放器的网格布局，以适应不同的观看需求。硬
阅读更多...
《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》P98

《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》P98

更改为 差分的数学表达式从泰勒级数展开式可得： 后悔没听廖老师的。 禹晶、肖创柏、廖庆敏《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》 禹晶、肖创柏、廖庆敏《数字图像处理》资源二维码
阅读更多...
UniApp实现漂亮的音乐歌词滚动播放效果

UniApp实现漂亮的音乐歌词滚动播放效果

在现代的音乐播放应用中，歌词的展示和滚动播放已经成为了一个非常常见的功能。今天，我们将通过UniApp来实现一个漂亮的歌词滚动播放功能。我们将使用UniApp提供的组件和API来完成这个任务。 页面结构 在页面的模板部分，我们需要创建一个音频播放器和歌词展示区域。使用<scroll-view>组件来实现歌词的滚动效果。 <template><view class="audio-co
阅读更多...
Mongodb最新版本安装（4.0以上）

Mongodb最新版本安装（4.0以上）

最近学习Mongodb数据库 总结了一下心得分享给大家 一，首先需要去官网下载Mongodb  网址https://www.mongodb.com/download-center/community   如下图所示 选择版本号、对应的操作系统、安装包后 点击download  开始下载  下载完成后双击安装就行 安装步骤 1.双击之后如图所示 直接next 2.由于笔者没有保存这张
阅读更多...
QT项目实战之音乐播放器2.0版本

QT项目实战之音乐播放器2.0版本

该版本相较于1.0版本最主要的不同在于连接数据库实现类似于歌曲收藏和取消收藏的功能。 详细情况看我的这篇文章http://t.csdnimg.cn/WS5s8。 效果展示 VSMyMusicShow2.0 define.h UseMySQL.h   musicInfo.h   VSMyMusicPlayer.h
阅读更多...
Vue 中实现视频播放的艺术

Vue 中实现视频播放的艺术

随着前端技术的飞速发展，视频播放在 Web 应用中已经成为了一个不可或缺的功能。从社交媒体平台到教育网站，再到在线购物平台，视频元素无处不在。而 Vue.js 作为当今最流行的前端框架之一，在实现视频播放时提供了很多强大的工具和技巧。在这篇博客中，我们将深入探讨如何使用 Vue.js 实现视频播放功能，不仅仅是简单地嵌入视频，还要添加一些高级功能，如自定义播放器控件、播放进度条、视频切换、事件处理
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2