尝试使用 BEMCheckBoxes 创建单选按钮组

Posted 2023-03-15

【中文标题】尝试使用 BEMCheckBoxes 创建单选按钮组

【英文标题】：Trying to make a radio button group with BEMCheckBoxes

【发布时间】：2020-04-13 16:16:45

【问题描述】：

我想创建一个单选按钮组，当已经使用BEMCheckBoxes 没有检查任何内容时，它将是这样的：

在我看来，我不能简单地在按钮中添加数字。

所以我决定制作一个带有标签和居中复选框的视图。

这是我目前的代码：

// Add An horizontal stackView with check group
UIStackView uIStackView = new UIStackView();
uIStackView.TranslatesAutoresizingMaskIntoConstraints = false;
uIStackView.Axis = UILayoutConstraintAxis.Horizontal;
uIStackView.Alignment = UIStackViewAlignment.Center;
qolEvaluationCard.AddSubview(uIStackView);
uIStackView.Anchor(top: criteria.BottomAnchor, leading: criteria.LeadingAnchor, trailing: criteria.TrailingAnchor, size: new CGSize(0, 32));
BEMCheckBoxGroup bEMCheckBoxGroup = new BEMCheckBoxGroup();
bEMCheckBoxGroups.Add(bEMCheckBoxGroup);
for (int score= 1; score <= 10; score++)

   var container = new UIView(new CGRect(0, 0, 32, 32));
   var label = new UILabel();
   label.Text = $@"score";
   label.TintColor = UIColor.Black;
   container.AddSubview(label);
   var checkbox = new BEMCheckBox(new CGRect(0, 0, 32, 32));
   container.AddSubview(checkbox);
   checkbox.BoxType = BEMBoxType.Circle;
   checkbox.OnAnimationType = BEMAnimationType.Stroke;
   checkbox.Center = label.Center = new CGPoint(container.Frame.Size.Width / 2, container.Frame.Size.Height / 2);
   // Transparent BackgroundColor
   checkbox.BackgroundColor = null;
   checkbox.TintColor = UIColor.Gray;
   checkbox.OnTintColor = optimistic_orange;
   bEMCheckBoxGroup.AddCheckBoxToGroup(checkbox);
   uIStackView.AddArrangedSubview(container);

结果不是我所期望的，但我不知道哪里出了问题：

为什么我的复选框不透明以显示标签？ 显然UIStackView内部也存在分布问题。

任何帮助表示赞赏。

Anchor 扩展方法是：

internal static void Anchor(this UIView uIView, NSLayoutYAxisAnchor top = null, NSLayoutXAxisAnchor leading = null, NSLayoutYAxisAnchor bottom = null, NSLayoutXAxisAnchor trailing = null, UIEdgeInsets padding = default, CGSize size = default)

    uIView.TranslatesAutoresizingMaskIntoConstraints = false;
    if (top != null)
    
        uIView.TopAnchor.ConstraintEqualTo(top, padding.Top).Active = true;
    

    if (leading != null)
    
        uIView.LeadingAnchor.ConstraintEqualTo(leading, padding.Left).Active = true;
    

    if (bottom != null)
    
        uIView.BottomAnchor.ConstraintEqualTo(bottom, -padding.Bottom).Active = true;
    

    if (trailing != null)
    
        uIView.TrailingAnchor.ConstraintEqualTo(trailing, -padding.Right).Active = true;
    

    if (size.Width != 0)
    
        uIView.WidthAnchor.ConstraintEqualTo(size.Width).Active = true;
    

    if (size.Height != 0)
    
        uIView.HeightAnchor.ConstraintEqualTo(size.Height).Active = true;
    

编辑 1：刚刚在 Reveal 工具的帮助下发现我的标签大小不明确。

var label = new UILabel();

变成

var label = new UILabel(new CGRect(0, 0, 32, 32));

这解决了“隐形标签”问题。

【问题讨论】：

您好，使用UICollectionView 来实现如何，您可以自定义项目模板以显示您的需求。 docs.microsoft.com/en-us/xamarin/ios/user-interface/controls/…

【参考方案1】：

我的答案是 Swift 代码，但是给你作品的概念。 我建议您将问题分解为简单的步骤。 只需尝试在 UIStackView 上正确布局复选框 (BEMCheckBox)，然后创建包含 UILabel + BEMCheckBox 的自定义视图，现在将它们添加到 UIStackView 并查看布局。

为什么标签没有出现在复选框上？

因为您先添加标签，然后将复选框放在上面。

container.addSubview(checkbox)
container.addSubview(label)

---

设置 StackView：

实现复选框水平布局

let stackView: UIStackView = 
    let stack = UIStackView(arrangedSubviews: customCheckboxes)
    stack.spacing = 8
    stack.distribution = .fillEqually
    stack.axis = .horizontal
    stack.alignment = .fill
    return stack
()

然后使用 autoLayout 或其他方式将 stackView 捕捉到角落

我认为使用UIStackView 是最好的选择，对于这种简单的条件不要使用UICollectionView。

---

选中复选框时如何更新标签状态？

我之前没有使用BEMCheckBoxGroup，只是查看了源代码，有一个函数notifyCheckBoxSelectionChanged在复选框选择更改时触发。

func notifyCheckBoxSelectionChanged(_ checkBox: BEMCheckBox) 
        if checkBox.on 
            // Change selected checkbox to this one
            selectedCheckBox = checkBox
         else if checkBox == selectedCheckBox 
            // Selected checkbox was this one, clear it
            selectedCheckBox = nil
        
    

但它不是公开的，selectedCheckBox 是您需要了解的有关此组的信息。我认为您应该将 valueChanged 上的目标添加到该组，我没有看到任何公共 API 可以委托用户选择复选框！

【讨论】：

复选框具有透明背景。我不应该看到它背后的标签吗？

我不确定，据我所知，BEMCheckBox 是否有类似fillColor 之类的属性，也请尝试更改它。 @OlivierMATROT