Android - 为新添加的图像视图和文本视图设置约束答案

【问题标题】：Android - Setting constraints to newly added imageviews and textviewsAndroid - 为新添加的图像视图和文本视图设置约束
【发布时间】：2018-04-09 13:54:23
【问题描述】：

我有一个约束布局视图，我在其中以编程方式添加 circleimageviews 和文本视图，但是，当我这样做时，UI 根本不受影响，我找不到错误，如果有人能帮助我，我将不胜感激问题。

我使用一个函数将所有图像视图和文本视图添加到我的布局中，然后我调用另一个函数来设置我需要的约束。

关于我的 UI 设计，我想将图像视图显示为由 3 列组成的表格，并且行是在运行时确定的，我通过将它们彼此相邻并在需要时将它们放在彼此下方来做到这一点约束集。每个图像视图上方是文本视图内的名称

这是我的代码：

private void initializeFriendsInImageViews(){
    friendsImageViews=new ArrayList<ImageView>();
    friendNamesTextViews=new ArrayList<TextView>();

    //Initializing Layout params
    ConstraintLayout.LayoutParams textViewLayoutParams = new ConstraintLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    ConstraintLayout.LayoutParams circleImageViewLayoutParams = new ConstraintLayout.LayoutParams(220, 220);

    //Declaring both views
    CircleImageView friendPic;
    TextView friendName;

    for(int i=0; i<countFriends; i++) {
        //Initializing both views
        friendPic = new CircleImageView(getActivity());
        friendName = new TextView(getActivity());

        //Setting IDs
        friendPic.setId(i);
        friendName.setId(countFriends+i);

        //Setting layout params
        friendPic.setLayoutParams(circleImageViewLayoutParams);
        friendName.setLayoutParams(textViewLayoutParams);

        //Setting border
        friendPic.setBorderColor(ContextCompat.getColor(getActivity(), R.color.border_grey));
        friendPic.setBorderWidth(8);

        //Load friend picture into imageview
        Picasso.with(getActivity()).load(Uri.parse(friendsPicURLs.get(i))).transform(new CircleTransform()).into(friendPic);

        //Load friend name into text view
        friendName.setText(friendNames.get(i));

        //add image view to list of image views
        friendsImageViews.add(friendPic);
        //add text view to list of text views
        friendNamesTextViews.add(friendName);

        //Add image view to my layout
        friendsConstraintLayout.addView(friendPic);
        //Add text view to my layout
        friendsConstraintLayout.addView(friendName);
    }
    addConstraints();
}

private void addConstraints(){
    //Initializing constraint set
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(friendsConstraintLayout);
    for (int i=0;i<countFriends;i++){
        //positioning a new row of friends (circle image views)
        if (i==0){
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.LEFT,friendsConstraintLayout.getId(),ConstraintSet.LEFT,15);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.TOP,friendsConstraintLayout.getId(),ConstraintSet.TOP,15);
        }
        else if ((i+1)<=3){
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.LEFT,friendsImageViews.get(i-1).getId(),ConstraintSet.RIGHT);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.TOP,friendsImageViews.get(i-1).getId(),ConstraintSet.TOP);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.BOTTOM,friendsImageViews.get(i-1).getId(),ConstraintSet.BOTTOM);
        }
        else if ((i+1)>3){
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.LEFT,friendsImageViews.get(i-3).getId(),ConstraintSet.LEFT);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.RIGHT,friendsImageViews.get(i-3).getId(),ConstraintSet.RIGHT);
            constraintSet.connect(friendsImageViews.get(i).getId(),ConstraintSet.TOP,friendsImageViews.get(i-3).getId(),ConstraintSet.BOTTOM);
        }

        //positioning friend names
        constraintSet.connect(friendNamesTextViews.get(i).getId(),ConstraintSet.LEFT,friendsImageViews.get(i).getId(),ConstraintSet.LEFT);
        constraintSet.connect(friendNamesTextViews.get(i).getId(),ConstraintSet.RIGHT,friendsImageViews.get(i).getId(),ConstraintSet.RIGHT);
        constraintSet.connect(friendNamesTextViews.get(i).getId(),ConstraintSet.BOTTOM,friendsImageViews.get(i).getId(),ConstraintSet.TOP);
    }
    //Apply Constraints
    constraintSet.applyTo(friendsConstraintLayout);
}

【问题讨论】：

ConstraintLayout 的早期版本不支持 ConstraintSet 处理的左/右。见this bug report。使用最新版本的ConstraintLayout 或使用 start/end 而不是 left/right。这可能是您的问题。
另外，friendsConstraintLayout 是创建的吗？它是您正在查找的 XML 的一部分还是您在代码中创建它？
@Cheticamp 它是已经定义的 xml 的一部分。一开始，它没有孩子，我以编程方式将它们添加到我的代码中。我现在就测试你所说的！跨度>
@Cheticamp Nop 没有解决问题！ :(
您是否在屏幕上看到任何添加的视图？只是定位问题吗？

标签： android runtime constraints android-constraintlayout programmatically-created

【解决方案1】：

每次添加视图时，您都需要创建一组新的布局参数。每个连续添加的视图都在破坏先前添加的视图的布局参数。执行以下操作：

//Setting layout params
circleImageViewLayoutParams = new ConstraintLayout.LayoutParams(220, 220);
friendPic.setLayoutParams(circleImageViewLayoutParams);
textViewLayoutParams = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT);
friendName.setLayoutParams(textViewLayoutParams);

虽然现在这可能不会给您带来问题，但将来可能会：我会避免使用零作为 id。

【讨论】：