预览与模拟器不匹配

Question

我不知道为什么我的 Android 布局与模拟器不匹配。有谁知道为什么会发生这种情况？

这是操作表的布局代码。未正确显示的部分位于最后一个线性布局中

这是我的 activity_login.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical"
    tools:context=".LoginActivity">

    <ImageView
        android:id="@+id/logo_image"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/logotitipdonk"
        android:transitionName="logo_image" />

    <TextView
        android:id="@+id/logo_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/bungee"
        android:text="Hello there, Welcome Back"
        android:textColor="#000"
        android:textSize="40sp"
        android:transitionName="logo_text" />

    <TextView
        android:id="@+id/slogan_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sign In to continue"
        android:textSize="18sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:orientation="vertical">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/username"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/password"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            app:passwordToggleEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword" />
        </com.google.android.material.textfield.TextInputLayout>

        <Button
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_margin="5dp"
            android:background="#00000000"
            android:elevation="0dp"
            android:text="Forget Password?" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="#000"
            android:text="GO"
            android:textColor="#fff" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_margin="5dp"
            android:background="#00000000"
            android:elevation="0dp"
            android:text="New User? SIGN UP"
            android:textColor="#000" />

    </LinearLayout>
</LinearLayout>

This is my build gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"
    defaultConfig {
        applicationId "com.example.titipdonk"
        minSdkVersion 26
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.13'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'com.google.android.material:material:1.1.0'
}

我的安卓模拟器预览：

编辑：除了针对这个特定问题的修复之外，还有人知道为什么预览与手机上实际显示的方式不匹配吗？

Answer 1

以下是我对您的代码的建议：

1. 您在 android studio 预览中的布局大小应与 AVD 的屏幕大小匹配。

2. 不要对每个组件使用绝对高度和宽度，例如，

   android:layout_width="30dp"
   
   android:layout_height="40dp"
   

改为使用，

android:layout_width="match_parent/fill_parent/wrap_content"

android:layout_height="match_parent/fill_parent/wrap_content"

1. 当您使用绝对高度和宽度（例如 300dp 或 400dp）时，组件将在每个屏幕尺寸上以不同方式显示，并且它们也可能超出屏幕范围

2. 您还可以使用填充、边距和重力来定位组件。

在您的代码中使用layout_width="match_parent"，然后使用gravity="center/left/right"