以编程方式为 ConstraintLayout 中的 Android View 设置 Vertical Bias with Transition

Question

我需要在ConstraintLayout中垂直移动一些View，最好有Transition效果（避免'skipping'）。

布局只是一个带有多个小部件（无层次结构）的约束布局，所有小部件都受限于父级。

我的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:id="@+id/myLayout"
tools:context="com.example.quant.icarus.MainActivity">

<SurfaceView
    android:id="@+id/surfaceView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

<Button
    android:id="@+id/button1"
    android:layout_width="125dp"
    android:layout_height="48dp"
    android:alpha="0.5"
    android:background="@drawable/button_border"
    android:textColor="@color/ret_text"
    app:layout_constraintVertical_bias="0.97"
    app:layout_constraintHorizontal_bias="0.2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text" />

<Button
    android:id="@+id/button2"
    android:layout_width="125dp"
    android:layout_height="48dp"
    android:alpha="0.5"
    app:layout_constraintVertical_bias="0.97"
    app:layout_constraintHorizontal_bias="0.8"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text" />

<SeekBar
    android:id="@+id/prog_bar"
    android:layout_width="210dp"
    android:layout_height="40dp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:thumb="@drawable/seekbar_thumb"
    android:max="100"
    android:progress="0"
    android:rotation="270" />

<TextView
    android:id="@+id/prog_text"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    app:layout_constraintVertical_bias="0.1"
    app:layout_constraintLeft_toLeftOf="@+id/prog_bar"
    app:layout_constraintRight_toRightOf="@+id/prog_bar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text"/>

<View
    android:id="@+id/viewToMove1"
    android:layout_width="40dp"
    android:layout_height="1dp"
    app:layout_constraintVertical_bias="0.2"
    app:layout_constraintHorizontal_bias="0.34"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

<View
    android:id="@+id/viewToMove2"
    android:layout_width="40dp"
    android:layout_height="1dp"
    app:layout_constraintVertical_bias="0.35"
    app:layout_constraintHorizontal_bias="0.34"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

<View
    android:layout_width="1dp"
    android:layout_height="30dp"
    app:layout_constraintVertical_bias="0.35"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

<View
    android:layout_width="1dp"
    android:layout_height="30dp"
    app:layout_constraintVertical_bias="0.65"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@color/ret_text" />

</android.support.constraint.ConstraintLayout>

两个视图 vewToMove1 和 viewToMove2 将以编程方式重新定位。但是，当我尝试以下操作时，我遇到了 2 个问题。 1）某些其他元素在屏幕上的位置不正确，但视图移动 - 跳过。 2) 如果我尝试转换，要移动的视图根本不会移动（并且其他元素的位置仍然不正确。

这是相关的 Java 代码。

public class MainActivity extends AppCompatActivity {

    ConstraintSet cSet = new ConstraintSet();
    ConstraintLayout cLayout;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        }

    @Override
    protected void onResume() {
        super.onResume();

        //Thread which updates views.
        TimerTask move_views = new TimerTask(){
            @Override
            public void run() {

                //some code here...

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {

                        cLayout = (ConstraintLayout) findViewById(R.id.myLayout);//can this be put in onCreate or need to wait until render complete?
                        cSet.clone(cLayout);

                        //TransitionManager.beginDelayedTransition(cLayout);//adding this removes View movement.

                        cSet.setVerticalBias(R.id.viewToMove1,0.43f);//updated in the above thread.
                        cSet.setVerticalBias(R.id.viewToMove2,0.68f);

                        cSet.applyTo(cLayout);

                    }
                });

            }
        };

        Timer move_views_timer = new Timer();
        move_views_timer.scheduleAtFixedRate(move_views,10,10);//time in milliseconds
    }


}

我不明白为什么其他一些视图会受到此操作的影响以及为什么转换不起作用。

我有一个想法：在克隆约束之前是否需要等待布局完成加载（某种回调）？我该怎么做？

Answer 1

从来没有弄清楚原来的方法有什么问题，但这对我有用（当然对更清洁的解决方案持开放态度）：

Animation a = new Animation() {
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        ConstraintLayout.LayoutParams lparams = (ConstraintLayout.LayoutParams) myViewToMove1.getLayoutParams();
        lparams.verticalBias = 0.43f;
        myViewToMove1.setLayoutParams(lparams);
    }
};
a.setDuration(8); // in ms
a.setFillAfter(true);
myViewToMove1.startAnimation(a);

为每个视图定义一个新动画。 PS：基于对另一个我找不到的 SO 问题的回答。

Answer 2

因此，在搜索了一段时间后，我找到了一个答案，它允许您进行平滑过渡以及更改 Bias.Your 答案部分正确但不是 100% 正确。

首先你需要两个约束集，一个会产生预期的效果，另一个会重置这些效果。

private ConstraintSet applyConstraint=new ConstraintSet();
private ConstraintSet resetConstraint = new ConstraintSet();

然后你需要在这两个上设置约束 ConstraintLayout ConstraintSet.By 设置 ConstraintLayout 我的意思是找到它的 id 并将它设置为 ConstraintSet.

applyConstraint.clone(constraintLayout);
resetConstraint.clone(constraintLayout);

然后您需要在我们的示例中指定更改，即设置垂直偏差。

public void applyEffect(){
    TransitionManager.beginDelayedTransition(constraintLayout);//For smooth transition.
    applyConstraint.setVerticalBias(R.id.camera_button,0.43f);
    applyConstraint.applyTo(constraintLayout);
}

要还原效果，请使用 resetConstraint。

public void resetEffect(){
    TransitionManager.beginDelayedTransition(constraintLayout);
    resetConstraint.applyTo(constraintLayout);
}

以编程方式为 ConstraintLayout 中的 Android View 设置 Vertical Bias with Transition

Programatically setVerticalBias with Transition for Android View in ConstraintLayout

android

android-layout

android-view

android-transitions

android-constraintlayout