如何使用ConstraintLayout在Android中为不同屏幕大小缩放UI元素

3

我的目标是使用Android中的ConstraintLayout设计一个布局,以适应不同的屏幕大小和设备。我经常读到应该使用dp和sp来设计布局。基本上我认为使用dp和sp不能使布局在不同的屏幕大小下可扩展,所以我不同意这种观点。在这里,您可以看到设计好的布局在5'和7'屏幕上的外观。

enter image description here 您可以清楚地看到(截图具有相同的缩放级别),在7'显示器上,使用dp指定高度和宽度的按钮和图像视图以及使用sp指定大小的文本视图看起来比5'设备上要小或者相同大小。但是,在7'显示器上,元素应该更大并且按比例缩放到显示器尺寸,我认为使用dp和sp无法实现这一点。

因此,我的问题是如何设计布局以使其按比例缩放到当前屏幕大小,即在小型设备上元素应该更小,在大屏设备上应该更大。

在这里,您可以看到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">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="265dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="ContentDescription" />







    <ImageButton
        android:id="@+id/commentButton"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@null"
        android:contentDescription="comment_Button"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.82"
        app:srcCompat="@mipmap/comment" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/comment"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.025"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.753" />



    <Button
        android:id="@+id/button"
        android:layout_width="163dp"
        android:layout_height="72dp"
        android:background="@drawable/custom_button"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#121212"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.867" />


    <TextView
        android:id="@+id/textViewS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Textview"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.012"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.581" />

</androidx.constraintlayout.widget.ConstraintLayout>

我很感激每个评论,非常感谢您的建议。


dp 用于显示具有相同大小的视图,无论像素密度如何。要相对于屏幕大小缩放视图,您需要为不同的屏幕大小创建不同的布局文件,并在其中使用 dp。 - Tayyab Mazhar
1
感谢Tayyab的评论。针对不同的屏幕尺寸创建不同的布局文件是一项巨大的工作,考虑到存在许多不同的屏幕尺寸。在Android Studio的布局编辑器中,有11种不同的平板电脑和智能手机屏幕尺寸。我有大约20个布局文件,这意味着我需要为一个应用程序创建11*20= 220个不同的布局文件。难道没有更有效的方法吗?我想我不是唯一遇到这些问题的人。 - VanessaF
1
你知道在Android应用程序的专业开发中通常如何完成吗?当涉及到为多个屏幕尺寸开发应用程序时,推荐的方法是什么,最佳实践是什么?对于我这样的初学者来说,我无法想象您必须为一个应用程序开发数百个布局配置(但我可能在这方面错了)。 - VanessaF
@TayyabMazhar:对我上次评论有什么看法吗?非常感谢您进一步的评论。 - VanessaF
我没有发表评论,因为已经有人提出了一个解决方案,与我的解决方案不同的是,你不需要创建多个布局文件。 - Tayyab Mazhar
显示剩余2条评论
2个回答

3

我的应用程序有不同尺寸的资源,为较小的屏幕缩放所有dp和sp值。例如,在res/values/dimens.xml中。

<dimen name="dp20">20dp</dimen>
<dimen name="dp24">24dp</dimen>
<dimen name="dp28">28dp</dimen>
<dimen name="dp30">30dp</dimen>
<dimen name="dp32">32dp</dimen>
<dimen name="dp36">36dp</dimen>

res/values-w320dp/dimens.xml中:

<dimen name="dp16">12dp</dimen>
<dimen name="dp18">14dp</dimen>
<dimen name="dp20">15dp</dimen>
<dimen name="dp24">18dp</dimen>
<dimen name="dp28">21dp</dimen>
<dimen name="dp30">23dp</dimen>
<dimen name="dp32">24dp</dimen>
<dimen name="dp36">27dp</dimen>

然后,当使用@dimen/dp16代替16dp来设置尺寸时,屏幕可以更好地进行缩放。您可以添加更多合格的资源以适应不同类型的屏幕。


1
感谢Dominik的回答。您是如何计算“转换”dp值的?您的方法在专业的Android开发中常用吗? - VanessaF
我刚刚使用了“直觉”来计算比例,在这种情况下是75%——我在更大的设备上绘制了一些视图,并在较小的设备上测试了缩放,直到我得到了期望的结果。我不知道它在专业开发中有多常见。 - Dominik Murzynowski
感谢您的回答和努力,Dominik(我已经点赞了)。您知道做这件事的推荐方法是什么吗? - VanessaF
感谢Dominik的进一步评论。 "百分比值"是什么意思,它们如何考虑不同的纵横比? - VanessaF
1
是的,我的方法基本上与提到的库中的sdp和ssp相同。然而,我不知道它的存在。 - Dominik Murzynowski
显示剩余3条评论

2

1
谢谢Mehul的回答(我已经点赞了)。您知道在Android应用程序的专业开发中通常如何完成吗?当涉及到为多个屏幕尺寸开发应用程序时,推荐的方法是什么,最佳实践是什么? - VanessaF
基本上我不想使用任何第三方库。在Android中是否也有官方的本地元素可以做到这一点? - VanessaF
如果您不想使用第三方,则必须为不同的分辨率添加不同维度的文件。@VanessaF - Mehul Kabaria
1
谢谢Mehul的评论。但这是官方推荐的方式吗?或者你知道你的方法是否也被用于专业编程? - VanessaF
我的最后一条评论有什么意见吗?我非常感谢你的每一个进一步的评论,Mehul。 - VanessaF
显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接