gluon android 启动画面

Question

我已经使用 Gluon Mobile 创建了小型移动应用程序，现在正在通过 Google Play 进行 Beta 测试。但我意识到我的移动应用程序在 android 设备上的启动时间非常慢（大约需要 10 多秒）。

如果我可以在加载应用程序之前添加一个 SplashScreen 就好了，这样用户总共不会等待 10 次，但他们只感觉等待了一半，因为他们在看到 SplashScreen 时得到了应用程序的响应。

在本机 android 开发中，我们只构建 2 个 activity（一个用于 SplashScreen，一个用于主要应用程序），如 blow :

<activity
android:name=”.SplashScreen”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
<activity
android:name=”.MainActivity”
android:label=”@string/app_name”
>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
</intent-filter>
</activity>

我的问题，是否有任何方法可以显示在 JavaFX/GluOn 上构建的 SplashScreen 将运行都在 andorid/ios 而不是本机上。如果我们基于 javaFX 而不是这种本机方法构建，有什么缺点吗？

由于 gluon/javaFX 的年轻时代开始使用移动设备，获得最佳实践的理想方法并不容易。请点亮我

rgrds

Answer 1

虽然启动画面可能是个不错的主意，但实际上使用 Gluon 插件创建的 Gluon 移动多视图项目允许您通过使用主视图作为图像或任何其他轻量级内容的占位符来创建类似的效果您想显示，同时在辅助视图中加载所有繁重的内容。

默认情况下，主视图是在 Application.start() 方法期间加载的初始视图。在用户切换到其他视图之前不会加载它们。

使用以下视图，仅当用户单击浮动操作按钮时，才会开始实际加载繁重的内容，但移动设备上的启动视图会立即显示：

public class SplashView extends View {

    public SplashView(String name) {
        super(name);

        setCenter(new ImageView(new Image(getClass().getResourceAsStream("splash.png"))));

        FloatingActionButton action = new FloatingActionButton(MaterialDesignIcon.ARROW_FORWARD.text, e -> 
                MobileApplication.getInstance().switchView(GluonSplash.SECONDARY_VIEW));
        getLayers().add(action);
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
        appBar.setVisible(false);
    }

}

为避免用户干预的需要，您可以去掉操作按钮并在显示启动画面一定时间后开始加载第二个视图。

在另一个示例中，在显示初始视图后，暂停过渡开始。一秒钟后，它显示标签以指示将加载新视图。同时，启动加载该视图的任务。当所有的重量级视图加载完毕后，就会显示出来

public class SplashView extends View {

    public SplashView(String name) {
        super(name);

        Label access = new Label("Accessing...");
        access.setTranslateY(200);
        access.setVisible(false);
        setCenter(new StackPane(new ImageView(new Image(getClass().getResourceAsStream("splash.png"))), 
                            access));

        Task<Void> task = new Task<Void>() {

            @Override
            protected Void call() throws Exception {
                Platform.runLater(() -> MobileApplication.getInstance().switchView(GluonSplash.SECONDARY_VIEW));
                return null;
            }
        };

        addEventHandler(LifecycleEvent.SHOWN, e -> {
            PauseTransition pause = new PauseTransition(Duration.seconds(1));
            pause.setOnFinished(f -> {
                access.setVisible(true);
                new Thread(task).start();
            });
            pause.play();
        });

    }

    @Override
    protected void updateAppBar(AppBar appBar) {
        appBar.setVisible(false);
    }

}

Answer 2

我来晚了一点，但对于未来的项目这可能会有用：

Github 上有一个项目正在扩展 Gluon 的功能。
https://github.com/Ciruman/QuarkFX
它包括：

视图处理的不同方法使您可以针对不同的设备尺寸和方向进行开发
还有一个 启动画面（它尚不可配置，但由于它是开源的，您可以根据需要快速更改它）
有关更多功能，请查看其自述文件

Answer 3

好吧，这是旧的，但它仍然会在 google 搜索中弹出，所以就在这里。在插件的版本 4.x 中，可以使用默认隐藏 appBar 的 SplashView，并且可以像普通视图一样仅使用名称 SPLASH_VIEW 进行注册。 FXML 应如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<?import com.gluonhq.charm.glisten.mvc.SplashView?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>

<SplashView fx:id="splash" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/9" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.shara.views.SplashPresenter">
   <center>
      <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
         <image>
            <Image url="@../../../icon.png" />
         </image>
      </ImageView>
   </center>
   <bottom>
      <Label BorderPane.alignment="CENTER" />
   </bottom>
</SplashView>

那么它的控制器应该是这样的：

import com.gluonhq.charm.down.Services;
import com.gluonhq.charm.down.plugins.LifecycleService;
import com.gluonhq.charm.glisten.afterburner.GluonPresenter;
import com.gluonhq.charm.glisten.animation.FadeInTransition;
import com.gluonhq.charm.glisten.application.MobileApplication;
import com.gluonhq.charm.glisten.control.Alert;
import com.gluonhq.charm.glisten.control.LifecycleEvent;
import com.gluonhq.charm.glisten.mvc.SplashView;
import com.shara.Shara;
import com.shara.Network;
import javafx.animation.PauseTransition;
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.util.Duration;

/**
 *
 * @author mighty
 */
public class SplashPresenter extends GluonPresenter<Shara> {

    @FXML private SplashView splash;

    public void initialize(){
        splash.setShowTransitionFactory(FadeInTransition::new);
        splash.setOnShown((LifecycleEvent e) -> {
            PauseTransition pause = new PauseTransition(Duration.seconds(3));
            pause.setOnFinished((ActionEvent f) -> {
                splash.hideSplashView();
            });
            pause.play();
        });

    }
}

视图已正常初始化，可以通过调用 hideSplashView() 进行切换。 splash view 可以设置正常样式，也可以使用样式表。视图可以这样在 AppViewManager 中注册：

public static final AppView SPLASH_VIEW = view("Splash", SplashPresenter.class, MaterialDesignIcon.PAGES);

并在您的 registerViewsAndDrawer 方法中替换

REGISTRY.getViews().forEach((view) -> {
            view.registerView(app);
    });

与

REGISTRY.getViews().forEach((view) -> {
            if(view.getId() != "SPLASH_VIEW"){
                view.registerView(app);
            }
        });

确保启动画面不会出现在抽屉中。

gluon android 启动画面

gluon android splash screen

android

gluon