Xamarin 控件相互堆叠答案

【问题标题】：Xamarin Controls piling on top of each otherXamarin 控件相互堆叠
【发布时间】：2018-09-16 21:19:18
【问题描述】：

我是 Xamarin 的新手，我在这里看到了类似的教程： https://docs.microsoft.com/en-us/xamarin/android/get-started/hello-android/hello-android-quickstart?tabs=vswin

并且 axml 设计器应该将控件“捕捉”到您列出的其他控件的边框，但我的不是这样工作的。它只是将它们全部堆叠在一起。任何线索如何解决这个问题？我已经搜索了一段时间，但似乎没有其他人遇到这个问题。

例如，它们都只是被放置在窗格的左上角，即使“正确”放置在另一个控件的底部，它们也只是对齐到左上角。

编辑：共享 XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
android:minWidth="25px"
android:minHeight="25px"
tools:gridSpec="1|8|#0093eeff|K:#ee8700ff:16,l:72,l:16,r|S:#83ee00ff:16,0,l:16,56,l:16,0,r">
<TextView
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="25px"
    android:minHeight="25px"
    android:id="@+id/textView1"
    android:layout_toLeftOf="@id/textView1"
    android:layout_toRightOf="@id/editText1" />
<TextView
    android:text="Text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/PhoneNumberText"
    android:id="@+id/textView2" />
<Button
    android:text="Translate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/PhoneNumberText"
    android:id="@+id/TranslateButton"
    android:layout_above="@id/PhoneNumberText" />
<EditText
    android:layout_height="wrap_content"
    android:layout_below="@id/PhoneNumberText"
    android:id="@+id/PhoneNumberText"
    android:layout_toLeftOf="@id/textView1"
    android:layout_marginTop="0.0dp"
    android:layout_marginBottom="0.0dp"
    android:text="1-855-xamarin"
    android:layout_width="wrap_content" />
</RelativeLayout>

【问题讨论】：

分享你的xml代码
@Yupi 共享 xml。
有趣的是，我只是遇到了这个问题，我在 Chrome 之间切换并查看它，然后返回网站和 Visual Studio 上的说明。我正在阅读这篇文章并回到 VS，突然它们不再堆叠。他们都在使用 layout_below 并且它刚刚开始工作。我猜是 Xamarin 或 VS 中的某种错误。
我遇到了这个问题并关闭了 activity_main.axml 并重新打开它，然后它们处于正确的位置。

标签： android xamarin xamarin.android

【解决方案1】：

Xamarin 控件相互叠加

您的.axml 有几个错误。

在你的textView2:

<TextView
    ...
    android:id="@+id/textView1"
    android:layout_toLeftOf="@id/textView1"
    android:layout_toRightOf="@id/editText1" />
//I didn't find where you define the id -- editText1

请注意：循环依赖不能存在于RelativeLayout

您想要实现的布局是什么？

类似于您在上述链接中发布的图片？

如果是这样，您可以将布局文件修改为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:text="Enter a Phoneword:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/PhoneNumberText"
        android:text="1-855-XAMARIN" />
    <Button
        android:text="Translate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/TranslateButton" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/TranslatedPhoneWord" />
</LinearLayout>

【讨论】：

所以，我一直在讨论这个问题，现在我想知道为什么这适用于“LinearLayout”而不是“RelativeLayout”。 MsDoc 有相对的，所以我有点困惑为什么它没有按照本教程看起来应该的方式工作。
@York 你能解释一下为什么 MS 在他们的文档中使用 RelativeLayout 并且它似乎有效，但为什么在这种情况下它不起作用？
@antikbd，对于这个Phoneword sample，MS 使用LinearLayout，而不是RelativeLayout。
@York 但是this screenshot 使用RelativeLayout 显示他们？
@antikbd，你可以使用RelativeLayout 来做这个布局文件。但是为了避免控件相互叠加的问题，请使用android:layout_below="@id/textView"作为您发布的图片，更多详细信息请参考official document。

【解决方案2】：

我遇到了同样的问题并解决了阅读教程中的注释：

较新版本的 Visual Studio 包含略有不同的应用模板。
Instead of activity_main.axml, the layout is in content_main.axml.
The default layout will be a RelativeLayout. For the rest of the steps on this page to work you should change the <RelativeLayout> tag
添加另一个属性 android:orientation="vertical" 到 LinearLayout 开始标签。

进行这些更改解决了我的问题

【讨论】：