效果图
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，里面代码如下：
代码语言：javascript复制<?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>
<bitmap
android:gravity="center"
android:src="@drawable/icon_logo" />
</item>
</layer-list>
icon_logo是一个图标，如果你的图标需要高像素的话，你就在res下新建一个drawable-xhdpi / drawable-xxhdpi。我是新建了一个drawable-xhdpi，至于这个图标你可以自己决定，没有的话就到我的源码里面去拿。下面进入到styles.xml中，在里面增加如下的代码：
代码语言：javascript复制 <!--启动页主题样式-->
<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。里面的代码如下：
代码语言：javascript复制<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".ui.SplashActivity">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_160">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Good Music"
android:textColor="@color/white"
android:textSize="@dimen/sp_24" />
<TextView
android: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方法。
那么这个方法就是最重要的。
代码语言：javascript复制 /**
* 初始化
*/
private void initView() {
ActivitySplashBinding binding = DataBindingUtil.setContentView(SplashActivity.this, R.layout.activity_splash);
TextView tvTranslate = binding.tvTranslate;
tvTranslate.post(new Runnable() {
@Override
public 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() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
//动画结束时跳转到主页面
startActivity(new Intent(SplashActivity.this,MainActivity.class));
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
});
}首先通过databinding拿到控件，然后通过.post新起一个线程，这个时候就能获取到TextView的实际宽度，而不再是0。为什么要获取宽度呢。因为我在布局中放了一个相对布局，里面有两个TextView，第二个盖住了第一个。第二个是黑色背景黑色文字，但是它的宽高和第一个TextView是一样的。而我要做的效果是文字逐渐出现，从左至右，所以只要将第二个TextView向右位移TextView的宽度即可。移动时间为1s，然后监听这个动画，当动画结束时，进入MainActivity，水道渠成。那么现在运行一下：
GIF放上来可能有点卡帧，但是在手机上效果是相当的nice。
④ 定位当前播放歌曲
常规的我们播放音乐列表里面点击一首歌进行播放，然后这个时候会上下滑动列表，然后就会显现一个定位按钮，点击之后定位到当前播放的这首歌的位置。这在实际中是很常用的，不是吗！下面来操作起来。首先进入activity_local_music.xml，然后给之前扫描音乐的按钮增加一个id并修改点击按钮所触发的方法。
然后在创建一个location_music.xml。里面的代码如下：
代码语言：javascript复制<?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">
<path
android: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.MaterialButton
android: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。
代码语言：javascript复制/**
* 页面点击事件
* @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的滚动监听。
代码语言：javascript复制rvMusic.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public 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方法。
代码语言：javascript复制 /**
* 显示定位当前音乐图标
*/
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() {
@Override
public void run() {
btnLocationPlayMusic.setVisibility(View.GONE);
}
}, 2000);
}
}
}相信你应该已经懂了。当页面有歌曲播放时，滑动列表会显示定位按钮，停止2s后会隐藏定位按钮，下面就是要在点击定位按钮时，定位到当前播放歌曲，虽然目前还没有播放过歌曲。只是一个选中位置。通过下面两行代码就可以实现：
代码语言：javascript复制LinearLayoutManager linearLayoutManager = (LinearLayoutManager) rvMusic.getLayoutManager();
linearLayoutManager.scrollToPositionWithOffset(oldPosition, 0);
下面运行一下：
结语
OK，这边文章虽然不长，但是讲述的东西还是有用的，开发是一个精益求精的过程，并不是写的越快就越好，感谢你的阅读。
源码地址：Good Music
