android - 布局在预览中很好,但在虚拟/真实设备中混乱
问题描述
这是图片和xml文件。它在预览中看起来不错,但是当我在虚拟设备或真实设备上运行它时,布局变得一团糟。我尝试删除所有内容并再次执行此操作,但布局仍然一团糟。
下面的代码是布局的下半部分。
<android.support.constraint.ConstraintLayout
android:id="@+id/constraintLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/calcBtn"
app:layout_constraintVertical_bias="0.0">
<TextView
android:id="@+id/maltReq"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/lekton_reg"
android:text="0.00"
android:textColor="@android:color/background_light"
android:textSize="60sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/maltReqTV" />
<TextView
android:id="@+id/maltReqTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="65dp"
android:fontFamily="@font/opensans_regular"
android:text="Malt Required"
android:textColor="@android:color/background_light"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/lbBtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginBottom="41dp"
android:layout_marginEnd="60dp"
android:layout_marginTop="112dp"
android:background="@drawable/unit_btn_unclicked"
android:fontFamily="@font/lekton_reg"
android:text="LB"
android:textColor="@android:color/background_light"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="@+id/maltBillBtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/kgBtn"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/kgBtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginBottom="41dp"
android:layout_marginStart="12dp"
android:layout_marginTop="112dp"
android:background="@drawable/unit_btn_clicked"
android:fontFamily="@font/lekton_reg"
android:text="KG"
android:textColor="@android:color/background_light"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="@+id/maltBillBtn"
app:layout_constraintEnd_toStartOf="@+id/lbBtn"
app:layout_constraintStart_toEndOf="@+id/maltReq"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/maltBillBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:background="@drawable/btn_bg_flat"
android:drawablePadding="5dp"
android:drawableRight="@drawable/ic_keyboard_arrow_right_black_24dp4"
android:fontFamily="@font/open_sans_light"
android:text="MALT BILL"
android:textColor="@android:color/background_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
'
解决方案
您的问题是您的按钮是相对于底部按钮设置的位置 - 它在模拟器中看起来不错,因为您正在查看一种特定的尺寸。如果您的意图是始终与 对齐,则将@id/maltReq
按钮与 maltReq 对齐为 BottomToBottom 将比将它们锚定在屏幕底部的按钮顶部更好的响应式布局。
推荐阅读
- vue.js - 在 vue.js 的子组件中创建传递道具的本地副本?
- groovy - Groovy:如何按中间的数字对文本和数字数组进行排序
- javascript - return _.map(this.state.categoria, categoria => { function() } 没有返回
- unity3d - 用于平铺天空盒的自定义天空盒着色器
- python - Pandas Groupby with calculating ewm not working as expected
- java - 如何在java中将字符串转换为数字?但我不是在寻找 hashCode 因为它不会给出唯一的数字。至少我想要相同的数学逻辑
- database - 对于非常无模式的宽行来说,什么是好的数据存储?
- html - 将收音机与自定义收音机对齐
- ios - 如何保持 UNUserNotificationCenter 声音播放直到用户停止它
- java - 取消计划的计时器任务并创建另一个计划