[英]Why does the design look different than what's shown in emulator in android studio?
I'm trying to make a game app on Android Studio and when I try to run my app on the emulator, it look different than what's shown on the design.我正在尝试在 Android Studio 上制作一个游戏应用程序,当我尝试在模拟器上运行我的应用程序时,它看起来与设计中显示的不同。 How can I fix this ?我怎样才能解决这个问题 ?
this is my layout xml code:这是我的布局 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
style="@android:style/Widget.DeviceDefault.Light.Button.Small"
android:layout_width="100dp"
android:layout_height="51dp"
android:background="@drawable/custom_button"
android:text="player1"
android:textAllCaps="false"
android:textSize="20sp"
tools:layout_editor_absoluteX="78dp"
tools:layout_editor_absoluteY="271dp" />
<Button
android:id="@+id/button2"
android:layout_width="100dp"
android:layout_height="51dp"
android:layout_marginBottom="280dp"
android:background="@drawable/custom_button"
android:text="player2"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
tools:layout_editor_absoluteX="78dp" />
<Button
android:id="@+id/button3"
android:layout_width="100dp"
android:layout_height="51dp"
android:background="@drawable/custom_button"
android:text="New"
android:textAllCaps="false"
android:textSize="20sp"
tools:layout_editor_absoluteX="78dp"
tools:layout_editor_absoluteY="334dp" />
<TextView
android:id="@+id/textView"
android:layout_width="100dp"
android:layout_height="51dp"
android:padding="11dp"
android:text="TextView"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="187dp"
tools:layout_editor_absoluteY="271dp" />
<TextView
android:id="@+id/textView2"
android:layout_width="100dp"
android:layout_height="51dp"
android:padding="11dp"
android:text="TextView"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="187dp"
tools:layout_editor_absoluteY="334dp" />
<TextView
android:id="@+id/textView3"
android:layout_width="100dp"
android:layout_height="51dp"
android:padding="15dp"
android:text="TextView"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="187dp"
tools:layout_editor_absoluteY="400dp" />
thanks in advance提前致谢
You need to constrain your views when using the ConstraintLayout.使用 ConstraintLayout 时需要约束您的视图。
Check the guide on building UI with it: https://developer.android.com/training/constraint-layout查看使用它构建 UI 的指南: https : //developer.android.com/training/constraint-layout
Also, to quickly have something close to what you see, click on this button to get the layout editor's best guess of constraints to keep the views where they are now.此外,要快速获得与您所看到的接近的内容,请单击此按钮以获取布局编辑器对约束的最佳猜测,以将视图保持在当前位置。
You are missing constraints on your views so in run time the position of them is not the same as the preview.您缺少对视图的约束,因此在运行时它们的位置与预览不同。
In addition , because different devices got different screen sizes you cant use fixed sizes on your views because it will just look different on different devices.此外,因为不同的设备有不同的屏幕尺寸,所以你不能在视图上使用固定尺寸,因为它在不同的设备上看起来会有所不同。
You can use ConstraintLayout with:您可以将 ConstraintLayout 用于:
app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.3"
And some Guidelines to achieve responsive layout:以及一些实现响应式布局的指南:
Here is an example:下面是一个例子:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
style="@android:style/Widget.DeviceDefault.Light.Button.Small"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="player1"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="@+id/guideline3"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintTop_toTopOf="@+id/guideline2"
app:layout_constraintWidth_percent="0.3" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="player2"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="@+id/textView"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toStartOf="@+id/button"
app:layout_constraintTop_toBottomOf="@+id/button3" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="New"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="@+id/textView"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toStartOf="@+id/button"
app:layout_constraintTop_toBottomOf="@+id/button" />
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
android:gravity="center"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="@+id/guideline2"
app:layout_constraintWidth_percent="0.3" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
android:gravity="center"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
android:gravity="center"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>
This will look like this:这将如下所示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.