将动态子视图垂直添加到ConstraintLayout

时间:2018-09-25 07:20:52

标签: android viewgroup android-viewgroup android-constraintlayout

Android ViewGroup具有以下添加(子)视图的方法:

enter image description here

我知道我们可以轻松地以xml /编程方式为LinearLayout定义水平/垂直方向,并添加子视图,例如。

enter image description here

与RelativeLayout相似,我们可以使用ViewGroup的{​​{1}}和addView的方法:

enter image description here

我也知道我们可以将RelativeLayout.LayoutParams用作LinearLayout内的孩子并玩耍。

有没有可靠的推荐方法将子视图动态添加到ConstraintLayout?

更新: 让我举一个我想实现的不太简单的例子。

假设您有一个ConstraintLayout 1,View 2和View 3。所有的V1,V2和V3都垂直向下对齐,并且是由多个ViewTextView组成的复杂视图。根据用户操作和服务器发送信息的方式,我需要在原始V2和V3之间添加多个V1和V2(可以是一对V1-V2,可以是3对V1-V2)。如果我使用的是ConstraintLayout,那么当我可以轻松地垂直使用LinearLayout时,最好以编程方式添加多个约束?

现在,就效率,性能和更少的漂亮代码而言,与线性布局相比,ConstraintLayout是否最适合此要求?

1 个答案:

答案 0 :(得分:2)

可以使用ConstraintLayout将视图添加到addView(),就像使用LinearLayout一样。区别在于,使用ConstraintLayout时,必须限制添加的视图。要以编程方式约束视图,请使用ConstraintSet

  

此类允许您以编程方式定义要与ConstraintLayout一起使用的一组约束。它使您可以创建和保存约束,并将其应用于现有的ConstraintLayout。

这是一个简短的示例:

activity_main
定义两个TextViews。将它们水平居中放置在顶部。

<android.support.constraint.ConstraintLayout 
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/topView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Top View"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/bottomView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Bottom View"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/topView" />

</android.support.constraint.ConstraintLayout>

这是在没有设置约束的情况下将新的TextView(“中间视图”)添加到此布局中时将看到的内容。请注意,新视图的默认位置为(0,0)。

enter image description here

假设我们希望将生成的中间视图放置在窗口中水平居中的顶视图和底视图之间,如下所示:

enter image description here

以下是将产生此结果的代码:

MainActivity.java

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Define the new TextView and add it to the ConstraintLayout. Without constraints,
    // this view will be positioned at (0,0).
    TextView middleView = new TextView(this);
    middleView.setId(View.generateViewId());
    middleView.setText("Middle View");
    middleView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 20.0f);
    ConstraintLayout layout = findViewById(R.id.constraintLayout);
    ConstraintLayout.LayoutParams lp =
        new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT,
                                          ConstraintLayout.LayoutParams.WRAP_CONTENT);
    layout.addView(middleView, lp);

    // Move the new view into place by applying constraints.
    ConstraintSet set = new ConstraintSet();
    // Get existing constraints. This will be the base for modification.
    set.clone(layout);
    int topMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                                                    16, getResources().getDisplayMetrics());
    // Set up the connections for the new view. Constrain its top to the bottom of the top view.
    set.connect(middleView.getId(), ConstraintSet.TOP, R.id.topView, ConstraintSet.BOTTOM, topMargin);
    // Constrain the top of the bottom view to the bottom of the new view. This will replace
    // the constraint from the bottom view to the bottom of the top view.
    set.connect(R.id.bottomView, ConstraintSet.TOP, middleView.getId(), ConstraintSet.BOTTOM, topMargin);
    // Since views must be constrained vertically and horizontally, establish the horizontal
    // constaints such that the new view is centered.
    set.centerHorizontally(middleView.getId(),ConstraintSet.PARENT_ID);
    // Finally, apply our good work to the layout.
    set.applyTo(layout);
}