Introduction to Android new features, Constraintlayout full parsing

Reprint Please specify source: http://blog.csdn.net/guolin_blog/article/details/53122387

Today to bring you 2017 years of the first article, here first wish you all good New year.

The topic of this article is constraintlayout. In fact, Constraintlayout is one of the main new features in Android Studio 2.2 and a feature that Google focused on last year's I/O conference. As we all know, in the traditional Android development, the interface is basically done by writing XML code, although Android studio also supports the visual way to write the interface, but it is not easy to operate, I've also never recommended a visual way to write an Android app's interface.

And the constraintlayout is to solve this situation and appear. Contrary to the traditional way of writing interfaces, Constraintlayout is well suited to writing interfaces in a visual way, but is not a good way to write using XML. Of course, the XML code behind the visualization is still used, but the code is generated automatically by Android studio based on our operations.

In addition, Constraintlayout has an advantage, it can effectively solve the problem of too much nesting of layout. We usually write the interface, complex layout is always accompanied by multiple layers of nesting, and the more nested, the performance of the program is worse. Constraintlayout uses constraints to specify the positions and relationships of individual controls, which are somewhat similar to relativelayout, but are far more powerful than relativelayout.

In fact, Constraintlayout belongs to the new features of Android Studio 2.2, and I wanted to add it to my new book last year when I wrote the second line of code, but I gave up after trying. Because the use of constraintlayout is a lot of drag on the control, only the text or some static picture is too difficult to express its use, it is not suitable for writing to the book. My idea at the time was to write a constraintlayout on the blog to make up for the new features missing from the second line of code, and today this article came.

Begin

Let's start with learning the way we learn, first open up your Android Studio and create a new Constraintlayouttest project. Also, make sure that your Android Studio is 2.2 or later.

In order to use constraintlayout, we need to add the constraintlayout dependency in the App/build.gradle file, as shown below.

{    compile ‘com.android.support.constraint:constraint-layout:1.0.0-beta4‘}

Currently, the latest version of the Constraintlayout Library is 1.0.0-BETA4, which does not yet have a formal stable version, but it does not affect our early learning and use.

Now that the Res/layout/activity_main.xml file is open, because this is a new empty project, Android Studio will automatically help us create the good one layout as shown in.

However, this layout created automatically by Android Studio uses Relativelayout by default, and we can convert it to constraintlayout by doing the following.

After the conversion is complete, the contents of the original relativelayout are automatically converted to the constraintlayout, compared to the TextView in the. If you don't need it, you can select the control and then press the DELETE key on your keyboard to delete it.

As we can see, there are now two screen-like screens in the main operation area, the preview screen on the left and the blueprint interface on the right. Both of these can be used for layout editing, except that the left part is primarily used to preview the final interface effect, and the right part is used primarily to observe the constraints of each control in the interface.

Basic operations

Let's learn some specific operations, constraintlayout basic usage is very simple, for example, we want to add a button to the layout, then only need to drag a button from the left palette area to go in, as shown in.

The button is now added to the interface, but since we haven't added any constraints to the button, the button doesn't know where it should be. Now the button position that we see on the preview screen is not the actual position after its final run, and if a control does not add any constraints, it will automatically be in the upper-left corner of the interface after it is run.

So let's add a constraint to the button, and each control's constraints are divided into vertical and horizontal categories, and you can add constraints to the control in four directions, as shown in.

There is a circle between the top and bottom of the button, which is used to add the constraint, we can add the constraint to Constraintlayout, or you can add the constraint to another control. For example, if you want the button to be in the lower-right corner of the layout, you can add the constraint as shown in.

We have added a constraint to the right and bottom of the button, so the button will position itself in the lower-right corner of the layout. Similarly, if we want the button to be centered, we need to add a constraint to the top or bottom of it, as shown in.

This is the most basic use of adding constraints.

In addition, we can use constraints to let one control be positioned relative to another. For example, if we want to add a button that is just below the first button and the spacing is 64DP, the operation is as follows.

Now that we've learned how to add a constraint, how do we remove the constraint? In fact, it is very simple, there are three ways to delete a constraint, the first to delete a separate constraint, hover the mouse over a constrained circle, and then the circle will turn red, this time click can be deleted, as shown in.

The second is to delete all constraints on a control, select a control, and then it will have a Delete constraint icon in the lower-left corner, which will remove all constraints from the current control, as shown below.

The third is to delete all constraints in the current interface, click the Delete constraint icon in the toolbar, as shown in.

Inspector

So we learned the basic usage of constraintlayout, and then we began to learn some advanced content.

When you select any of the controls, a number of property options appear in the Properties area on the right, as shown in.

Here we can set all the properties of the current control, such as text content, color, click events, and so on. These functions are very simple, I will not go into detail, you can point to the operation.

What we need to focus on is the upper part of the properties area, which is also known as Inspector.

As you can see first, there is a longitudinal axis and a transverse axis in the inspector, and these two axes are also used to determine the position of the control. We just added a constraint to the top and bottom of the button, then the button can be centered, in fact, because the axis value is 50. If you adjust the scale of the axis, the position of the button changes as shown.

However, although we dragged the value of the horizontal axis to 100, the button did not close to the far right of the layout, which is why? In fact, Android Studio has added a 16DP spacing to the control's constraints in each direction by default, and the values for these spaces can be clearly seen from the inspector. If these default values are not what you want, you can modify them directly on the inspector as shown in:

As you can see, the spacing on the right side of the button is gone after you modify it to 0.

Next we'll learn about the square area in the middle of the inspector, which controls the size of the control. There are three modes to choose from, each using a different notation, click the symbol to switch.

• The wrap content, which we are familiar with, does not need to be interpreted.
• Represents a fixed value that specifies a fixed length or width value for the control.
• Represents the any size, which is somewhat similar to the match parent, but is not the same as the match parent, which is a type of control that is unique to the constraintlayout, so let's focus on that.

First of all, there is a match parent in constraintlayout, but with less, because Constraintlayout is a major feature is to solve the layout nesting, since there is no layout nesting, then match The parent doesn't make much sense.

And any size is used to replace match parent in Constraintlayout, first look at how we use any size to achieve the same effect as the match parent. For example, I want the width of the button to fill the entire layout, as shown in the operation.

As you can see, we specify the width of the button as any size, which automatically fills the entire layout. And, of course, remember to set the left margin of the button to 0.

Some friends might ask, what's the difference between this and match parent? The big difference is that the match parent is used to fill the parent layout of the current control, and any size is a constraint rule that fills the current control. For example, a better understanding is that if we have a new button and one of its constraints is added to the current button, the effect of any size will change as shown.

Through the demo, I believe you have a good understanding of the role of any size.

Guidelines

Now you are familiar with constraintlayout and can use Constraintlayout to write some simple interfaces. But at the moment there is a problem may be more headaches, just now we have achieved a button to center the function, if we want to let two buttons together to center alignment how to do it?

In fact, this demand is very common, for example, in the application of the login interface, there will be a login button and a registration button, whether they are horizontally centered or vertical center, but it must be two buttons together center.

To implement this function, just using the knowledge we just learned is not enough, it takes a new function in Constraintlayout, guidelines.

Let's learn how to use guidelines in practice. For example, the login and registration buttons are now added to the interface, as shown in.

Then we want the two buttons to be centered in the horizontal direction, in the vertical direction from the bottom 64DP, then you need to add a vertical direction of the guideline, as shown in.

Let me explain the operation in action. First click on the guidelines icon in the notification bar to add a vertical or horizontal guideline, here we need to be in the vertical direction. The guideline default is to use the DP ruler, we need to check guideline, and click on the top arrow icon to change it to a percentage ruler, and then the vertical direction of the guideline to 50% position, so that the preparation work done.

Next we start with the ability to have two buttons centered in the horizontal direction and 64DP from the bottom, as shown in.

As you can see, we add a constraint to guideline to the right of the login button, add a constraint to the bottom of the login button, and drag the button to make it 64DP from the bottom. Then add a constraint to guideline on the left side of the registration button, and under the Register button, add a constraint below the login button. This allows the two buttons to be centered in the horizontal direction, in the vertical direction is 64DP from the bottom of the function.

Automatically add constraints

However, if the content in the interface becomes complex, it is tedious to add constraints to each control. For this reason, the ability to automatically add constraints in Constraintlayout can greatly simplify those tedious operations.

There are two main ways to add constraints automatically, a kind of called AutoConnect, a kind of called inference, we first look at the first kind.

To use AutoConnect, you first need to enable this feature in the toolbar, AutoConnect is not enabled by default, as shown in.

AutoConnect can automatically determine how a constraint should be added based on the state of our drag-and-drop control, such as when we place the button in the center of the interface, and the constraint is automatically added to the top and bottom of it, as shown in.

Then we place a button below the button, and the effect is as follows.

As you can see, simply drag and drop the button onto the interface, AutoConnect will judge our intentions and automatically add constraints to the control. However, AutoConnect is not guaranteed to accurately determine our intentions, if the automatic addition of the constraint is not what you want, you can also be manually modified at any time. In short, it can be used as an auxiliary tool, but it cannot be completely added to the constraints of the control.

The above is the use of AutoConnect, next we look at the use of inference. Inference is also used to automatically add constraints, but it is more powerful than AutoConnect, because AutoConnect can only add constraints to the current operation's controls automatically, and inference automatically adds constraints to all elements in the current interface. Thus inference is more suitable for the implementation of a higher complexity of the interface, it can be a key to automatically generate all constraints.

Here's an example of how inference is used, such as the interface now has two TextView, two EditText, and two buttons, as shown in.

Next we place the controls according to the location of the interface design, and then click on the Toolbar Infer constraints button, you can automatically add constraints for all controls, as shown in.

Now run the program, as shown in the final effect:

Here, we basically put constraintlayout in the important usage is summed up, through this study, we also have a more in-depth understanding of constraintlayout. Of course, Constraintlayout is still in beta, and a lot of features are still being improved. For example, the chains feature introduced in the BETA3 version is a powerful new feature, but since this feature needs to be used with Android Studio 2.3来, and 2.3 is not currently available, I have not included this part of this article. When the Constraintlayout function is more abundant, I may write a constraintlayout high-level usage to complement this.

Follow my technical public number and have high-quality technical articles pushed every day. Pay attention to my entertainment public number, work, study tired time to relax yourself.

Sweep the QR code below to follow:

Introduction to Android new features, Constraintlayout full parsing