如何在 Visual Studio 中居中 android 应用程序属性？

Question

我在 Visual Studio 中进行了登录活动，并且在设计器选项卡中一切似乎都很好。但是当导出到物理设备时，一切都偏离了中心。我该如何解决这个问题？

以下是活动的 XML：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relativeLayout"
    android:background="@drawable/carbon"
    android:gravity="center">
    <Button
        android:layout_marginTop="360dp"
        android:layout_marginLeft="65dp"
        android:layout_width="250dp"
        android:fontFamily="sans-serif-medium"
        android:text="login"
        android:textSize="35px"
        android:id="@+id/loginButton"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_button"/>
    <ImageView
        android:layout_width="200px"
        android:layout_height="200px"
        android:layout_marginLeft="280px"
        android:layout_marginTop="80px"
        android:layout_marginRight="280px"
        android:layout_marginBottom="500px"
        android:src="@drawable/email1"/>
    <EditText
        android:id="@+id/username"
        android:layout_width="300dp"
        android:layout_height="47dp"
        android:layout_marginStart="97dp"
        android:layout_marginLeft="43dp"
        android:layout_marginTop="200dp"
        android:layout_marginEnd="12dp"
        android:layout_marginRight="43dp"
        android:layout_marginBottom="58dp"
        android:textColorHint="@android:color/black"
        android:hint="Email"
        android:ems="10"
        android:background="@drawable/rounded_edittext"
        android:inputType="textEmailAddress"
        android:alpha=".9"
        android:paddingLeft="60dp"/>
    <EditText
        android:id="@+id/password"
        android:layout_width="300dp"
        android:layout_height="47dp"
        android:layout_marginStart="97dp"
        android:layout_marginLeft="43dp"
        android:layout_marginTop="280dp"
        android:layout_marginEnd="12dp"
        android:layout_marginRight="43dp"
        android:layout_marginBottom="58dp"
        android:ems="10"
        android:textColorHint="@android:color/black"
        android:hint="Password"
        android:background="@drawable/rounded_edittext"
        android:inputType="textPassword"
        android:alpha=".9"
        android:paddingLeft="60dp"/>
    <ImageView
        android:layout_width="70px"
        android:layout_height="70px"
        android:layout_marginLeft="120px"
        android:layout_marginTop="415px"
        android:layout_marginBottom="415px"
        android:layout_marginRight="120px"
        android:src="@drawable/email"/>
    <ImageView
        android:layout_width="40px"
        android:layout_height="40px"
        android:layout_marginLeft="120px"
        android:layout_marginTop="590px"
        android:layout_marginBottom="415px"
        android:layout_marginRight="120px"
        android:src="@drawable/key"/>
    <TextView
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginLeft="155dp"
        android:layout_marginTop="150dp"
        android:textColor="#ffb702"
        android:text="Login"
        android:fontFamily="sans-serif-medium" 
        android:textSize="50px"/>
    <TextView
        android:layout_width="130dp"
        android:layout_height="30dp"
        android:layout_marginLeft="130dp"
        android:layout_marginTop="335dp"
        android:textColor="#ffb702"
        android:autoLink="all"
        android:linksClickable="true"
        android:textColorLink="#ffb702"
        android:text="Forgot Password?"
        android:fontFamily="sans-serif-medium" 
        android:textSize="30px"/>
</RelativeLayout>

StackOverflow 不允许我在不添加更多详细信息的情况下发布此问题，所以现在我将添加随机垃圾。 fjsfkdsfkshfksgklsjdlksdjlfklsdjfgjfkljflskfjslkjdfksjfskljfdkljfslkfjsfjsklfjslkfjsklfjslkfjdslkfjslkdjfslkfjslkfjdslkfjslkfjslkjfdslkjfslkfjslkdjfslkjflkjfsfjsdlkjflskjfjlskjfksjfksjfskfslfjldkjfsklfjlksdjfslkfjslkfjslkfjskfjskfjskjfsklfjslkjfldkjfldkjfdlkjflksdjfslkjfslkfjkldfjslkfjdlksj P>

下图显示了应用在真机上启动后会发生什么

Answer 1

你应该尝试添加

android:layout_gravity="center"

要居中的元素中的属性。我注意到所有元素都堆叠在彼此的顶部，也许您可​​以使用 LinearLayout 而不是 RelativeLayout。也可以试试 ConstraintLayout，它有很多功能，Google 提供了非常好的文档和示例here 和here

Answer 2

简而言之：

• 不要使用边距和固定值来对齐元素
• 建议使用ConstraintLayout
• 在习惯之后直接在文本中编辑XML-layout 通常比使用所见即所得编辑器更容易
• 永远不要使用px！请改用dp 和sp。 sp 用于文本大小
• 如果您需要横向或大/小屏幕的不同布局，请创建alternative layouts

您正在使用固定的边距值来对齐RelativeLayout 内的元素。这会导致设计仅在特定屏幕尺寸上看起来不错：Visual Studio 中的预览。

例子：

<Button
    android:layout_height="wrap_content"  
    android:layout_width="250dp"
    android:layout_marginTop="360dp"
    android:layout_marginLeft="65dp"
    android:text="login"
    />

Button 将始终通过从顶部获取 250dp 的边距和从左侧获取 65dp 的边距来对齐。值不变。无论您是在宽度为 300dp 的小型设备上还是在宽度为 1200dp 的大型平板电脑上执行应用程序。该按钮将始终距离屏幕左边框 65dp。

您需要删除大部分固定边距并对齐元素以创建灵活的布局 (see Google's recommendation)。您还应该完全停止使用px，而只使用dp 作为尺寸，使用sp 作为文本大小。正如其他用户所建议的，强烈建议使用ConstraintLayout。