3

I had created small mobile apps using Gluon Mobile and now on beta testing trough Google Play. but I realized that start-time of my mobile apps on android device is quite slow (take around more than 10 seconds).

it would be great if I can add a SplashScreen before the apps is loaded so user will not waiting in total for 10 times, but they feel only half of it because they got response from apps while seeing the SplashScreen.

on native android development, we just build 2 activity (one for SplashScreen and one the main apps) like blow :

<activity
android:name=”.SplashScreen”&gt;
<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>

my Question, is there any approach to show SplashScreen that build on JavaFX/GluOn that will be run both on andorid/ios rather than native. is there any disadvantages if we build on javaFX rather than this native approach.

since the the young age of gluon/javaFX on mobile, is not easy to get the best practice the ideal approach. please en-light me

rgrds

4

3 回答 3

2

虽然启动画面可能是个好主意，但实际上使用 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);
    }

}
于 2016-03-22T18:20:20.380 回答
1

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

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

  • 不同的视图处理方法可让您针对不同的设备尺寸和方向进行开发
  • 还包括一个启动画面（它尚未可配置，但由于它是开源的，您可以根据需要快速更改它）
  • 有关更多功能，请查看其自述文件
于 2016-09-07T06:47:52.537 回答
0

好的，这很旧，但这仍然会在谷歌搜索中弹出，所以就在这里。在插件的 4.x 版本中，可以使用 SplashView，它默认隐藏 appBar，并且可以像普通视图一样注册，仅使用名称 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() 进行切换。启动视图可以正常设置样式，并且可以使用样式表。视图可以像这样在 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);
            }
        });

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

于 2018-04-24T11:54:02.433 回答