# 设置小程序胶囊

# 1. 效果展示

1-1-1.png

# 2. 设置小程序胶囊UI样式

# 2.1 覆盖范围

小程序胶囊UI样式修改,需由App实现,一经设置、App内的全部小程序均将按照本效果实现。

# 2.2 iOS 设置方法

在初始化SDK时,通过CapsuleConfig类进行配置:

//设置右上角胶囊视图的宽度为88
[FATClient sharedClient].uiConfig.capsuleConfig.capsuleWidth = 88;

具体可配置项说明:

/**
 右上角胶囊视图的宽度,默认值为88
 */
@property (nonatomic, assign) CGFloat capsuleWidth;

/**
 右上角胶囊视图的高度,默认值为32
 */
@property (nonatomic, assign) CGFloat capsuleHeight;

/**
 右上角胶囊视图的右边距,默认值为10
 */
@property (nonatomic, assign) CGFloat capsuleRightMargin;

/**
 右上角胶囊视图的圆角半径,默认值为5
 */
@property (nonatomic, assign) CGFloat capsuleCornerRadius;

/**
 右上角胶囊视图的边框宽度,默认值为0.8
 */
@property (nonatomic, assign) CGFloat capsuleBorderWidth;

/**
 右上角胶囊视图的边框浅色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBorderLightColor;

/**
 右上角胶囊视图的边框深色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBorderDarkColor;

/**
 右上角胶囊视图的背景浅色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBgLightColor;

/**
 右上角胶囊视图的背景深色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBgDarkColor;

/**
 胶囊里的浅色更多按钮的图片对象,如果不传,会使用默认图标
 */
@property (nonatomic, strong) UIImage *moreLightImage;

/**
 胶囊里的深色更多按钮的图片对象,如果不传,会使用默认图标
 */
@property (nonatomic, strong) UIImage *moreDarkImage;

/**
 胶囊里的更多按钮的宽度,高度与宽度相等
 */
@property (nonatomic, assign) CGFloat moreBtnWidth;

/**
 胶囊里的更多按钮的左边距
 */
@property (nonatomic, assign) CGFloat moreBtnLeftMargin;

/**
 胶囊里的浅色更多按钮的图片对象,如果不传,会使用默认图标
 */
@property (nonatomic, strong) UIImage *closeLightImage;

/**
 胶囊里的深色更多按钮的图片对象,如果不传,会使用默认图标
 */
@property (nonatomic, strong) UIImage *closeDarkImage;

/**
 胶囊里的关闭按钮的宽度,高度与宽度相等
 */
@property (nonatomic, assign) CGFloat closeBtnWidth;

/**
 胶囊里的关闭按钮的左边距
 */
@property (nonatomic, assign) CGFloat closeBtnLeftMargin;

/**
 胶囊里的分割线的浅色颜色
 */
@property (nonatomic, strong) UIColor *capsuleDividerLightColor;

/**
 胶囊里的分割线的深色颜色
 */
@property (nonatomic, strong) UIColor *capsuleDividerDarkColor;

# 2.3 Android 设置方法

在初始化SDK时,通过CapsuleConfig类进行配置:

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

具体可配置项说明:

/**
 * 胶囊按钮配置
 */
public static class CapsuleConfig {

    /**
     *  右上角胶囊视图的宽度,默认值为88
     *  
     */
    public float capsuleWidth = 88;

    /**
     *  右上角胶囊视图的高度,默认值为32
     *  
     */
    public float capsuleHeight = 32;

    /**
     * 右上角胶囊视图的右边距
     */
    public float capsuleRightMargin = 7;

    /**
     *  右上角胶囊视图的圆角半径,默认值为5
     *  
     */
    public float capsuleCornerRadius = 5;

    /**
     *  右上角胶囊视图的边框宽度,默认值为0.8
     *  
     */
    public float capsuleBorderWidth = 1f;

    /**
     * 胶囊背景颜色浅色
     */
    public int capsuleBgLightColor = 0x33000000;

    /**
     * 胶囊背景颜色深色
     */
    public int capsuleBgDarkColor = 0x80ffffff;

    /**
     *  右上角胶囊视图的边框浅色颜色
     *  
     */
    public int capsuleBorderLightColor = 0x80ffffff;

    /**
     *  右上角胶囊视图的边框深色颜色
     *  
     */
    public int capsuleBorderDarkColor = 0x26000000;

    /**
     * 胶囊分割线浅色颜色
     */
    public int capsuleDividerLightColor = 0x80ffffff;

    /**
     * 胶囊分割线深色颜色
     */
    public int capsuleDividerDarkColor = 0x26000000;

    /**
     *  胶囊里的浅色更多按钮的图片对象,如果不传,会使用默认图标
     *  
     */
    public int moreLightImage = R.drawable.miniapps_more_light;

    /**
     *  胶囊里的深色更多按钮的图片对象,如果不传,会使用默认图标
     *  
     */
    public int moreDarkImage = R.drawable.miniapps_more_dark;

    /**
     *  胶囊里的更多按钮的宽度,高度与宽度相等
     *  
     */
    public float moreBtnWidth = 32;

    /**
     *  胶囊里的更多按钮的左边距
     *  
     */
    public float moreBtnLeftMargin = 6;

    /**
     *  胶囊里的浅色更多按钮的图片对象,如果不传,会使用默认图标
     *  
     */
    public int closeLightImage = R.drawable.miniapps_close_light;

    /**
     *  胶囊里的深色更多按钮的图片对象,如果不传,会使用默认图标
     *  
     */
    public int closeDarkImage = R.drawable.miniapps_close_dark;

    /**
     *  胶囊里的关闭按钮的宽度,高度与宽度相等
     *  
     */
    public float closeBtnWidth = 32;

    /**
     *  胶囊里的关闭按钮的左边距
     *  
     */
    public float closeBtnLeftMargin = 6;
}

# 3. 隐藏「更多」按钮

# 3.1 覆盖范围

该配置由小程序自行设置,每个小程序根据自己的配置展示不同效果。

# 3.2 设置方法

在小程序 app.json 中,修改全局窗口 window 的配置

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

# 4. 在小程序打开动画时,隐藏关闭按钮的方法

# 4.1 覆盖范围

该设置由App实现,一经设置、App内的全部小程序均将按照本效果实现。

该方法主要用于处理加载小程序过程中(小程序Service层还未加载成功,基础库还没有向SDK传递小程序配置信息),是否隐藏导航栏的关闭按钮。

# 4.2 iOS 设置方法

在初始化SDK时,通过CapsuleConfig类进行配置:

//在小程序打开动画时,隐藏关闭按钮
[FATClient sharedClient].uiConfig.hideTransitionCloseButton = YES;

# 4.3 Android 设置方法

初始化SDK时,通过UIConfig进行配置,如下:

// UI配置
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 是否隐藏右上角关闭按钮
uiConfig.setHideNavigationBarCloseButton(true);

# 5. 在小程序完全打开后,隐藏关闭按钮的方法

# 5.1 覆盖范围

该配置由小程序自行设置,每个小程序根据自己的配置展示不同效果。

# 5.2 设置方法

在小程序 app.json 中,修改全局窗口 window 的配置

{
  "window":{
    "navigationBarHideCloseButton": true
  }
}
© 2021 凡泰极客
  • 免费试用
  • 编组
  • 编组 2