VS 2019中的布局设计未正确显示

时间:2019-10-19 19:24:36

标签: c# android visual-studio android-layout xamarin

(image of the design surface)我是android的新手,正在关注(https://docs.microsoft.com/en-us/xamarin/android/get-started/hello-android/hello-android-quickstart?pivots=windows)中的教程。问题是,当我调试程序并将其在手机上运行时,当我将元素从工具箱中拖到设计图面时,它们在Visual Studio BUT中彼此重叠显示。看起来很好,就像本教程一样。 我有Visual Studio 2019,我刚刚从Sdk管理器下载了我需要的所有东西,这是我的xml代码:

<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">
    <TextView
        android:text="Enter a password:"
        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" />
    <EditText
        android:layout_width="246.5dp"
        android:layout_height="59.0dp"
        android:layout_below="@id/textView1"
        android:id="@+id/PhoneNumberText"
        android:text="1-855-XAMARIN"
        android:layout_marginTop="29.0dp"
        android:layout_marginBottom="0.0dp" />
    <Button
        android:text="Translate"
        android:layout_width="141.5dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/PhoneNumberText"
        android:id="@+id/TranslateButton"/>
    <TextView
        android:text="Text"
        android:layout_width="171.0dp"
        android:layout_height="33.5dp"
        android:layout_below="@id/TranslateButton"
        android:id="@+id/TranslatedPhoneWord"/>
</RelativeLayout>

1 个答案:

答案 0 :(得分:0)

我添加了所有代码,对我而言效果很好。我第一次和你一样。创建新布局以自己输入而不是复制后,它可以正常工作。 enter image description here

这不会影响您的结果,也许VS在那个时候不能很好地接受您的代码。没关系,没关系。

如果您仍然希望在预览中正确显示它,则可以尝试使用LinearLayout,LinearLayout会沿线性方向(垂直或水平)显示子级View元素。 LinearLayout:https://docs.microsoft.com/en-us/xamarin/android/user-interface/layouts/linear-layout

更改:RelativeLayout

enter image description here

收件人:LinearLayout

enter image description here

通过这种方式,无需使用layout_below。