This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

If you choose to use it, be sure to read it and don’t leave out attributes, or you’ll go nuts.

1. Barrier

It’s a rule, it’s a rule, it’s not a name enough, but let’s list some common scenarios; Official website of the Barrier.

  1. Specific look at the picture

“Second line label” and “second line value” are a whole, and their distance above is100dp, but it is possible that the value of the “second line value” is null or null, and the distance of the “second line label” from the above is also required100dpSince we know that the height of the “second line value” is higher than the height of the first line, we use “second line label” and “second line value” to compare them, and “second line value” is above100dpBut since the “second line value” may be empty, the following effect occurs when the “second line value” is empty:

We found that this was not what we expected, and now we can think of a way to do this, first of all, to arbitrarily label the “second line” at the time of code controlmarginTopAdd that in; Another way to change the layout is to put “second line label” and “second line value” into one layout, for exampleLinearLayoutUp heremarginTop 由 LinearLayoutControl; That way, even if the “value” on the second line disappears, the upper effect will remain.

In addition to the above method can also use other, such as control, we don’t use the code we don’t use the layout of the other, because we know that too many nested layout performance will decline, so at the time of writing can reduce nested case as far as possible, of course also cannot make the code in order to reduce the nested becomes exceptionally complex.

In order to satisfy the above requirement, Barrier appears, which can be hidden and dependent on it, and the distance from it remains constant. For the hidden “second line value”, it disappears, but retains the marginTop value. Here’s the layout:


      
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

  <TextView
      android:id="@+id/textView4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Head"
      android:textSize="36sp"
      app:layout_constraintBottom_toTopOf="@id/barrier3"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />


  <androidx.constraintlayout.widget.Barrier
      android:id="@+id/barrier3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="top"
      android:layout_marginTop="100dp"
      app:constraint_referenced_ids="textView2,textView3" />

  <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="4dp"
      android:text="Second line label"
      android:textSize="36sp"
      app:layout_constraintBottom_toBottomOf="@+id/textView3"
      app:layout_constraintStart_toStartOf="@+id/textView4"
      app:layout_constraintTop_toTopOf="@+id/textView3"
      app:layout_constraintVertical_bias="0.538" />

  <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="100dp"
      android:layout_marginStart="12dp"
      android:layout_marginTop="100dp"
      android:text="Second line value"
      android:textSize="36sp"
      app:layout_constraintStart_toEndOf="@+id/textView2"
      app:layout_constraintTop_toBottomOf="@+id/barrier3" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Even if the “second line value” disappears, the overall layout is still as expected, and not much layout is added. In the code:

<androidx.constraintlayout.widget.Barrier
      android:id="@+id/barrier3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="top"
      android:layout_marginTop="100dp"
      app:constraint_referenced_ids="textView2,textView3" />
Copy the code

There are two main properties, app:barrierDirection and app:constraint_referenced_ids:

  • App :barrierDirection is the location, the location in which the content is contained, and I’ll write it heretopIs at the top, and there are other propertiestop.bottom.left.right.start 和 endThese attributes, see the meaning is very clear.
  • App :constraint_referenced_ids this is what’s inside, and this is what’s insideidIf there are more than one, use commas to separate them. It’s going to go toBarrierThe distance between will not change, even if it is hidden.

Now, you might wonder why a textView4 is dependent on a Barrier, because a Barrier is just a rule and not an entity, and its existence can only be dependent on an entity, it can’t exist in a specific place, and if we only have the second line value that depends on it, If textView4 is dependent on the Barrier, the position of textView4 is fixed. If textView4 is dependent on the Barrier, the position of textView4 is fixed. So that’s where the Barrier is.

  1. It looks like a table. Look at the layout effect:

I want it to look like this. The right is always the longest distance from the left. Here is my code:


      
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">


  <TextView
      android:id="@+id/textView4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="8dp"
      android:text="Head"
      android:textSize="36sp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="4dp"
      android:text="Second line"
      android:textSize="36sp"
      app:layout_constraintBottom_toBottomOf="@+id/textView3"
      app:layout_constraintStart_toStartOf="@+id/textView4"
      app:layout_constraintTop_toTopOf="@+id/textView3" />

  <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="50dp"
      android:layout_marginStart="20dp"
      android:layout_marginTop="10dp"
      android:text="Second line value"
      android:textSize="36sp"
      app:layout_constraintStart_toEndOf="@+id/barrier4"
      app:layout_constraintTop_toBottomOf="@+id/textView4" />


  <TextView
      android:id="@+id/textView5"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="4dp"
      android:text="Third test."
      android:textSize="36sp"
      app:layout_constraintBottom_toBottomOf="@+id/textView6"
      app:layout_constraintStart_toStartOf="@+id/textView4"
      app:layout_constraintTop_toTopOf="@+id/textView6" />

  <TextView
      android:id="@+id/textView6"
      android:layout_width="wrap_content"
      android:layout_height="50dp"
      android:layout_marginStart="20dp"
      android:layout_marginTop="10dp"
      android:text="Third line value"
      android:textSize="36sp"
      app:layout_constraintStart_toEndOf="@+id/barrier4"
      app:layout_constraintTop_toBottomOf="@+id/textView3" />

  <androidx.constraintlayout.widget.Barrier
      android:id="@+id/barrier4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="end"
      app:constraint_referenced_ids="textView2,textView5"
      tools:layout_editor_absoluteX="411dp" />


</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Ok, so make sure the constraint on the right points to the Barrier. So the Barrier here, we see that we have textView2 and textView5, and that’s when we can do that, and if textView2 gets longer, then we’re going to do that.

2. Chains

We’re particularly fond of using linear layouts, because we’ve found that the effects on UI diagrams can be used with linear layouts, and perhaps because of the way most people think. For example, which we like very much, the horizontal center, the spatial distribution of each part and so on are very convenient. If linear layouts are so good, why do they have constrained layouts? Because linear layouts are easy to write deeply nested layouts, but constrained layouts don’t, and most of the time they can be implemented without nesting. Does that mean that linear layouts have some constrained layouts? Yes.

If you use Chains, you can easily achieve the horizontal distribution in the horizontal direction. If you use Chains, you can easily achieve the horizontal distribution in the horizontal direction.

In fact, I have posted the tutorial on the official website in the last article, and the main thing here is how to do the bidirectional constraint, once the bidirectional constraint is formed, then it naturally enters intoChainsMode.

1) Operate in view mode

If direct operation, then only one-way constraint, if you want to form such A constraint, need to select the relevant node, for example here is to select A and B at the same time, and then click the right mouse button, you can see Chains → Create Horizontal Chain.

Corresponding operations

Select the option in the figure to complete the point from A to B. The modified schematic diagram is as follows:

We found that we had achieved the horizontal arrangement. To do this, change the attributes layout_constraintVertical_chainStyle and layout_constraintHorizontal_chainStyle. The weight is the attribute layout_constraintHorizontal_weight.

Constrainthorizontal_chainstyle

  • Spread = spread = spread = spread = spread = spread = spread
  • Spread_inside on both sides next to nonChainsView, middle of the average distribution;

  • Packed everything is in the middle

Attention,layout_constraintHorizontal_weightThis property is only available inAIt has to be set on the body, so it has to be set on the first nodelayout_constraintHorizontal_weightIs for horizontal. It only works in the horizontal direction. If horizontal is set to vertical, it does not work.

The layout_constraintHorizontal_weight attribute is only 0dp wide or high for the current view. And the value of this is the same as the linear layout.

2) the way the code is different from the above is to do two-way binding, with the code is easy to achieve two-way binding, can usually add the same constraints.