在Android中对齐的带有相应标签的无线电组的TableLayout [英] TableLayout of radiogroup(s) with respective label(s) aligned in android

问题描述

我正在创建一个反馈输入表单，该表单将用户从单选按钮中选择，就像下面的图片一样。

I'm creating a feedback input form which takes user selection from radio buttons just like below image.

所以我采用了表格布局，并在第一行中添加了具有固定宽度的textview的表行，其余行添加了具有固定宽度的单选按钮的textview

So i took a table layout and added table rows with textviews of fixed width in first row and a textview with radio buttons of fixed width for the remaining rows

这是布局代码：

   <HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TableLayout
        android:showDividers="middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TableRow>

            <TextView
                android:id="@+id/name"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:text=""/>


            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Excellent"/>


            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Very Good"/>


            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Good"/>


            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Okay"/>


            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Bad"/>


            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Very Bad"/>


            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Worst"/>

        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Food Quality"/>


                <RadioButton
                    android:layout_width="100dp"
                    android:gravity="center_horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_height="wrap_content" />
                <RadioButton
                    android:layout_width="wrap_content"
                    android:gravity="center_horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_height="wrap_content" />
                <RadioButton
                    android:layout_width="wrap_content"
                    android:gravity="center_horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_height="wrap_content" />
                <RadioButton
                    android:layout_width="wrap_content"
                    android:gravity="center_horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />


        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Food Quality"/>

            <RadioButton
                android:layout_width="100dp"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />
            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />
            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />
            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />


        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Food Quality"/>

            <RadioButton
                android:layout_width="100dp"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />
            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />
            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />
            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal"
                android:layout_height="wrap_content" />


        </TableRow>
    </TableLayout>


</HorizontalScrollView>

哪个给了我这样的输出（水平滚动）

Which gives me an output like this(horizontally scrollable)

问题是

由于我仅添加了没有单选按钮组用户的单选按钮，因此能够在单行中选择所有单选按钮，这是不应该发生的。

As i have added only radio buttons without an radiogroup user is able to select all the radio buttons in a single row which shouldn't happen.

如果我添加单选组，单选按钮未与第一行的textviews（标签）正确对齐。

If i add the radiogroup, the radio buttons are not aligning properly with textviews(labels) of the first row.

任何人都可以帮我。

推荐答案

有时无法妥协在设计上，您必须牺牲效率。您可以通过向所有单选按钮添加简单的常见 OnCheckedChangeListener 来实现此目的。

Sometimes when you cannot compromise on design, you have to compromise on efficiency. You can achieve this by adding a simple common OnCheckedChangeListener to all radio buttons.

public CompoundButton.OnCheckedChangeListener onCheckedChangeListener = new CompoundButton.OnCheckedChangeListener() {

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

        // As all radio buttons have this listener added,
        // add this check to avoid repetitive execution of code and avoid ripples

        if (isChecked) {
            View parent = (View) buttonView.getParent();
            RadioButton lastCheckedRadioButton = (RadioButton) parent.getTag();
            if (lastCheckedRadioButton != null) {
                lastCheckedRadioButton.setChecked(false);
            }
            parent.setTag(buttonView);
        }
    }
};

最糟糕的部分是什么？

是在所有单选按钮上添加侦听器的时候。

如果您可以想到更有效的方法，请使用自己的解决方案，否则，请使用此代码段将侦听器添加到所有单选按钮（根据您的布局示例）

What is the worst part?
It's when you add listener to all radio buttons.
If you can think of more efficient way, use your own solution, else, use this snippet to add listeners to all radio buttons (based on your layout sample).

TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
View child;
TableRow tableRow;
// As the first line is headings, skip the first row
for (int i = 1; i < tableLayout.getChildCount(); i++) {
    child  = tableLayout.getChildAt(i);
    if (child instanceof  TableRow) {
        tableRow = (TableRow) child;
        // As the first line has labels, skip the first column
        for (int j = 1; j < tableRow.getChildCount(); j++) {
            child  = tableRow.getChildAt(j);
            if (child instanceof RadioButton) {
                ((RadioButton) child).setOnCheckedChangeListener(onCheckedChangeListener);
            }
        }
    }
}

注意：：如果将 setTag 方法用于其他目的，则可以使用 setTag（R.id.radioButton）和 getTag（R.id.radioButton）获得结果

NOTE: If you have used setTag method for some other purpose, you can use setTag(R.id.radioButton) and getTag(R.id.radioButton) to achieve the result

这篇关于在Android中对齐的带有相应标签的无线电组的TableLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！