为分段的 RadioGroup 设置样式

Question

TL;DR

如何制作分段的 RadioGroup 并将其设置为 AlertDialog.SetSingleChoiceItems 的样式？更准确地说：如何以与 AlertDialog.SetSingleChoiceItems 中的内容缩进相同的方式缩进 RadioGroup 中的选项？

上下文

用户正在获得一个警报对话框，他们需要在其中通过 RadioButtons 做出选择。有两种情况，我需要类似的风格：

答：No options are recommended

• 选项显示在常规 AlertDialog.SetSingleChoiceItems 中

乙：Some options are recommended

• 推荐的选项显示在顶部。不推荐的选项显示在一行下方

代码

        private void ShowAlert(object sender, EventArgs eventArgs)
        {
            var dialogBuilder = new Android.App.AlertDialog.Builder(this);
            dialogBuilder.SetTitle("My Title");

            string[] recommendedItems = { "Radio button 1", "Radio button 2"};
            string[] unrecommendedItems = { "Radio button 3", "Radio button 4" };

            List<RadioButtonItem> items = new List<RadioButtonItem>() {
                new RadioButtonItem { Label = "Radio button 1", Recommended = true},
                new RadioButtonItem { Label = "Radio button 2", Recommended = false},
                new RadioButtonItem { Label = "Radio button 3", Recommended = false},
                new RadioButtonItem { Label = "Radio button 4", Recommended = true},
            };

            RadioGroup radioGroup = new RadioGroup(this);

            TextView recommendedText = new TextView(this)
            {
                Text = "Recommended"
            };

            radioGroup.AddView(recommendedText);
            addRadioButtons(radioGroup, items, true);

            //Add divider between the recommended/unrecommended options
            LinearLayout divider = new LinearLayout(this);
            var dividerSize = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, 1);
            divider.LayoutParameters = dividerSize;
            divider.SetBackgroundColor(new Color(Color.DimGray));
            radioGroup.AddView(divider);

            addRadioButtons(radioGroup, items, false);


            dialogBuilder.SetView(radioGroup);

            dialogBuilder.SetPositiveButton("OK", delegate { });
            dialogBuilder.Show();
        }

        private void addRadioButtons(RadioGroup radioGroup, List<RadioButtonItem> items, bool recommended)
        {
            for (int i = 0; i < items.Count; i++)
            {
                RadioButtonItem item = items[i];
                RadioButton rb = new RadioButton(this) { Text = item.Label };

                if (item.Recommended == recommended)
                {
                    radioGroup.AddView(rb);
                }

            }
        }

问题

当我尝试像这样首先设置第二个场景的样式时，问题就出现了。我无法缩进选项，而不会弄得一团糟。

• 如果我缩进整个 radioGroup，那么分隔线也会得到 indented。
• 如果我为单选按钮添加填充，那么the text moves, but the circles stay
• 我无法将按钮包装在可以添加填充的东西中，因为按钮需要是 RadioGroup 的直接子级才能起作用

Answer 1

我发现radiobutton的margin_start属性可以控制按钮和组的距离。但是我们不能只在xml中的代码中设置它。所以我使用了另一种方式，它使用线性布局来包含两个无线电组和除法器。代码如下：

linearlyout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</LinearLayout>

方法代码：

private void ShowAlert()
{
    var dialogBuilder = new Android.App.AlertDialog.Builder(this);
    dialogBuilder.SetTitle("My Title");
    string[] recommendedItems = { "Radio button 1", "Radio button 2" };
    string[] unrecommendedItems = { "Radio button 3", "Radio button 4" };
    List<RadioButtonItem> items = new List<RadioButtonItem>() {
            new RadioButtonItem { Label = "Radio button 1", Recommended = true},
            new RadioButtonItem { Label = "Radio button 2", Recommended = false},
            new RadioButtonItem { Label = "Radio button 3", Recommended = false},
            new RadioButtonItem { Label = "Radio button 4", Recommended = true},
        };
LayoutInflater layoutInflater = LayoutInflater.From(this);
LinearLayout linearLayout = (LinearLayout)layoutInflater.Inflate(Resource.Layout.item2, null);
RadioGroup radioGroup1 = new RadioGroup(this);
radioGroup1.SetPadding(100, 0, 0, 0);
RadioGroup radioGroup2 = new RadioGroup(this);
radioGroup2.SetPadding(100, 0, 0, 0);
TextView recommendedText = new TextView(this)
{
    Text = "Recommended"
};
linearLayout.AddView(recommendedText);
addRadioButtons(radioGroup1, items, true);
linearLayout.AddView(radioGroup1);
LinearLayout divider = new LinearLayout(this);
var dividerSize = new RelativeLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, 1);
divider.LayoutParameters = dividerSize;
divider.SetBackgroundColor(new Color(Color.DimGray));

linearLayout.AddView(divider);

addRadioButtons(radioGroup2, items, false);

linearLayout.AddView(radioGroup2);
dialogBuilder.SetView(linearLayout);

dialogBuilder.SetPositiveButton("OK", delegate { });
dialogBuilder.Show();
}

private void addRadioButtons(RadioGroup radioGroup, List<RadioButtonItem> items, bool recommended)
{

for (int i = 0; i < items.Count; i++)
{
    RadioButtonItem item = items[i];
    RadioButton rb = new RadioButton(this) { Text = item.Label };
    if (item.Recommended == recommended)
    {
        radioGroup.AddView(rb);
    }

}
}

Answer 2

我最终解决了这个问题，将 radioGroup 的 clipToPadding 设置为 false。然后我将缩进的距离作为填充添加到 radioGroup

RadioGroup radioGroup = new RadioGroup(this);
int indentedDistance = 60;
radioGroup.SetClipToPadding(false);
radioGroup.SetPadding(indentedDistance, 0, 0, 0);

通过将其添加为负值，从分隔线中移除的相同距离

var dividerStyle = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, 1);
dividerStyle.SetMargins(-indentedDistance, 0, 0, 0);
divider.LayoutParameters = dividerStyle;