类似的Android 动画 共享元素 系统学习 完善_嘤嘤嘤*的博客-CSDN博客 这里的
TransitionManager
类似的Android ConstraintLayout 动画二_嘤嘤嘤*的博客-CSDN博客这里的ConstraintLayout 动画运用
Android ConstraintLayout 基础 加 动画方式一_嘤嘤嘤*的博客-CSDN博客_android constraintlayout动画
这里底下的效果更接近
首先是主布局,这里主要是在内部写俩个互相有布局羁绊关系的布局
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/main_bot"
android:layout_width="match_parent"
android:layout_height="@dimen/dp50"
android:layout_marginBottom="@dimen/dp30"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:ignore="MissingConstraints">
<LinearLayout
android:id="@+id/l2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/x1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x1" />
<ImageView
android:id="@+id/x2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x2" />
<ImageView
android:id="@+id/x3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x3" />
<ImageView
android:id="@+id/x4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x4" />
</LinearLayout>
<LinearLayout
android:id="@+id/l1"
android:layout_width="@dimen/dp300"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@id/l2"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/i1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i1" />
<ImageView
android:id="@+id/i2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i2" />
<ImageView
android:id="@+id/i3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i3" />
<ImageView
android:id="@+id/i4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i4" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
bot.xml
黑上面是反过来的布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_bot"
android:layout_width="match_parent"
android:layout_height="@dimen/dp50"
android:layout_marginBottom="@dimen/dp30">
<LinearLayout
android:id="@+id/l1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/i1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i1" />
<ImageView
android:id="@+id/i2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i2" />
<ImageView
android:id="@+id/i3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i3" />
<ImageView
android:id="@+id/i4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/i4" />
</LinearLayout>
<LinearLayout
app:layout_constraintLeft_toRightOf="@id/l1"
android:id="@+id/l2"
android:layout_width="@dimen/dp300"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/x1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x1" />
<ImageView
android:id="@+id/x2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x2" />
<ImageView
android:id="@+id/x3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x3" />
<ImageView
android:id="@+id/x4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/x4" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
final ConstraintSet mConstraintSet1 = new ConstraintSet();
final ConstraintSet mConstraintSet2 = new ConstraintSet();
//把默认 constraintLayout 布局放到 mConstraintSet1 中
mConstraintSet1.clone(mViewBinding.mainBot);
//把标定位置变换的 constraintLayout 布局放到 mConstraintSet2 中
mConstraintSet2.clone(getContext(), R.layout.bot);
mViewBinding.butToggle.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (!flag) {
TransitionManager.beginDelayedTransition(mViewBinding.mainBot);
mConstraintSet2.applyTo(mViewBinding.mainBot);
} else {
TransitionManager.beginDelayedTransition(mViewBinding.mainBot);
mConstraintSet1.applyTo(mViewBinding.mainBot);
}
flag = !flag;
}
});