Mini Program Capsules Style Config

1. Effect show

2. Set mini program capsule UI style

2.1 Coverage

Once set, all the mini programs in the app will be implemented according to this effect.

2.2 Android setup method

When initializing the SDK, configuration is done via the CapsuleConfig class.

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
CapsuleConfig capsuleConfig = new CapsuleConfig();
uiConfig.setCapsuleConfig(capsuleConfig);

Description of specific configurable items:

/**
 * Capsule button configuration
 */
public static class CapsuleConfig {

    /**
     *  The width of the capsule view in the upper right corner, default value is 88
     *  
     */
    public float capsuleWidth = 88;

    /**
     *  The height of the top-right capsule view, the default value is 32
     *  
     */
    public float capsuleHeight = 32;

    /**
     * Distance to the right of the top right capsule view
     */
    public float capsuleRightMargin = 7;

    /**
     *  The radius of the rounded corners of the upper right capsule view, the default value is 5
     *  
     */
    public float capsuleCornerRadius = 5;

    /**
     *  The border width of the top-right capsule view, default value is 0.8
     *  
     */
    public float capsuleBorderWidth = 1f;

    /**
     * Capsule background color light color
     */
    public int capsuleBgLightColor = 0x33000000;

    /**
     * Capsule background color dark
     */
    public int capsuleBgDarkColor = 0x80ffffff;

    /**
     *  Light color of the border in the upper right corner of the capsule view
     *  
     */
    public int capsuleBorderLightColor = 0x80ffffff;

    /**
     *  Dark color of the border of the capsule view in the upper right corner
     *  
     */
    public int capsuleBorderDarkColor = 0x26000000;

    /**
     * Capsule divider light color
     */
    public int capsuleDividerLightColor = 0x80ffffff;

    /**
     * Capsule divider dark color
     */
    public int capsuleDividerDarkColor = 0x26000000;

    /**
     *  Image object for the light-colored more buttons in the capsule, if not passed, the default icon will be used
     *  
     */
    public int moreLightImage = R.drawable.miniapps_more_light;

    /**
     *  Image object for the darker more buttons in the capsule, if not passed, the default icon will be used
     *  
     */
    public int moreDarkImage = R.drawable.miniapps_more_dark;

    /**
     *  The width of more buttons in the capsule, equal in height and width
     *  
     */
    public float moreBtnWidth = 32;

    /**
     *  The left distance of the more button in the capsule
     *  
     */
    public float moreBtnLeftMargin = 6;

    /**
     *  Image object for the light-colored more buttons in the capsule, if not passed, the default icon will be used
     *  
     */
    public int closeLightImage = R.drawable.miniapps_close_light;

    /**
     *  Image object for the darker more buttons in the capsule, if not passed, the default icon will be used
     *  
     */
    public int closeDarkImage = R.drawable.miniapps_close_dark;

    /**
     *  The width of the close button in the capsule, equal in height and width
     *  
     */
    public float closeBtnWidth = 32;

    /**
     *  The left distance of the close button in the capsule
     *  
     */
    public float closeBtnLeftMargin = 6;
}

3. Hide the "More" button

3.1 Coverage

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

3.2 Setting method

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

{
  "window":{
    "navigationBarHideMoreButton": true
  }
}

4. The way to hide the close button when opening animations in mini programs

4.1 Coverage

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

This method is mainly used to handle whether to hide the close button of the navigation bar during the loading of the mini progmini (the mini progmini service layer is not yet loaded successfully and the base library has not yet passed the mini progmini configuration information to the SDK).

4.2 Android setup method

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

// UI Configuration
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to hide the top right corner close button
uiConfig.setHideNavigationBarCloseButton(true);

5. How to hide the close button after the mini progmini is fully opened

5.1 Coverage

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

5.2 Setting method

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

{
  "window":{
    "navigationBarHideCloseButton": true
  }
}