android:gravity="center" 问题，预览与模拟器不同

Question

目前，我有这个页面的代码。

但我的预览应该是我的按钮位于后半部分布局的中心，但在我的模拟器中，它仍显示在布局的顶部。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <RelativeLayout
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/background_profile">

        <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_img"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/default_person_icon"
                app:civ_border_color="@android:color/black"
                app:civ_border_width="2dp"
                android:layout_centerInParent="true"
                android:layout_marginTop="100dp"/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="User Email"
                android:textSize="28sp"
                android:textColor="@android:color/white"
                android:layout_below="@+id/profile_img"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"/>
    </RelativeLayout>
    <LinearLayout
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

        <Button
                android:id="@+id/btn_change_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Change Password"
                app:cornerRadius="50dp"
                android:layout_marginStart="40dp"
                android:layout_marginEnd="40dp"/>

        <Button
                android:id="@+id/btn_sign_out"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Sign Out"
                app:cornerRadius="50dp"
                android:layout_marginStart="40dp"
                android:layout_marginEnd="40dp"/>

    </LinearLayout>

</LinearLayout>

这里是预览图

https://i.stack.imgur.com/QLaot.jpg

这是模拟器的图像

https://i.stack.imgur.com/ED3FP.jpg

Answer 1

不同的手机有不同的屏幕尺寸，在您的布局中，您在视图上使用固定尺寸（例如，固定尺寸为 android:layout_width="100dp"），结果是在一个屏幕上看起来不错（您的 android studio 预览屏幕）在另一个屏幕（您的实际手机）上看起来不太好。

如果您想创建一种布局来支持所有屏幕尺寸，您可以使用 ConstraintLayout 与 guidelines 和 Chains 来支持不同的屏幕尺寸。

以下是使用 ConstaintLayout 的示例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  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"
  tools:context=".MainActivity">


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".5" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline7"
    app:layout_constraintEnd_toStartOf="@+id/guideline9"
    app:layout_constraintStart_toStartOf="@+id/guideline8"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars[1]" />

<TextView
    android:id="@+id/textView9"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Email"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toBottomOf="@+id/imageView2" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline9"
    app:layout_constraintStart_toStartOf="@+id/guideline8"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/guideline9"
    app:layout_constraintStart_toStartOf="@+id/guideline8"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".1" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".9" />
</androidx.constraintlayout.widget.ConstraintLayout>

这是它的外观（我从布局编辑器中附加了一张图片，以便您查看约束和指南）：

Answer 2

您可以使用标签android:layout_weight，这样您就不必担心不同的屏幕尺寸。在这里，我使用android:layout_weight, android:layout_gravity 和android:gravity 制作了一个示例，用于制作您需要的结构。希望它可以帮助你。结构截图为here。

您可以从here 获得更多关于android:layout_weight 的参考资料。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_dark"
        >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/profile_picture"
            android:src="@drawable/user_profile_picture"
            android:layout_centerInParent="true"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/profile_picture"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="User Email"
            android:textColor="@android:color/white"
            android:textSize="28sp" />
    </RelativeLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">
            <Button
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:id="@+id/btn_change_password"
                android:layout_gravity="bottom"
                android:text="change password"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">
            <Button
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:id="@+id/btn_sign_out"
                android:layout_gravity="top"
                android:text="sign out"/>

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Answer 3

你似乎做得对。我猜你只是错过了在父标签中添加 weightSum。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:weightSum="2"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/background_profile">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_img"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/default_person_icon"
            app:civ_border_color="@android:color/black"
            app:civ_border_width="2dp"
            android:layout_centerInParent="true"
            android:layout_marginTop="100dp" a/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User Email"
            android:textSize="28sp"
            android:textColor="@android:color/white"
            android:layout_below="@+id/profile_img"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"/>
    </RelativeLayout>
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:id="@+id/btn_change_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Change Password"
            app:cornerRadius="50dp"
            android:layout_marginStart="40dp"
            android:layout_marginEnd="40dp"/>

        <Button
            android:id="@+id/btn_sign_out"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Sign Out"
            app:cornerRadius="50dp"
            android:layout_marginStart="40dp"
            android:layout_marginEnd="40dp"/>

    </LinearLayout>

</LinearLayout>

这似乎使它对我有用。万事如意！