如何使我的 xml 代码适合所有设备
Posted
技术标签:
【中文标题】如何使我的 xml 代码适合所有设备【英文标题】:How to make my xml code fit on all devices 【发布时间】:2022-01-23 23:21:28 【问题描述】:<?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_
android:layout_
android:background="@drawable/bgpic"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".LonelyMoviePageActivity">
<ImageView
android:id="@+id/movieImgView"
android:layout_
android:layout_
android:layout_marginTop="80dp"
android:layout_marginBottom="10dp"
tools:src="@drawable/gmp" />
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:gravity="center"
android:layout_marginBottom="10dp">
<TextView
android:id="@+id/movieName"
android:layout_
android:layout_
android:layout_marginEnd="10dp"
android:gravity="center"
android:textColor="@color/white"
tools:text="Gravity"
android:textSize="30sp"/>
<TextView
android:id="@+id/movieYear"
android:layout_
android:layout_
android:layout_gravity="center"
tools:text="(2016)"
android:textSize="30sp"
android:textColor="@color/white"/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_
android:layout_
android:gravity="center"
android:text="In a Series:"
android:textColor="@color/white"
android:textSize="20sp"
android:layout_marginEnd="10dp"
/>
<TextView
android:id="@+id/seriesOrNoText"
android:layout_
android:layout_
android:layout_gravity="center"
tools:text="No"
android:textSize="20sp"
android:textColor="@color/white"/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:gravity="center"
android:layout_marginBottom="70dp">
<TextView
android:layout_
android:layout_
android:gravity="center"
android:text="Rating:"
android:textColor="@color/white"
android:textSize="20sp"
android:layout_marginEnd="10dp"
/>
<TextView
android:id="@+id/movieRatingText"
android:layout_
android:layout_
android:layout_gravity="center"
tools:text="R"
android:textSize="20sp"
android:textColor="@color/white"/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:gravity="center"
android:layout_marginBottom="10dp">
<Button
android:id="@+id/btnPrevious"
android:layout_
android:layout_
android:layout_marginEnd="20dp"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:text="Previous"
android:background="@drawable/buttonbg"
/>
<Button
android:id="@+id/btnNext"
android:layout_
android:layout_
android:layout_marginStart="20dp"
android:text="Next"
android:background="@drawable/buttonbg"
/>
</LinearLayout>
</LinearLayout>
我在我的手机上尝试了该代码,它运行良好,但是,我在我妈妈的手机上尝试过,非常糟糕,知道如何让它适合所有设备在线网站说最好使用约束布局,但是,这会搞砸我所做的一切,任何帮助。我没有在 android studio 上安装模拟器,因为有些答案涉及它。
【问题讨论】:
Online sites say that it's better to use a constraint layout, however, that would mess up all I've done
总体而言,使用约束布局可能会更好,假设您知道如何使用它。使用像 70dp
这样的值太大了,无法假设它适用于所有设备
【参考方案1】:
删除所有LinearLayouts
并在顶层添加一个ConstraintLayout
,这将Views
相互约束,包括屏幕边缘。这意味着它将压缩 (在合理范围内) 并扩展以适应屏幕尺寸,因为无需硬编码 dp
尺寸
https://developer.android.com/training/constraint-layout
中间的按钮示例。
两条垂直线guideline1 @ 10%
和guideline2 @ 90%
btnNext
和 btnPrevious
两个按钮
两个按钮相互约束,从而将它们推到一起。
btnNext
被限制为guideline1
,因此将其推离屏幕左侧 10% (@ 10%)
。
btnPrevious
被限制为 guideline2
,因此将其推离屏幕右侧 10% (@ 90%)
。
<?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_
android:layout_>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline1"
android:layout_
android:layout_
android:orientation="vertical"
app:layout_constraintGuide_percent="0.10" <-- Make an invisible line at 10% mark on the screen.
/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_
android:layout_
android:orientation="vertical"
app:layout_constraintGuide_percent="0.90" <-- Make an invisible line at 90% mark on the screen.
/>
<Button
android:layout_marginEnd="5dp"
android:id="@+id/btnNext"
android:layout_
android:layout_
android:text="Next"
app:layout_constraintEnd_toStartOf="@id/btnPrevious" <-- Push to btnNext
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/guideline1" <-- Push to 10% mark of the screen.
/>
<Button
android:layout_marginStart="5dp"
android:id="@+id/btnPrevious"
android:layout_
android:layout_
app:layout_constraintStart_toEndOf="@id/btnNext" <-- Push to btnPrevious
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/guideline2" <-- Push to 90% mark of the screen.
android:text="Previous"/>
</androidx.constraintlayout.widget.ConstraintLayout>
【讨论】:
如果我在同一行上有两个项目,例如下一个按钮和上一个按钮,则在使用约束布局时,我永远无法将它们放在中心 当然可以,为什么你认为你不能? @MarkGeorge 只是从您的页边距猜测您在两个按钮上。您可以使用垂直指南。假设 1 为 10%,另一个为 90%。然后,您可以将两个按钮相互约束,将 1 个按钮约束到 10% 指导线,将另一个约束到 90% 指导线。 你能解释一下你刚才说的话吗 我已添加到我的答案中。【参考方案2】:可扩展性的诀窍是永远不要在视图上硬编码 dp 值。 而是使用 ConstraintLayout 并约束您的视图。 我建议查看“指南”视图,它在尝试制作可扩展的应用程序时非常有用。
【讨论】:
以上是关于如何使我的 xml 代码适合所有设备的主要内容,如果未能解决你的问题,请参考以下文章
如何让我的 CSS @media 代码在移动设备上运行以使我的网站具有响应性?