Lesson 182. ConstraintLayout: chain, weight, barrier, group, circular

Lesson 182. ConstraintLayout: chain, weight, barrier, group, circular


We continue to consider ConstraintLayout.


Chain

Chain can be translated as a chain. A chain will allow you to distribute multiple View evenly in the available free space.

To create a chain, you must select View and center them horizontally or vertically.

The chain can be in one of three modes.

spread

Free space is evenly distributed between the View and the boundaries of the parent.

spread_inside

Free space is evenly distributed between View only. Extreme View pressed against the boundaries of the father.

packed

Free space is evenly distributed between the Extreme View and the borders of the parent. You can use margin to indent between View.

Chain modes are switched by clicking on the chain icon.

In packed mode, you can use the scroll to adjust the position of all the View relative to the borders of the parent.

Not only the boundaries of the parent but also other objects can be used as binding objects.

weight

The chain allows us to specify the value of weight for View. This is the same weight we normally use in LinearLayout.

We need weight attributes to work with weights. By default, they are not in the main Properties list.

To see all the attributes, you need to click on the two-arrow icon. But every time it is inconvenient to run there. There is another solution. Note, at the bottom of the Properties is the Favorite Attributes section. We will add the attributes we need there.

To do this, use the search for the word weight and add the attributes found in Favorite by clicking on the star.

The weight attributes now appear in the main Properties list.

As with LinearLayout, you need to set the View size to 0dp to use the weight. Let’s put the left TextView weight = 2 and the right = 1. And leave the central TextView wrap_content.

The first and third TextViews now share 2: 1 free space.

Barriers

Barriers were presented at Google IO 2017. To date (12/07/17) they are not yet available in the ConstraintLayout release, but are in beta.

To use the beta, you must add the google maven repository and specify the constraint beta for constraint-layout in dependencies

repositories {
    maven {
        url 'https://maven.google.com'
    }
}
dependencies {
    ...
    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
}

Suppose we have a screen like this.

Two text and picture.

The picture should be to the right of both texts, regardless of their size. That is, if the first text takes up more space in width, then the picture should be more right than the first text. And if the second text is wider, then the second text is more correct.

This is a fairly common case. Usually, this is because we add both texts to LinearLayout (or RelativeLayout), set the width to wrap_content, and have the image to the right of that LinearLayout. In this case, LinearLayout will be the width of the widest text and the image will be located to the right of both texts. But UI optimization tutorials tell us to use as few different ViewGroup’s on the screen as possible because it doesn’t affect performance the best. Ok, let’s listen to them.

In order not to add extra LinearLayout, we can use a barrier. The barrier can be configured to be to the right of both TextViews, no matter which one is wider. After that, all you have to do is tie the picture to this barrier.

Add and configure the barrier

We do 4 steps:
1) Add a vertical barrier
2) In Component Tree, drag both TextView into the barrier. Thus, we inform the barriers that View is guided by.
3) In Properties we set barrierDirection to end (or right) mode. This means that the barrier will be located to the right of all the View that was added in paragraph 2.
4) Attach the picture to the barrier.

Now, as you change the width of the TextView, the barrier will shift, followed by the picture.

Group

The groups were unveiled at Google IO 2017 and are not yet officially available. Working with them requires the same steps as barriers.

The group allows you to create a set of View that can be used for group operations.

let’s create a group

We add a group to the screen, and then drag and drop all the TextView into it. It doesn’t matter where the group is on the screen. The main thing – which View was added to it.

In the layout file, the group will look like this

    

All added View is contained in the constraint_referenced_ids attribute.

We can now work with this group in code, just like normal View.

Group group = (Group) findViewById(R.id.group);
group.setVisibility(View.GONE);

All members of this View group will become invisible.

There is not enough documentation on this topic yet, and the possibilities are not clear. That is, it is not clear that the group delegates its View and what does not. For example, visibility works, but the click handler is gone. We will wait for the official release.

Circular

Using circular position, we can adjust two View so that one is at a certain distance and at a certain angle from the other

The View B image is at an angle and some distance from View A

To get this result, we need to configure three attributes for View B

– layout_constraintCircle – Specify the id view that will be the center of the circle, ie View A

– layout_constraintCircleRadius – Distance from center of circle to View B

– layout_constraintCircleAngle – angle (degrees, 0 to 360)

In the next lesson, we’ll look at ConstraintSet




Discuss in the forum [1 reply]

Leave a Comment