Skip to content

Mini Program Navigation Bar Style Config

1. Effect show

2. The method of replacing the back button on the left side

2.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

2.2 Android setup method

Refer to the following xml file, create and adjust the image style, and name it fin_applet_nav_back.xml, put it in the res/drawable directory of the project.

Please note that the image filename cannot be changed, otherwise it will not overwrite the image in the SDK.

xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

3. UI customization method of Back Home button in navigation bar

3.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

The current conditions for the Back to Home button to appear are (subject to both being met):

  1. the default navigation bar style (not custom) is used.

  2. not the home page or tabbar page (as defined in app.json).

  3. is the bottom page of the page stack.

The mini program can call hideHomeButton() in onShow to hide the Back Home button manually.

3.2 Android setup method

When initializing the SDK, it is configured via UIConfig, as follows:

java
UIConfig.NavHomeConfig navHomeConfig = new UIConfig.NavHomeConfig();
uiConfig.setNavHomeConfig(navHomeConfig);

The following configuration attributes are supported:

java
public static class NavHomeConfig {
    /**
     * Navigation bar back to the home button light-colored icon, if not passed, will use the default icon
     */
    public int lightImage = R.drawable.miniapps_home_light;
    /**
     * Navigation bar back to the home button light-colored icon, if not passed, will use the default icon
     */
    public int darkImage = R.drawable.miniapps_home_dark;

    /**
     * Return home button width, default 44
     */
    public float width = 44;

    /**
     * Return to home button height, default 32
     */
    public float height = 32;

    /**
     * The left margin of the Back to Home button, default 7
     */
    public float leftMargin = 7;

    /**
     * Return home button border radius, default 5
     */
    public float cornerRadius = 5;

    /**
     * Return to home button border width, default 1
     */
    public float borderWidth = 1;

    /**
     * Back to home button light border color, default 0X80FFFFFF
     */
    public int borderLightColor = 0x80ffffff;

    /**
     * Return home button dark border color, default 0X26000000
     */
    public int borderDarkColor = 0x26000000;

    /**
     * Return home button light background, default 0x33000000
     */
    public int bgLightColor = 0x33000000;

    /**
     * Return home button dark background, default 0x33000000
     */
    public int bgDarkColor = 0x80ffffff;
}

4. Title style replacement method

4.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

This setting allows you to adjust the font, font size and position of the title.

4.2 Android setup method

When initializing the SDK, it is configured via UIConfig, as follows.

java
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Navigation bar title text style
uiConfig.setNavigationBarTitleTextAppearance(R.style.TextAppearance_AppCompat);
// Gravity of the navigation bar title relative to the parent control
uiConfig.setNavigationBarTitleTextLayoutGravity(Gravity.CENTER);

5. How to remove the background animation when the back button is pressed in the navigation bar

5.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

5.2 Android setup method

When initializing the SDK, it is configured via UIConfig, as follows.

java
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to clear the background of the navigation buttons in the navigation bar
uiConfig.setClearNavigationBarNavButtonBackground(true);

6. The way to hide the overall navigation bar of the mini program

6.1 Coverage

The configuration is set by the mini program itself, and each mini program displays different effects according to its own configuration.

6.2 Setting method

In the mini program app.json, change the configuration of the global window window

{
  "window":{
    "navigationStyle": "hide"
  }
}

After completing the settings, the navigation bar and the upper right capsule will be hidden

7. When the navigation bar is the default style, how can I display the back button on the home page as well?

7.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

7.2 Android setup method

When initializing the SDK, it is configured via UIConfig, as follows:

java
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether the back button is always displayed when the navigation bar is the default navigation bar
uiConfig.setAlwaysShowBackInDefaultNavigationBar(false);

8.1 Navigation bar API

NameFunction Description
ft.showNavigationBarLoadingShow navigation bar loading animation on current page
ft.setNavigationBarTitleDynamically set the title of the current page
ft.setNavigationBarColorSet page navigation bar color
ft.hideNavigationBarLoadingHide navigation bar loading animation on current page

8.2 Global configuration app.json

See [Global Configuration] for details(../../develop/frameInterface/config/app.html#全局配置)

PropertiesTypeDefaultDescription
navigationBarBackgroundColorHexColor(Hexadecimal color values)#000000Navigation bar background color, such as #000000
navigationBarTextStyleStringwhiteNavigation bar header color, currently only supported black / white
navigationBarTitleTextStringNavigation bar title text content, the number of words should not be too much
navigationStyleStringdefaultNavigation bar style, only the following values are supported: 1. default (default style), 2. custom (customize the navigation bar, keeping only the top right button), 3. hide (hide the navigation bar and top right capsule)
navigationBarHideCloseButtonBooleanfalseHide capsule close button
navigationBarHideMoreButtonBooleanfalseHide capsule menu button

8.3 Page Configuration

See [Page Configuration] for details(../../develop/frameInterface/config/page.html#页面配置)

PropertiesTypeDefaultDescription
navigationBarBackgroundColorHexColor#000000Navigation bar background color, such as #000000
navigationBarTextStylestringwhiteNavigation bar header color, supported only black / white
navigationBarTitleTextstringNavigation bar title text content
navigationStylestringdefaultNavigation bar style, only the following values are supported: 1. default (default style), 2. custom (customize the navigation bar, keeping only the top right button), 3. hide (hide the navigation bar and top right capsule)