人群中看到你的第一眼 -- 启动屏幕设计

原文: 人群中看到你的第一眼 -- 启动屏幕设计

背景

用户打开应用后看到的第一个画面就是启动屏幕，虽说启动屏幕作的好坏对应用的最终功能影响不大，可是对用户来讲，第一印象很是重要；另外，用户每次运行应用也都会看到启动屏幕，所以，启动屏幕的地位也仍是挺重要的。

应用在显示主界面前，须要初始化一些数据，复杂一些的应用，其初始化用时也会长一些，可能须要初始化一些基础组件、登陆到远程服务器、从远程同步数据等等，这些都会致使启动屏幕存在较长的时间，同时，默认的启动屏幕是一个静态的画面，用户会感受体验很差。若是咱们能够将启动屏幕作的生动一些，就可使得用户体验好一些。

下面咱们将讨论两种启动屏幕的实现。

 

方案一

能够添加一个页面，用来显示新的启动屏幕，在这个页面中，咱们还能够加入进度条和动画效果，显得生动一些，而后将主界面前的初始化操做都加在这个页面中。具体实现步骤以下：

 

一、添加SplashPage

具体页面显示的内容，你们能够按本身的须要来设计，同时能够加入一些动画，使得等待再也不枯燥，再也不细说。

 

二、修改App.xaml.cs

启动时跳转到咱们新加的启动页面，同时将启动事件参数传进来，可能会在后续导航中用到。

        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            Frame rootFrame = Window.Current.Content as Frame;
            
            if (rootFrame == null)
            {
                // 将LaunchActivatedEventArgs传入，这样SplashPage中能够根据启动参数完成正确的跳转
                SplashPage splashPage = new SplashPage(e);
                Window.Current.Content = splashPage;
            }         

            Window.Current.Activate();
        }

 

三、SplashPage中的处理

响应Page的Loaded事件，在事件处理中，进行必要的初始化任务；在任务完成后，跳转到正确的后续页面。

        private async void Page_Loaded(object sender, RoutedEventArgs e)
        {
            // 必要的初始化任务
            await Task.Delay(5000);

            // 后续跳转
            Frame rootFrame = new Frame();
            // 此处须要根据SplashPage构造时传入的LaunchActivatedEventArgs作对应跳转
            rootFrame.Navigate(typeof(MainPage));
            Window.Current.Content = rootFrame;
        }

 

四、修改系统默认的启动屏幕

打开应用清单，在可见资产中的初始屏幕中，修改背景色和SplashPage一致，确保能够平滑过渡；修改初始屏幕用到的图片资源为全透明。

 

五、界面微调

如今运行一下程序，能够看到效果已经出来了，可是SplashPage的标题栏和默认启动屏幕的标题栏不一致，若是介意此处不一致，能够用以下code来修改标题栏。

            // 针对mobile
            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
            {
                // 须要引用Windows Mobile Extensions for the UWP
                StatusBar sb = StatusBar.GetForCurrentView();
                // 背景色设置为须要颜色
                sb.BackgroundColor = Color.FromArgb(255, 100, 149, 237);
                sb.BackgroundOpacity = 1;
            }

            // 针对desktop
            ApplicationView appView = ApplicationView.GetForCurrentView();
            ApplicationViewTitleBar titleBar = appView.TitleBar;
            // 背景色设置为须要颜色
            Color bc = Color.FromArgb(255, 100, 149, 237);
            titleBar.BackgroundColor = bc;
            titleBar.InactiveBackgroundColor = bc;
            // 按钮背景色按需进行设置
            titleBar.ButtonBackgroundColor = bc;
            titleBar.ButtonHoverBackgroundColor = bc;
            titleBar.ButtonPressedBackgroundColor = bc;
            titleBar.ButtonInactiveBackgroundColor = bc;

以上改造后，就能够看到咱们启动屏幕的真实效果了。注意，因为在SplashPage出现以前，会显示系统的纯色启动屏幕，因此咱们应尽可能将全部初始化相关的操做放在SplashPage中，而不要放在App.xaml.cs中，以减小纯色页面的显示时间。

 

方案二

上面的方案，一开始会有短暂的纯色页面，咱们但愿可以保留系统的启动屏幕，显示应用的LOGO，而后平滑过渡到自定义的页面上。下面讲一下咱们的一些探索和实现。

 

最初的实现

基本思路是，添加一个新页面，用应用清单中指定给启动屏幕的背景色和图片资源来设计页面；而后在页面加载时，根据系统启动屏幕中图片的位置来调整当前页面中的图片位置；另外，当页面的大小发生变化时，须要对当前页面从新调整。

在延长显示初始屏幕的时间里，已经有了详细的实现步骤，能够很快的完成这种启动屏幕的实现，这里再也不赘述。下面主要讲一下采用这种实现，咱们遇到的一系列问题。

 

问题1

运行一下，效果不错，不会出现第一种方案的纯色界面。可是当咱们在手机模拟器上运行时，出现了严重问题，图片的大小彻底对不上，调试跟踪了一下发现，在手机上，SplashScreen中给出的系统图片的大小是手机的物理分辨率，须要按当前设置的显示比例计算一下才能获得应该显示的大小。

所以，咱们将计算图片位置的代码改成以下

        void PositionImage()
        {
            // desktop
            if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily.Equals("windows.desktop", StringComparison.CurrentCultureIgnoreCase))
            {
                extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
                extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
                extendedSplashImage.Height = splashImageRect.Height;
                extendedSplashImage.Width = splashImageRect.Width;
            }
            // mobile
            else if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily.Equals("windows.mobile", StringComparison.CurrentCultureIgnoreCase))
            {
                // 获取一个值，该值表示每一个视图（布局）像素的原始（物理）像素数。
                double density = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;

                extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X / density);
                extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y / density);
                extendedSplashImage.Height = splashImageRect.Height / density;
                extendedSplashImage.Width = splashImageRect.Width / density;
            }
            // xbox等没试过，编不出来
            else
            {
            }
        }

 

问题2

再运行一下，在手机模拟器上，启动图片的大小一致了，能够衔接的上，可是图片的位置仍是会向下抖一下，目测抖动的高度正好是手机状态栏的高度。所以，咱们能够用下面的代码将页面撑满手机屏幕。

            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
            {
                // 须要引用Windows Mobile Extensions for the UWP
                StatusBar sb = StatusBar.GetForCurrentView();
                // 调整为透明，也能够用启动屏幕的背景色+不透明
                sb.BackgroundOpacity = 0;

                // 撑满手机屏幕
                Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);
            }

注意，以后跳到主界面时，须要根据实际状况决定是否将对应的值改回来。

 

问题3

手机模拟器调好了，使用真实手机运行，有较大机率会看到，在系统启动屏幕和新启动屏幕之间切换时，会轻微闪动一下。缘由是系统启动屏幕消失时，新启动屏幕的图片尚未加载渲染完成，所以，须要在图片渲染完成后，再切到新启动屏幕。

这里能够这样作，在App.xaml.cs中不调用激活当前窗品，而后在ImageOpened事件处理中，启动定时器，50ms后再激活当前窗口。

主要代码以下

        private DispatcherTimer showWindowTimer;
        private void OnShowWindowTimer(object sender, object e)
        {
            showWindowTimer.Stop();

            // Activate/show the window, now that the splash image has rendered
            Window.Current.Activate();
        }

        private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
        {
            // ImageOpened means the file has been read, but the image hasn't been painted yet.
            // Start a short timer to give the image a chance to render, before showing the window
            // and starting the animation.
            showWindowTimer = new DispatcherTimer();
            showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
            showWindowTimer.Tick += OnShowWindowTimer;
            showWindowTimer.Start();
        }

 

问题4

偶现启动屏幕缩在手机的左上角，如图。

这是用户反馈的问题，目前共接到两起反馈，不易复现，咱们也只偶现过一次，还没有找到缘由。

针对用户截图的显示效果，猜想有可能复现该问题时，取到的图片的尺寸信息不是手机设备的分辨率，好比可能宽大于高，所以咱们针对性的添加了部分处理代码，不肯定是否能够解决该问题，待下个版本旺信上线后，再看是否还有用户反馈该问题。此处就不上代码了。

 

方案总结

方案一的优势是，新启动屏幕的界面设计比较自由，能够任意发挥，同时，能够很好的在不一样设备上适配；缺点是，一开始会有一小段时间的纯色屏幕，在低配的手机上比较明显。

方案二的优势是，将系统启动屏幕和新启动屏幕作到了平滑过渡；缺点是界面设计时要考虑到系统启动屏幕的显示，设计受限，同时，在不一样类型设备上，系统传入的启动屏幕位置不一样，须要针对性的进行调整。