Skip to content

Configurar cápsulas de applet

1. Efeito mostra

1-1-1.png

2. Defina o estilo da interface do usuário da cápsula de applet

2.1 Cobertura

Uma vez definido, todos os applets no aplicativo serão implementados com essa eficiência.

2.2 Método de configuração do iOS

Ao inicializar o SDK, a configuração é feita através do CapsuleConfig aula:

objectivec
//Set the width of the top-right capsule view to 88
[FATClient sharedClient].uiConfig.capsuleConfig.capsuleWidth = 88;

Descrição de itens configuráveis ​​específicos:

objectivec
/**
 The width of the capsule view in the upper right corner, default value is 88
 */
@property (nonatomic, assign) CGFloat capsuleWidth;

/**
 The height of the top-right capsule view, the default value is 32
 */
@property (nonatomic, assign) CGFloat capsuleHeight;

/**
 The right margin of the top-right capsule view, the default value is 10
 */
@property (nonatomic, assign) CGFloat capsuleRightMargin;

/**
 The radius of the rounded corners of the upper right capsule view, the default value is 5
 */
@property (nonatomic, assign) CGFloat capsuleCornerRadius;

/**
 The border width of the top-right capsule view, default value is 0.8
 */
@property (nonatomic, assign) CGFloat capsuleBorderWidth;

/**
 Light color of the border in the upper right corner of the capsule view
 */
@property (nonatomic, strong) UIColor *capsuleBorderLightColor;

/**
 Dark color of the border of the capsule view in the upper right corner
 */
@property (nonatomic, strong) UIColor *capsuleBorderDarkColor;

/**
 Light color of the background of the upper right capsule view
 */
@property (nonatomic, strong) UIColor *capsuleBgLightColor;

/**
 Dark background color for capsule view in the upper right corner
 */
@property (nonatomic, strong) UIColor *capsuleBgDarkColor;

/**
 Image object for the light-colored more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *moreLightImage;

/**
 Image object for the darker more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *moreDarkImage;

/**
 The width of more buttons in the capsule, equal in height and width
 */
@property (nonatomic, assign) CGFloat moreBtnWidth;

/**
 The left distance of the more button in the capsule
 */
@property (nonatomic, assign) CGFloat moreBtnLeftMargin;

/**
 Image object for the light-colored more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *closeLightImage;

/**
 Image object for the darker more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *closeDarkImage;

/**
 The width of the close button in the capsule, equal in height and width
 */
@property (nonatomic, assign) CGFloat closeBtnWidth;

/**
 The left distance of the close button in the capsule
 */
@property (nonatomic, assign) CGFloat closeBtnLeftMargin;

/**
 The light color of the dividing line in the capsule
 */
@property (nonatomic, strong) UIColor *capsuleDividerLightColor;

/**
 The dark color of the dividing line in the capsule
 */
@property (nonatomic, strong) UIColor *capsuleDividerDarkColor;

2.3 Método de configuração do Android

Ao inicializar o SDK, a configuração é feita através do CapsuleConfig aula.

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

Descrição de itens configuráveis ​​específicos:

java
/**
 * 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. Esconda o "More" botão

3.1 Cobertura

A configuração é definida pelo aplicativo e cada applet exibe efeitos diferentes de acordo com sua própria configuração.

3.2 Método de configuração

No applet app.json, altere a configuração da janela global da janela

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

4. A maneira de viver o botão Fechar ao abrir animações em applets

4.1 Cobertura

Essa configuração é implementada pelo aplicativo, um conjunto, todos os applets no aplicativo estarão implementados a essa eficiência.

Esse método é usado para manusear quando o buttton fechado da navegação que exclui o carregamento do applet (a camada de serviço do applet ainda não está deduzida com sucesso e a biblioteca base ainda não passou as informações de configuração do applet para o SDK).

4.2 Método de configuração do iOS

Ao inicializar o SDK, a configuração é feita através do CapsuleConfig aula.

objectivec
//Hide the close button when the applet opens with an animation
[FATClient sharedClient].uiConfig.hideTransitionCloseButton = YES;

4.3 Método de configuração do Android

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo.

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

5. Como ocultar o botão Fechar depois que o applet estiver totalmente aberto

5.1 Cobertura

A configuração é definida pelo aplicativo e cada applet exibe efeitos diferentes de acordo com sua própria configuração.

5.2 Método de configuração

No applet app.json, altere a configuração da janela global da janela

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