让我们改善Xamarin表格创业体验

走向光的自动扶梯的图象

这篇文章是Xamarin月的一部分,这是关于社区和爱的。照顾一个漂亮的UI和用户体验是一种方法是如何向其用户展示爱情的一种方式。所以让专注于一个小细节,一直让我在完成时微笑 -

XAMARIN表格应用程序的享有盛誉,可以让他们的装载。虽然始终更优选的加载时间更快,但是一个优秀的开始。有时,让用户等待,而背景进程正在做这是最好的任务。但是,有一种替代速度:分心。分心是飞机与他们的船上娱乐做的事情,它是一个像Twitter这样的应用程序在启动时使用动画徽标。由于XAMARIN应用程序陷入后一类,让我们看看我们如何通过一些花哨的动画XAMARIN六角形来改善我们的创业体验。

但是,在我们开始动画部分之前,我担心我们必须快速查看我们的平台项目之一 - 进入Android项目。

在Android上启动Xamarin时的空感觉

你有没有想过为什么你的Xamarin应用程序在Android上的启动屏幕体验与iOS或UWP不同?虽然我们在启动我们的Xamarin.ios应用时立即与徽标招呼,但在Android上启动相同的应用程序时,一条空白屏幕盯着我们。为什么?

screenshot_1550416214

Just point it out: this is not the fault of Xamarin Forms, it is more a difference in the two platforms. While iOS forces you to provide a startup storyboard (a single view), there is no such thing under Android. At least that may seem so at first. However, from where is this blank screen? You probably already know that the starting point of a Xamarin.Forms app on Android is the MainActivity.cs or to be more precise that one activity which has the following attribute set:

[Activity( ... Theme = "@style/MainTheme", MainLauncher = true, ... ]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{// ...
}

One attribute that is getting set is the theme. This theme is where Android “draws it’s inspiration” for the splash screen. We can find it defined under Resources\values\styles.xml. Now to replicate the startup image, we first have to define a layout in Resources\drawables\splash_screen.xml along the following lines:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/colorPrimary"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/SplashScreen"
        android:tileMode="disabled"
        android:gravity="center" />
  </item>
</layer-list>

Now we can modify styles.xml by adding new style with the following lines:

<?xml version="1.0" encoding="utf-8" ?>
<resources>

  <!-- ... -->

  <style name="SplashTheme" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
  </style>
</resources>

Starting the app and we see the Xamarin logo while starting up. Unfortunately, it does not go away when we get to our Hello World page in Xamarin Forms. The reason being that we have overwritten the default style which is also used by our Xamarin.Forms app. However, we can fix this by adding an activity solely to display this new style, once the new SplashActivity.cs is rendered we switch over to the current MainActivity.cs. The MainActivity.cs uses the original style and starts the Xamarin.Forms part of our app.

屏幕截图_1550416896.

如果我们立即让应用程序运行应用程序。我们在启动应用程序后,我们会看到一个飞溅屏幕。所以现在我们有Android与iOS和UWP相提并论让我们的换档齿轮并实现弹性启动动画。

Bouncy Startup动画

从Twitter应用程序中汲取一些灵感,让我们让我们的徽标相似。我们在Xamarin.Forms中实现六角形的动画。动画可以 - 在一个真实的应用程序中 - 我们在开始时给我们买一段时间。所以我们需要的是一个泼屏,但这一次是xamarin.forms视图。 XAML在中心显示图像:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomSplash.SplashPage"
             BackgroundColor="#2196F3">
    <ContentPage.Content>
        <Grid>
            <Image x:Name="SplashIcon"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   Source="SplashScreen.png" />
        </Grid>
    </ContentPage.Content>
</ContentPage>

The XAML is ready. However, this would solely extend the static native splash screens. The animation takes place in the code behind. We can override the OnAppearing method and add some animation logic to it:

await SplashIcon.ScaleTo(0.5, 500, Easing.CubicInOut);
var animationTasks = new[]{
    SplashIcon.ScaleTo(100.0, 1000, Easing.CubicInOut),
    SplashIcon.FadeTo(0, 700, Easing.CubicInOut)
};
await Task.WhenAll(animationTasks);

首先,我们缩小图像,然后我们展开并同时让它变得透明。组合动画给我们的应用程序效果很好。虽然我们现在可以将这个小狗放在一个循环中,永远努力,永远,永远努力......最多可能我们只想展示一次,然后继续前进到我们的主页上。以下行实现了以下方式:

Navigation.InsertPageBefore(new MainPage(), Navigation.NavigationStack[0]);
await Navigation.PopToRootAsync(false);

The above lines insert the main page as the first page in the navigation stack. In other words, we insert the main page before the splash screen. Then we PopToRoot so the splash screen is no longer present on the navigation. So while the lines might look a bit odd at first. They prevent the user from navigating back to the splash page. Further, it allows the splash page to be garbage collected. Bottom line all the things we want to do with a splash screen once it has served its purpose.

生成的应用程序看起来像这样:

ios上的动画飞溅屏幕

我是一个坚定的信徒,即这些小东西可以走很长的路,并从你关心你的应用程序的get-go of the mess。虽然本机闪烁屏幕是一个很好的开始。动画负载屏幕可以在分散用户分散注意力的同时为您提供一系列额外的时间来启动应用程序。您可以找到整个演示应用程序 GitHub..

请务必查看其他博客文章 Xamarin Universe. and happy coding!

Updated: