动态改变视图

Question

我有一个 radioGroup，它有 4 个按钮，即 1、2、3、4、5。

如果用户单击单选按钮 1，视图应该在单选组下方的同一活动中显示不同的布局视图。如果用户单击 2，它应该显示一些其他布局视图。我的目标是根据所选单选按钮更改相同布局和活动中的视图。

我可以根据不同的radioButtons改变textview的文本。

这很容易！

但是改变整个视图呢？

Answer 1

在这种情况下，我喜欢使用 Radio 组下方的 Frame 布局作为 Fragment 容器

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RadioGroup
                android:id="@+id/radio_group"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:checkedButton="@id/net_sales_radio_button">

                <androidx.appcompat.widget.AppCompatRadioButton
                    android:id="@+id/rb_one"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="1"
                    />

                <androidx.appcompat.widget.AppCompatRadioButton
                    android:id="@+id/rb_two"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="2"
                    />

                <androidx.appcompat.widget.AppCompatRadioButton
                    android:id="@+id/rb_three"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="3"
                    />

                <androidx.appcompat.widget.AppCompatRadioButton
                    android:id="@+id/rb_four"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="4"
                    />

            </RadioGroup>


             <FrameLayout
                android:id = "@+id/fragment_container"
                android:layout_width = "match_parent"
                android:layout_height = "0dp"
                android:layout_weight="1"/>


        </LinearLayout>

从这里您可以轻松地使用 Fragment 事务根据选择的单选按钮切换布局。

Fragment fragment = new LogInFragment();
            getSupportFragmentManager().beginTransaction()
                    .replace(R.id.fragment_container, fragment)
                    .commit();

出于几个原因，我更喜欢这种方法而不是简单地将布局包含在父布局中。

1. 因为它可以让您保持 Activity 的代码更干净，因为与每个子布局相关的代码将存在于它们的 Fragment 上，远离父 Activity。

2. 它还可以使您的父活动 XML 文件保持干净，因为您不必担心放置一堆 <include> 标记或其他与子布局有关的视图。

如果你想在 MainActivity 中访问 Fragments 的编辑文本，这里有一个很酷的技术。

1. 创建一个接口类，该类将为片段所具有的每个编辑文本返回一个值。如果您的 Fragments 有用户数据，我在下面创建了一个。如果您的 Fragment 中有很多编辑文本，并且您不希望界面中有很多功能，请创建一个模型类，其中包含您需要的字段并让界面返回该模型。

public interface FormCallbacks {
    String getUserName();
    String getAddress();
    String getPhone();
}

1. 让每个 Fragment 实现接口并在回调方法中返回编辑文本的值

public class UserOneFragment extends Fragment implements FormCallbacks {

    private EditText etUserName;
    private EditText etAddress;
    private EditText etPhone;

    @Override
    public String getUserName() {
        return etUserName.getText().toString();
    }

    @Override
    public String getAddress() {
        return etAddress.getText().toString();
    }

    @Override
    public String getPhone() {
        return etPhone.getText().toString();
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return super.onCreateView(inflater, container, savedInstanceState);
    }
}

1. 从 MainActivity 访问回调

Fragment fragment = getSupportFragmentManager().findFragmentById(R.id.fragment_container);
        if (fragment instanceof FormCallbacks) {
            FormCallbacks callbacks = (FormCallbacks) fragment;
            String userName = callbacks.getUserName();
            String address = callbacks.getAddress();
            String phone = callbacks.getPhone();
        }

Answer 2

您可以在广播组中设置onCheckedChangeListener()。

radioGrp.setOnCheckedChangeListener { _, checkedRadioId ->

            when (checkedRadioId) {
                radioOne.id -> {
                    //inflate your desired view
                }
                radioTwo.id -> {
                    //inflate your second view
                }
            }
        }

为了扩充新视图，

var view = layoutInflater.inflate(R.layout.newlayout, null) as LinearLayout
container.addView(view)

由于这些views 可能会超出屏幕高度，因此您可以将父视图放在scrollview 中。

希望这会对你有所帮助。