效果图

Android 音乐APP 启动优化

前言
正文
- ① 新建启动页
- ② 新建样式
- ③ 增加动画
- ④ 定位当前播放歌曲
结语

前言

Android应用冷启动时，又会短暂的黑屏或者白屏，然后才会进入主页面，黑屏是在Android版本低的时候才会出现，比如Android4.4、5.0。而现在的Android版本出现的就是白屏。这个虽然不应用功能的使用，但是对用户来说体验感并不好。那么怎么解决这个问题呢？我相信很多的博客都有这个方面的讲解，但是真正有良好体验的比较少，下面的这种也是参考了网易云音乐的启动方式。

正文

为了形成对比，先来看一下网易云的启动。

可以看到当点击桌面的图标时，马上进入启动页，没有卡顿没有白屏，那么你再运行一下Good Music。

可以看到打开速度也是很快的，但是你注意到这个白屏了吗？这样就不是很好的用户体验。那么网易云音乐是怎么处理这个白屏的呢？下面就来告诉你要怎么做。

① 新建启动页

每个APP都会有启动页，启动页有什么用呢？体现APP的功能定位、初始化基础的数据、网络或者本地数据的存储、商务广告展示等一些操作。当然现在我们没有那么多的要求，只要能够去掉这个白屏就万事大吉了。那么要新建一个Empty Activity。取名为SplashActivity。
然后进入AndroidManifest.xml。将MainActivity下的intent-filter放到SplashActivity下，作为打开应用进入的第一个页面。

② 新建样式

然后新建一个样式给SplashActivity使用。
在drawable下新建一个splash_bg.xml，里面代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@android:color/black"></item><item><bitmapandroid:gravity="center"android:src="@drawable/icon_logo" /></item>
</layer-list>

icon_logo是一个图标，如果你的图标需要高像素的话，你就在res下新建一个drawable-xhdpi / drawable-xxhdpi。我是新建了一个drawable-xhdpi，至于这个图标你可以自己决定，没有的话就到我的源码里面去拿。下面进入到styles.xml中，在里面增加如下的代码：

 <!--启动页主题样式--><style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"><item name="android:windowNoTitle">true</item><item name="android:windowFullscreen">true</item><item name="android:windowBackground">@drawable/splash_bg</item></style>

下面再到AndroidMainfest.xml中设置样式。

到这一步，你再运行就不会有白屏了。启动后会一直停留在SplashActivity这里。

③ 增加动画

那么现在启动页和白屏就搞定了，我也不想让我的启动页这么枯燥，所以我要加一个动画的效果进去。首先进入activity_splash.xml。里面的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layout 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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical"tools:context=".ui.SplashActivity"><RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dp_160"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Good Music"android:textColor="@color/white"android:textSize="@dimen/sp_24" /><TextViewandroid:id="@+id/tv_translate"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/black"android:text="Good Music"android:textColor="@color/black"android:textSize="@dimen/sp_24" /></RelativeLayout></LinearLayout>
</layout>

如果不出意外的话，你看到的应该是只有黑色背景和一个图标。
那么进入到SplashActivity。

里面定义了一个位移动画，在onCreate中调用initView方法。
那么这个方法就是最重要的。

 /*** 初始化*/private void initView() {ActivitySplashBinding binding = DataBindingUtil.setContentView(SplashActivity.this, R.layout.activity_splash);TextView tvTranslate = binding.tvTranslate;tvTranslate.post(new Runnable() {@Overridepublic void run() {//通过post拿到的tvTranslate.getWidth()不会为0。translateAnimation = new TranslateAnimation(0, tvTranslate.getWidth(), 0, 0);translateAnimation.setDuration(1000);translateAnimation.setFillAfter(true);tvTranslate.startAnimation(translateAnimation);//动画监听translateAnimation.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {//动画结束时跳转到主页面startActivity(new Intent(SplashActivity.this,MainActivity.class));}@Overridepublic void onAnimationRepeat(Animation animation) {}});}});}

首先通过databinding拿到控件，然后通过.post新起一个线程，这个时候就能获取到TextView的实际宽度，而不再是0。为什么要获取宽度呢。因为我在布局中放了一个相对布局，里面有两个TextView，第二个盖住了第一个。第二个是黑色背景黑色文字，但是它的宽高和第一个TextView是一样的。而我要做的效果是文字逐渐出现，从左至右，所以只要将第二个TextView向右位移TextView的宽度即可。移动时间为1s，然后监听这个动画，当动画结束时，进入MainActivity，水道渠成。那么现在运行一下：

GIF放上来可能有点卡帧，但是在手机上效果是相当的nice。

④ 定位当前播放歌曲

常规的我们播放音乐列表里面点击一首歌进行播放，然后这个时候会上下滑动列表，然后就会显现一个定位按钮，点击之后定位到当前播放的这首歌的位置。这在实际中是很常用的，不是吗！下面来操作起来。首先进入activity_local_music.xml，然后给之前扫描音乐的按钮增加一个id并修改点击按钮所触发的方法。

然后在创建一个location_music.xml。里面的代码如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="@dimen/dp_20"android:height="@dimen/dp_20"android:tint="#000000"android:viewportWidth="24.0"android:viewportHeight="24.0"><pathandroid:fillColor="@android:color/white"android:pathData="M12,8c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM20.94,11c-0.46,-4.17 -3.77,-7.48 -7.94,-7.94L13,1h-2v2.06C6.83,3.52 3.52,6.83 3.06,11L1,11v2h2.06c0.46,4.17 3.77,7.48 7.94,7.94L11,23h2v-2.06c4.17,-0.46 7.48,-3.77 7.94,-7.94L23,13v-2h-2.06zM12,19c-3.87,0 -7,-3.13 -7,-7s3.13,-7 7,-7 7,3.13 7,7 -3.13,7 -7,7z" />
</vector>

这是一个定位图标。
回到activity_local_music.xml

         <!--定位当前播放音乐按钮--><com.google.android.material.button.MaterialButtonandroid:id="@+id/btn_location_play_music"style="@style/Widget.MaterialComponents.Button.UnelevatedButton"android:layout_width="@dimen/dp_28"android:layout_height="@dimen/dp_28"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:layout_margin="@dimen/dp_36"android:insetLeft="@dimen/dp_0"android:insetTop="@dimen/dp_0"android:insetRight="@dimen/dp_0"android:insetBottom="@dimen/dp_0"android:onClick="onClick"android:textSize="@dimen/sp_14"android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"android:visibility="gone"app:backgroundTint="@color/white"app:cornerRadius="@dimen/dp_20"app:icon="@drawable/music_location"app:iconGravity="textStart"app:iconPadding="0dp"app:iconTint="@color/black" />

这里我用了MaterialButton,如果不知道这个是什么，可以看一下这一篇文章Material UI控件之MaterialButton，进入LocalMusicActivity，修改scanLocalMusic方法为onClick。

/*** 页面点击事件* @param view 控件*/public void onClick(View view) {switch (view.getId()) {case R.id.btn_scan_local_music://扫描本地音乐permissionsRequest();break;case R.id.btn_location_play_music://定位当前播放歌曲break;default:break;}}

通过这个方法来管理当前页面所有按钮的点击事件。下面在initView方法中增加对RecyclerView的滚动监听。

rvMusic.addOnScrollListener(new RecyclerView.OnScrollListener() {@Overridepublic void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {super.onScrollStateChanged(recyclerView, newState);if (newState == RecyclerView.SCROLL_STATE_IDLE) {//暂停showLocationMusic(false);} else if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {//滑动showLocationMusic(true);}}});

一共有两种状态，滑动和暂停，同时调用一个showLocationMusic方法。

 /*** 显示定位当前音乐图标*/private void showLocationMusic(boolean isScroll) {//先判断是否存在播放音乐if (oldPosition != -1) {if (isScroll) {//滑动btnLocationPlayMusic.setVisibility(View.VISIBLE);} else {//延时隐藏  Android 11（即API 30:Android R）弃用了Handler默认的无参构造方法,所以传入了Looper.myLooper()new Handler(Looper.myLooper()).postDelayed(new Runnable() {@Overridepublic void run() {btnLocationPlayMusic.setVisibility(View.GONE);}}, 2000);}}}

相信你应该已经懂了。当页面有歌曲播放时，滑动列表会显示定位按钮，停止2s后会隐藏定位按钮，下面就是要在点击定位按钮时，定位到当前播放歌曲，虽然目前还没有播放过歌曲。只是一个选中位置。通过下面两行代码就可以实现：

LinearLayoutManager linearLayoutManager = (LinearLayoutManager) rvMusic.getLayoutManager();
linearLayoutManager.scrollToPositionWithOffset(oldPosition, 0);

下面运行一下：

结语

OK，这边文章虽然不长，但是讲述的东西还是有用的，开发是一个精益求精的过程，并不是写的越快就越好，感谢你的阅读。
源码地址：Good Music

Android 音乐APP（二）启动白屏优化、定位当前播放歌曲相关推荐

android app启动白屏优化
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wuliang756071448/article/details/74067058 可以看到启动的时候 ...
Android app启动白屏优化
可以看到启动的时候会有一个白屏, 如果手机较慢的话, 这个白屏就会持续一段时间, 不太友好. 那么还有没有什么办法优化呢? 给我们的应用窗口弄一个PlaceHolder Android最新的Mater ...
【Android 性能优化】应用启动优化 ( 启动白屏问题 | 应用启动时间测量 | 冷启动 | 热启动 | 应用启动时间计算源码分析 )
文章目录一. APP 启动白屏 / 黑屏二. APP 启动速度测量 1. 通过 Logcat 日志查看应用启动时间 2. 通过 adb 命令查看界面启动时间三. APP 冷启动与热启动四. A ...
Android 开发过程中遇到的棘手的问题笔记（SP引起的ANR，4G网络请求慢，app启动白屏）（持续更新）
前言经历过面试的人应该都知道,一般我们在进行技术面试的时候,面试官都会问你,在项目开发中遇到过什么棘手的问题?最后是怎么解决的?本人之前就问到过好几次,可是由于准备不足,一时之间想不起来所遇到过的& ...
android app启动失败,Android应用App启动白屏（黑屏）问题解决
Android应用App启动白屏(黑屏)问题解决点击Android手机桌面的应用App icon图标后,Android启动这个应用,正常情况下会立即看到并进入到开发者自己写在MainActivity ...
【转】Android APP 启动黑屏优化补丁 (2016-01-18 10:35:23)
[转]Android APP 启动黑屏优化补丁 (2016-01-18 10:35:23) 转载▼ 这个必须转,这才是高手,解决官方都解决不好的问题! 原文地址,以下为转贴内容: 使用说明 ***** ...
Android应用App启动白屏（黑屏）问题解决
Android应用App启动白屏(黑屏)问题解决点击Android手机桌面的应用App icon图标后,Android启动这个应用,正常情况下会立即看到并进入到开发者自己写在MainActivity ...
启动白屏处理_App启动优化一顿操作猛如虎
前言本次主要内容包括: 针对App启动优化我们做了哪些工作? 1.App启动优化方向:视觉体验优化 2.App启动优化方向:代码逻辑优化一.App启动优化方向:视觉体验优化 App启动时白屏问题 ...
Android音乐App桌面图标制作以及启动页面开发（简易音乐一）
Android音乐App桌面图标制作以及启动页面开发( 简易音乐一 ) 关于效果第一步第二步第一步修改SplashAcitivity的布局页面第二步修改androidmanifest. ...

Android 音乐APP（二）启动白屏优化、定位当前播放歌曲