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

晨曦_LLW

发布于 2020-10-26 16:01:09

9430

发布于 2020-10-26 16:01:09

文章被收录于专栏：Android、鸿蒙开发Android、鸿蒙开发

效果图

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>
        <bitmap
            android: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">
    <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方法。

那么这个方法就是最重要的。

	/**
     * 初始化
     */
    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。里面的代码如下：

<?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。

/**
     * 页面点击事件
     * @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() {
            @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方法。

	/**
     * 显示定位当前音乐图标
     */
    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后会隐藏定位按钮，下面就是要在点击定位按钮时，定位到当前播放歌曲，虽然目前还没有播放过歌曲。只是一个选中位置。通过下面两行代码就可以实现：

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