AdaptiveCards - 如何在 iOS 上自定义动作的颜色和字体？答案

【问题标题】：AdaptiveCards - How to customize the color and fonts for Actions on iOS?AdaptiveCards - 如何在 iOS 上自定义动作的颜色和字体？
【发布时间】：2020-09-22 18:39:58
【问题描述】：

我正在使用 AdaptiveCard SDK 的 v1.2.6。使用这个使用 3 种可用样式（默认、积极、破坏性）的示例卡片，我似乎只能控制 positive 卡片的背景颜色，而且它的工作方式不是很直观。

我正在使用的卡：

{
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.2",
   "body":[
      {
         "type":"TextBlock",
         "wrap":true,
         "text":"There are also still actions at the bottom of the card"
      }
   ],
   "actions":[
      {
         "type":"Action.ShowCard",
         "title":"Positive",
         "style":"positive",
         "card":{
            "type":"AdaptiveCard",
            "body":[
               {
                  "type":"TextBlock",
                  "text":"This is a show card"
               }
            ]
         }
      },
      {
         "type":"Action.OpenUrl",
         "title":"Desctructive",
         "url":"https://adaptivecards.io",
         "style":"destructive"
      },
      {
         "type":"Action.Submit",
         "title":"Default",
         "data":{
            "x":13
         }
      }
   ]
}

我正在使用的主机配置：

{
    "hostCapabilities": {
        "capabilities": null
    },
    "choiceSetInputValueSeparator": ",",
    "supportsInteractivity": true,
    "fontFamily": "Arial",
    "spacing": {
        "small": 4,
        "default": 12,
        "medium": 12,
        "large": 12,
        "extraLarge": 16,
        "padding": 12
    },
    "separator": {
        "lineThickness": 1,
        "lineColor": "#EEEEEE"
    },
    "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 16,
        "large": 20,
        "extraLarge": 22
    },
    "fontWeights": {
        "lighter": 300,
        "default": 400,
        "bolder": 600
    },
    "imageSizes": {
        "small": 40,
        "medium": 80,
        "large": 160
    },
    "containerStyles": {
        "default": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#CE2D4F", // this affects the "positive" action for some reason
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#24282B"
        },
        "emphasis": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": " #FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF9987"
                },
                "attention": {
                    "default": "#FF9D52",
                    "subtle": "#FFCA99"
                }
            },
            "backgroundColor": "#535759"
        },
        "good": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#17451E"
        },
        "accent": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#124052"
        },
        "warning": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#632926"
        },
        "attention": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#543511"
        }
    },
    "actions": {
        "maxActions": 5,
        "buttonSpacing": 8,
        "showCard": {
            "actionMode": "Inline",
            "inlineTopMargin": 8,
            "style": "emphasis"
        },
        "style": "emphasis",
        "preExpandSingleShowCardAction": false,
        "actionsOrientation": "Vertical",
        "actionAlignment": "stretch"
    },
    "adaptiveCard": {
        "allowCustomStyle": false
    },
    "imageSet": {
        "maxImageHeight": 100
    },
    "media": {
        "allowInlinePlayback": false
    },
    "factSet": {
        "title": {
            "size": "Default",
            "color": "Default",
            "isSubtle": false,
            "weight": "Bolder",
            "wrap": true
        },
        "value": {
            "size": "Default",
            "color": "Default",
            "isSubtle": false,
            "weight": "Default",
            "wrap": true
        },
        "spacing": 10
    },
    "cssClassNamePrefix": null
}

渲染这张卡片：

positive 卡似乎只有在我修改“containerStyles”->“default”->“foregroundColors”->“accent”->“default”下的十六进制值时才会改变颜色，这对我来说是零意义（我只是通过反复试验才发现这一点，因为文档没有很好地解释这一点）。

我也探索过使用extensibility 来呈现我自己的动作，但它似乎不受支持，因为没有用于动作的ACRCardElementType 枚举（只有动作集）。

结果我有这些问题：

为什么正面动作背景颜色会受到该特定属性的影响？
如何修改其他操作的背景颜色（以及它们如何获得当前值）？
有没有办法使用可扩展性来呈现这些操作按钮？

【问题讨论】：

标签： ios swift adaptive-cards

【解决方案1】：

恐怕现在只能使用 CSS 更改动作样式（所有按钮）。 HostConfig 对按钮的颜色没有影响。

对于iOS，如果你熟悉XIB，你可以通过XIB改变按钮的样式。 https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/ios/native-styling

如果没有，可以通过覆盖相应的渲染器来更新按钮等 UI 元素。 https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/ios/extensibility

【讨论】：

对于 JS/HTML，您可以只使用 CSS 来更改按钮。
感谢您的回复！我们正在避免使用 XIB 方法，因为这些 XIB 是 Microsoft SDK 的一部分，而不是我们自己的项目（如果可能，我们不想维护整个框架）。至于渲染器，我在问题中提到我无法让它工作，因为没有对应的ACRCardElementType 用于操作（只有 ActionSet）。用于注册渲染器的命令需要 cardElementType：ACRRegistration.getInstance().setBaseCardElementRenderer(renderer, cardElementType: elementType)。你知道是否有另一种方法来覆盖动作渲染器？

【解决方案2】：

我使用自定义渲染来更新按钮样式。

class CustomADButtonRenderer: ACRBaseActionElementRenderer {
    let renderer = ACRActionSubmitRenderer.getInstance()

    override func renderButton(_ rootView: ACRView!, inputs: NSMutableArray!, superview: UIView!, baseActionElement acoElem: ACOBaseActionElement!, hostConfig acoConfig: ACOHostConfig!) -> UIButton! {
        super.renderButton(rootView, inputs: inputs, superview: superview, baseActionElement: acoElem, hostConfig: acoConfig)
        let button = renderer?.renderButton(rootView, inputs: inputs, superview: superview, baseActionElement: acoElem, hostConfig: acoConfig)

// check - update styling for default button only. Possible values are 'default', 'positive', 'destructive' 
        if let button = button, let sentiment = acoElem?.sentiment, sentiment == "default" {
            button.backgroundColor = .lightGray
        }
        return button
    }
}

然后我们从 JSON 有效负载创建自适应卡，

private let customButtonRenderer = CustomADButtonRenderer()
let registration = ACRRegistration.getInstance()
registration.setActionRenderer(customButtonRenderer, cardElementType: 2) 
// 'cardElementType' is not yet availble as Enum, so need to pass arg. as NSNumber. This is already raised as an enhancements on Adaptivecard repository.

注意：以上代码需要在前面添加，

let card: ACOAdaptiveCardParseResult = ACOAdaptiveCard.fromJson(payload)

干杯，编码愉快！

【讨论】：