Constraintlayout, now the default layout on Android, has the advantage of excellent screen fit and a flexible layout style that can be controlled by traditional layout.xml documents as well as built with visual tools. For details on Constraintlayout and how to use it, see Google Docs. Let’s get down to business:

As you know, layouts like RelativeLayout can dynamically lay out child views to specific locations using addRule(). Some readers might say, “Couldn’t I have written the layout in loayout.xml in the first place? “In this case, let’s imagine that you receive a requirement and you have two buttons from left to right: bTN_one and bTN_two. If you click bTN_one, the button will go to the right of bTN_two. If you click bTN_two, the button will go to the left of bTN_one. So xmL-controlled static layout has its drawbacks, and this is where code implemented dynamic layout comes in handy, as does mView.setLayoutParams(layoutParams). Can Constraintlayout implement a similar dynamic layout? Constraintlayout not only implements dynamic layouts, but also animates views on top of them. Next, we will introduce it in detail:

First, explain ConstraintSet. It is a constraint on all the children of a ConstraintLayout, including margins and margins. You can use ConstraintSet to update the layout of all the children of your ConstraintLayout in real time in code to achieve the effect of dynamic layout.

To use ConstraintSet, you need to specify two XML layout files, one for the initial layout (for example, activity_main.xml) and the other for the changed layout (I’ll call it constraint_two-.xml). Constraintlayout dynamic layout Demo:

  1. In activity_main.xml, we created one for the layoutandroid:id="@+id/constraint_one"Id, followed by a Button and a TextView. Initially, the Button is above the TextView, and when we click the Button, the Button will move below the TextView. The specific layout file code is as follows:
<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/constraint_one" android:orientation="vertical"> <Button android:id="@+id/loadImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Load Image" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="10dp"/> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello~~" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintLeft_toLeftOf="@id/loadImage" app:layout_constraintStart_toStartOf="parent" App: layout_constraintTop_toTopOf = "parent" app: layout_constraintVertical_bias = "0.24" / > </androidx.constraintlayout.widget.ConstraintLayout>Copy the code
  1. We also need to create a new one, constraint_two.xml. And define one for the layoutandroid:id="@+id/constraint_two"Note that there is a devil detail here, we just need to add the child View that needs to change the layout, and the child Viewandroid:idThis should be consistent with the initial layout (activity_main.xml above). Because I only want to change the layout of the loadImage button, I just write it to constraint_two-.xml, and I don’t write TextView.
<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/constraint_two"> <Button android:id="@+id/loadImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Load Image" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code
  1. Next is the MainActivity code, inside the comments please read carefully:
public class MainActivity extends AppCompatActivity { Button loadButton; ConstraintLayout constraint_one; Constraint_one private static Boolean isConstraintOne = true; Constraint_one @requiresAPI (API = build.version_codes.kitkat) @override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); constraint_one = (ConstraintLayout) findViewById(R.id.constraint_one); // Initialize constraint_one loadButton = findViewById(R.i.lloyd); // Initialize constraint_one loadButton = findViewById(R.I.lloyd); ConstraintSet mConstrainSet_one = new ConstraintSet(); // Create two new ConstraintSet objects, and store them in. ConstraintSet mConstrainSet_two = new ConstraintSet(); mConstrainSet_one.clone(constraint_one); mConstrainSet_two.clone(this, R.layout.constraint_two); . / / the button add a click event loadButton setOnClickListener (view - > {the if (isConstraintOne) {mConstrainSet_two. ApplyTo (constraint_one); // Add an animation effect to the change. // Add this code, The change of the Button will be in the form of animation gradually move to the target location of the change after TransitionManager. BeginDelayedTransition (constraint_one); isConstraintOne = false; } else { mConstrainSet_one.applyTo(constraint_one); IsConstraintOne = true; }}); }}Copy the code

Constraintlayout this is the basic introduction to Constraintlayout and its simple usage and Demo case. Welcome everyone to me or supplement, if it helps you might as well praise and encourage, I wish you steady progress in technology, wages doubled as soon as possible (dog head bad smile)!