在模拟器和移动设备中查看时布局错位
Layout has been misplaced while view in emulator and mobile
我在 Android Studio 中实现登录屏幕时，设计看起来不错，但是在将应用程序构建到模拟器和移动设备之后，它看起来很奇怪，比如元素错位、拉伸和压缩.我正在使用不同尺寸的可绘制元素，因为我希望此应用支持多种分辨率的设备。
下图来自XML设计预览
下图为模拟器截图
下图来自Android设备
这里是 xml 设计 [link][4]
我在这里做错了什么，任何建议都会有所帮助
[4]: https://pastebin.com/d9MPen7c
问题是您没有正确设置约束。这就是为什么它在真实设备上看起来更糟的原因。
这是XML代码：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/tv_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:text="User Name"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/et_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_UserName" />
<TextView
android:id="@+id/tv_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:text="Password"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_UserName" />
<EditText
android:id="@+id/et_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="@id/iv_google_bt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_Password" />
<ImageView
android:id="@+id/iv_google_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/et_Password" />
<ImageView
android:id="@+id/iv_fb_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:layout_toStartOf="@+id/iv_google_bt"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/et_Password" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="@+id/iv_getstarted_login"
android:layout_width="0dp"
android:layout_height="75dp"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
app:layout_constraintTop_toBottomOf="@id/constraintLayout">
</ImageView>
<ImageView
android:id="@+id/imageView"
android:layout_width="176dp"
android:layout_height="172dp"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
app:layout_constraintTop_toTopOf="@+id/constraintLayout" />
<TextView
android:id="@+id/login_signup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="@dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/iv_getstarted_login" />
<TextView
android:id="@+id/notamem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="@dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/login_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
我已经放置了我的资源，例如 dimen、String 和 drawable。所以，请把你的资源换成我的。
这是我针对您的问题的示例代码。使用您自己的可绘制资源调整此代码中给定的静态值，如可绘制值。希望能对你有所帮助
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEBEB">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="@+id/view"
android:layout_width="300dp"
android:layout_height="350dp"
android:layout_centerInParent="true"
android:background="@drawable/rectangle_round_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</View>
<ImageView
android:id="@+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="@+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-45dp"
android:background="@mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="@id/view" />
<TextView
android:id="@+id/txtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="70dp"
android:text="Username/Email" />
<EditText
android:id="@+id/et_UserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtUsername"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="@+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/et_UserName"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="10dp"
android:text="Password" />
<EditText
android:id="@+id/et_Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtPassword"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<ImageButton
android:id="@+id/imgleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@id/view"
android:layout_alignBottom="@id/view"
android:layout_marginBottom="40dp"
android:layout_marginLeft="36dp"
android:background="@drawable/emoji"
android:layout_alignLeft="@id/view" />
<ImageButton
android:id="@+id/imgright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@id/view"
android:layout_alignBottom="@id/view"
android:layout_marginBottom="40dp"
android:layout_marginRight="36dp"
android:background="@drawable/emoji"
android:layout_alignRight="@id/view" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rectangle_round"
android:layout_below="@+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginTop="-25dp"
android:text="Get Started"
android:textAlignment="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="@id/view"/>
<TextView
android:id="@+id/txtNotAMemberYet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/view"
android:layout_centerHorizontal="true"
android:layout_marginTop="87dp"
android:text="Not a member yet"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toTopOf="@id/txtSignUp"
/>
<TextView
android:id="@+id/txtSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txtNotAMemberYet"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Sign Up"
android:textColor="#00BCD4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>
我在 Android Studio 中实现登录屏幕时，设计看起来不错，但是在将应用程序构建到模拟器和移动设备之后，它看起来很奇怪，比如元素错位、拉伸和压缩.我正在使用不同尺寸的可绘制元素，因为我希望此应用支持多种分辨率的设备。
下图来自XML设计预览
下图为模拟器截图
下图来自Android设备
这里是 xml 设计 [link][4]
我在这里做错了什么，任何建议都会有所帮助
[4]: https://pastebin.com/d9MPen7c
问题是您没有正确设置约束。这就是为什么它在真实设备上看起来更糟的原因。
这是XML代码：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/tv_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:text="User Name"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/et_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_UserName" />
<TextView
android:id="@+id/tv_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:text="Password"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_UserName" />
<EditText
android:id="@+id/et_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="@id/iv_google_bt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_Password" />
<ImageView
android:id="@+id/iv_google_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/et_Password" />
<ImageView
android:id="@+id/iv_fb_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:layout_toStartOf="@+id/iv_google_bt"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/et_Password" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="@+id/iv_getstarted_login"
android:layout_width="0dp"
android:layout_height="75dp"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
app:layout_constraintTop_toBottomOf="@id/constraintLayout">
</ImageView>
<ImageView
android:id="@+id/imageView"
android:layout_width="176dp"
android:layout_height="172dp"
android:contentDescription="@null"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
app:layout_constraintTop_toTopOf="@+id/constraintLayout" />
<TextView
android:id="@+id/login_signup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="@dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/iv_getstarted_login" />
<TextView
android:id="@+id/notamem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="@dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/login_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
我已经放置了我的资源，例如 dimen、String 和 drawable。所以，请把你的资源换成我的。
这是我针对您的问题的示例代码。使用您自己的可绘制资源调整此代码中给定的静态值，如可绘制值。希望能对你有所帮助
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEBEB">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="@+id/view"
android:layout_width="300dp"
android:layout_height="350dp"
android:layout_centerInParent="true"
android:background="@drawable/rectangle_round_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</View>
<ImageView
android:id="@+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="@+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-45dp"
android:background="@mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="@id/view" />
<TextView
android:id="@+id/txtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="70dp"
android:text="Username/Email" />
<EditText
android:id="@+id/et_UserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtUsername"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="@+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/et_UserName"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="10dp"
android:text="Password" />
<EditText
android:id="@+id/et_Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtPassword"
android:layout_alignStart="@+id/view"
android:layout_alignLeft="@+id/view"
android:layout_alignEnd="@+id/view"
android:layout_alignRight="@+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<ImageButton
android:id="@+id/imgleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@id/view"
android:layout_alignBottom="@id/view"
android:layout_marginBottom="40dp"
android:layout_marginLeft="36dp"
android:background="@drawable/emoji"
android:layout_alignLeft="@id/view" />
<ImageButton
android:id="@+id/imgright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@id/view"
android:layout_alignBottom="@id/view"
android:layout_marginBottom="40dp"
android:layout_marginRight="36dp"
android:background="@drawable/emoji"
android:layout_alignRight="@id/view" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rectangle_round"
android:layout_below="@+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginTop="-25dp"
android:text="Get Started"
android:textAlignment="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="@id/view"/>
<TextView
android:id="@+id/txtNotAMemberYet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/view"
android:layout_centerHorizontal="true"
android:layout_marginTop="87dp"
android:text="Not a member yet"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toTopOf="@id/txtSignUp"
/>
<TextView
android:id="@+id/txtSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txtNotAMemberYet"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Sign Up"
android:textColor="#00BCD4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>