设置分段 RadioGroup 的样式

Question

TL;DR

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

上下文

用户将收到一个警告对话框，他们需要在其中通过单选按钮做出选择。有两种场景，我需要类似的样式：

答：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;

设置分段 RadioGroup 的样式

Styling a sectioned RadioGroup

android

radio-group

radio-button

xamarin.android

xamarin