One, open the door gossip

ConstrainLayout app:layout_constraintDimensionRatio I’ve solved a problem I’ve had for years. If you haven’t used it yet, the basics aren’t good enough. Go back and write more UI. Just kidding.

Cut the crap, compass. By definition, it is used for wide height constraints, which is nonsense. Yeah, I’m gonna say the same thing again. Even though it’s just a layout property, some people might think it’s easy to write a scale and be done with it. Really? If you have, you must have the same feelings and confusion about this property as I did before.

When you use it, try it a few times and you’ll get it. But if you try it out, you don’t really understand it. Why can’t you subconsciously configure it correctly? Here’s how to get rid of your worries in the most accessible terms.

  • In short, if there is any doubt, this article summarizes the content, is the author hard practice, exclusive reveal, there is no information on the Internet oh. It’s worth a look. – _ –

Tips: Please bear with me. If you want to jump to the conclusion, you can jump to the end.

See flowers in fog

  1. When to use this property?
  2. How to configure the aspect ratio constraint? How to understand?
  3. Given the aspect ratio constraint, how to configure the width and height attribute values?
  4. It has width and height, but it also has constraints.
  5. How do you do that quickly? (Which is what I’ve summarized)

Three, the clouds see the moon

1. When to use this property?

When you lay out a control, you want to lay it out in proportion, but you don’t want to write out specific values. Or they want to fit as many different screens as possible. For example: Do you want a control that fills the screen with the same width and height as 1:1? Regular layouts cannot be set directly. Control height needs to be calculated dynamically by code, set height = screen width

For example: do you want a control that is 100dp wide, 16:9 wide, or 1:10 high? Insert dynamic code calculation, in short, not pretty

You can use the app:layout_constraintDimensionRatio attribute.

2. How to configure the ratio of width to height?

Android :layout_width=”0dp” Android :layout_height=”100dp” android:layout_height=”100dp” android:layout_height=”100dp”

  • The syntax is as follows:

app:layout_constraintDimensionRatio="h,1:1"

In front of the h – > > writing h, will need to understand and, in turn, based on the width w value reference, according to the proportion to calculate height h w — — > > writing w, in front of the need to understand in turn, to the width of the h value as a benchmark reference, according to the proportion to calculate the width w 1:1 — — > > said aspect ratio. Remember: whether you write h or W before it, make sure you understand it as width: height

  • For example, h,1:1

Using the width W as a reference, calculate the height. And the ratio is 1:1.

Because the width is full. So the height must be the width, so it’s square. (Constrained layout, width =0dp, start-parent, end-parent, match_parent)

  • For example: change to: W,1:1. The width and height are 0dp, and the left and right constraints are parent. That is, the default paving result is to calculate the width w according to the ratio of width and height 1:1 with the height as the reference value. As can be confirmed by the figure, the width is off screen in terms of height values

Ah? Is this it? Don’t worry! The above is a very basic configuration. Let’s add a little bit of conditionality, and then we’ll see what happens.

3. Is the width to height ratio configured, but the single side has a fixed value?

  • For example, my configuration is

Android :layout_width=”100dp” Android: Layout_height =” 0DP “APP: Layout_constraintDimension =”h,1:10” What should this control look like? Let’s go down a little bit.

—

Answer: The height remains 0dp full and the width is fixed at 100DP. Aspect ratio: 1:10. The height h is calculated according to the previous summary, using the width of W as the reference value. At this point, the width is fixed at 100dp, width: height = 1:10, so the height is 1000DP. As shown in figure

—

  • Now, if I change it again, my configuration is zero

Android :layout_height=”0dp” App: Layout_constraintDimension =”w,1:10″ Please first think about your head for 2 seconds, this layout, this control should look like what? Let’s go down a little bit.

— Ah, Teacher Ma said “Tingting, I want tingting”, this time you may have doubts? According to the previous summary, the front is W, which is to calculate the height value according to the height H as the base value. But now the height is 0dp, fill the screen, according to the width: height = 1:10. Calculate the height? This logic does not make sense, why according to the value of h, while calculating itself!

The point is, in this case, three steps

  • First of all, if one side is fixed with a specific value, such as 100dp (0dp does not count), then that side is used as a reference to find the other side.
  • If the value before the aspect constraint ratio is the same as the edge, it will be ignored. If the value before the aspect constraint ratio is different, it will be calculated according to the proportional value. Example: width =100dp, w, 1:10, so again using width as a reference, find h.
  • The desired value (h) = known value * ratio (1/10), h= 10DP. As shown in figure

—

  • Do you understand? Now reverse it. Give the case of fixed height H on one side. To verify w= 0DP h= 100DP spread full, aspect ratio: W, 1:10. Constraint is different from fixed edge, then according to the conclusion: take H as the reference edge, calculate the value of W and: w=h/proportion (1/10)

  • W = 0DP h= 100DP full, width to height ratio: H, 1:10.

If the constraint is the same as the fixed edge, the conclusion is ignored: the fixed edge is still taken as the reference edge, and the value of W is calculated and: w= H * ratio (1/10)

4. It has a fixed width and height value and is configured with a width and height constraint

In this case,

  1. If the width and height are fixed, the width and height constraint is invalid. Fixed values based on width and height are preferred.
  2. Set to wrAP_content, where the aspect ratio constraint is invalid, and android is fixed in width (adaptive)



5. Special case: Do not write W or H in the ratio of width to height configuration

  • When configuring the aspect ratio, you can omit w or h, for example, app:layout_constraintDimensionRatio=”1:20″

  • Which side should be used for reference in this case? You might think that the default is h, or W. That’s not true. The system will use the larger side of the scale as the long side reference value.

    • For example, 1:20 stands for width: height. When 20 is greater than 1, the height is used as a reference value to calculate the width.
    • The height is 0DP, spread all over the screen, so the width is 1/20 of the height.
<TextView android:layout_width="0dp" Android :layout_height="0dp" Android :text=" gravity="center" android:textSize="30sp" app:layout_constraintDimensionRatio="1:20" android:background="@color/colorPrimary" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/>Copy the code

—

  • To:app:layout_constraintDimensionRatio="20:1"
  • 20:1 stands for width: height. When 20 is greater than 1, the height is calculated using the width as the reference value.
  • The width because it’s 0DP all over the screen, the height is 1/20 of the height

All change is inseparable from its ancestor

  • It always works. With so many examples, it’s time for a final summary. If you already see the pattern. That would be great. It shows that the function of this paper has been achieved

Routine formula

  • Width to height ratio attribute value, write h, evaluate, use ➗ ratio. For example: h, 1:10 x=y/(1/10)
  • Width to height ratio attribute value, write W, evaluate, use * ratio. X =y * (1/10)
  • But you should also pay attention to the configuration of the control width and height property values. See below
  • At the same time, if h and W are omitted, the side with a large number is preferred as the reference edge

V. Concluding remarks

Here is a conclusion, this article is only the author’s point of view. Although the knowledge point is small, very inconspicuous. But it takes some thought to figure it out. I haven’t seen a detailed explanation online, at least so far. It just tells you the aspect ratio, but there’s no interpretation of the rules. As a result, when writing this property a few years ago, it took some time to try it out each time. But always can not find the law of pain.