简体   繁体   English

左上角的 ConstraintLayout 视图

[英]ConstraintLayout views in top left corner

Every time I create views like Button and TextView in ConstraintLayout , they all get stuck at the top corner instead of where I placed them.每次我在ConstraintLayout创建像ButtonTextView这样的视图时,它们都会卡在顶角而不是我放置它们的位置。

I tried to create new activities and change the emulator, but the result is still the same.我尝试创建新活动并更改模拟器,但结果仍然相同。

This is a screenshot of what's happening:这是正在发生的事情的屏幕截图:

在此处输入图片说明

What may be the issue?可能是什么问题?

As stated in Constraint Layout guides :约束布局指南中所述

If a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).如果在设备上运行布局时视图没有约束,则会在位置 [0,0](左上角)绘制。

You must add at least one horizontal and one vertical constraint for the view.您必须为视图添加至少一个水平约束和一个垂直约束。

I guess you haven't applied any constraints.我猜你没有应用任何限制。

Either manually apply constraints to the view, or let the layout editor do it for you using "Infer constraints" button:手动将约束应用于视图,或者让布局编辑器使用“推断约束”按钮为您完成:

在此处输入图片说明

When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints... this is only to make editing easier当您将视图放入布局编辑器时,即使它没有约束,它也会留在您离开的位置......这只是为了使编辑更容易

In other words, the View will "stay where you leave it" until you add constraints.换句话说,视图将“留在你离开的地方”,直到你添加约束。

The reason it looks different in the Preview vs your app is because anything in your XML with tools: isgoing to be removed from the code when your app runs .它在预览版与您的应用程序中看起来不同的原因是因为您的 XML 中的任何带有tools:将在您的应用程序运行时从代码中删除 These options are only for the Android Studio layout editor, not representative of what you should expect to see when the code runs.这些选项仅适用于 Android Studio 布局编辑器,并不代表您在代码运行时应该看到的内容。

And it may be troublesome for beginners because对于初学者来说可能会很麻烦,因为

a missing constraint won't cause a compilation error缺少约束不会导致编译错误

However然而

the Layout Editor indicates missing constraints as an error in the toolbar.布局编辑器在工具栏中将缺少约束指示为错误。 To view the errors and other warnings, click Show Warnings and Errors (red button with number).要查看错误和其他警告,请单击显示警告和错误(带有数字的红色按钮)。 To help you avoid missing constraints, the Layout Editor can automatically add constraints for you with the Autoconnect and infer constraints features为了帮助您避免遗漏约束,布局编辑器可以使用自动连接和推断约束功能为您自动添加约束

More details 更多细节

A quick, easy way to fix this is to click on the component (TextView, ImageView, etc.) and click the infer constraints button.解决此问题的一种快速简便的方法是单击组件(TextView、ImageView 等)并单击推断约束按钮。 It looks like 2 yellow plus signs.它看起来像 2 个黄色加号。

infer constraints image推断约束图像

推断约束图像

add this in xml to the button etc将此在xml中添加到按钮等

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.57"

then play with it in the design.然后在设计中使用它。

Good luck!祝你好运! :) :)

Basically this type of problem happens when you use ConstraintLayout .基本上,当您使用ConstraintLayout时会发生这种类型的问题。

  • So Go to Preview From Android Studio.所以去从 Android Studio预览

  • Select That button you want to set at the specific position选择要设置在特定位置的那个按钮

  • At last just click the infer constrains button as i mention in the picture below on a red circle.最后,只需单击我在下图中红色圆圈中提到的推断约束按钮。

https://i.imgur.com/sDu1ghP.jpg

Thats All run the project and see magic这就是所有运行项目并看到魔法

Thank you谢谢

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM