ConstraintLayout 不缩放以适应各种屏幕尺寸

Posted 2023-02-23

【中文标题】ConstraintLayout 不缩放以适应各种屏幕尺寸

【英文标题】：ConstraintLayout not scaling to adjust for various screen sizes

【发布时间】：2022-01-24 00:57:11

【问题描述】：

我有以下约束布局，它在Pixel 4 XL 上运行良好。 在测试时，它似乎适用于 AVD 中的许多不同设备。

尽管，当我的一个朋友在Pixel 5 上尝试它时，它似乎全部被压扁并重叠。我仍然在考虑约束布局和屏幕缩放，想知道是否有人可以帮我一个大忙，看看下面的布局文件，看看我可能哪里出错了？非常感谢！如果您需要任何其他信息/屏幕截图等，请告诉我。非常乐意提供。

<?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:id="@+id/coordinatorLayout"
 android:layout_
 android:layout_
 android:orientation="vertical">

 <ImageView
    android:id="@+id/imageView2"
    android:layout_
    android:layout_
    android:layout_centerInParent="true"
    android:scaleType="centerCrop"
    android:src="@drawable/minabackground"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />
 
 <pl.pawelkleczkowski.customgauge.CustomGauge
    android:id="@+id/gauge2"
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:layout_marginStart="40dp"
    android:layout_marginTop="59dp"
    android:paddingLeft="10dp"
    android:paddingTop="10dp"
    android:paddingRight="10dp"
    android:paddingBottom="10dp"
    app:gaugeEndValue="800"
    app:gaugePointEndColor="@color/md_blue_800"
    app:gaugePointStartColor="@color/md_blue_300"
    app:gaugeStartAngle="135"
    app:gaugeStartValue="0"
    app:gaugeStrokeCap="ROUND"
    app:gaugeStrokeColor="@color/md_grey_400"
    app:gaugeStrokeWidth="10dp"
    app:gaugeSweepAngle="270"
    app:layout_constraintBottom_toTopOf="@+id/imageView"
    app:layout_constraintEnd_toStartOf="@+id/gauge3"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView3" />

 <TextView
    android:id="@+id/explainguage1"
    android:layout_
    android:layout_
    android:layout_marginStart="40dp"
    android:layout_marginBottom="5dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:maxLines="2"
    android:text="PRICE VS 24HR L/H:"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toTopOf="@+id/gauge2"
    app:layout_constraintStart_toStartOf="parent" />

 <TextView
    android:id="@+id/explainguage"
    android:layout_
    android:layout_
    android:layout_marginEnd="40dp"
    android:layout_marginBottom="5dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:maxLines="2"
    android:text="PRICE VS ATL/ATH:"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toTopOf="@+id/gauge3"
    app:layout_constraintEnd_toEndOf="@+id/imageView2" />

 <pl.pawelkleczkowski.customgauge.CustomGauge
    android:id="@+id/gauge3"
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:layout_marginTop="60dp"
    android:layout_marginEnd="40dp"
    android:paddingLeft="10dp"
    android:paddingTop="10dp"
    android:paddingRight="10dp"
    android:paddingBottom="10dp"
    app:gaugeEndValue="800"
    app:gaugePointEndColor="@color/md_blue_800"
    app:gaugePointStartColor="@color/md_blue_300"
    app:gaugeStartAngle="135"
    app:gaugeStartValue="0"
    app:gaugeStrokeCap="ROUND"
    app:gaugeStrokeColor="@color/md_grey_400"
    app:gaugeStrokeWidth="10dp"
    app:gaugeSweepAngle="270"
    app:layout_constraintBottom_toTopOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView3" />

 <TextView
    android:id="@+id/priceresult"
    android:layout_
    android:layout_
    android:layout_marginStart="9dp"
    android:layout_marginLeft="9dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:maxLength="5"
    android:text=""
    android:textColor="@color/white"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView3"
    app:layout_constraintStart_toStartOf="@+id/imageView3"
    app:layout_constraintTop_toTopOf="@+id/imageView3"
    tools:layout_conversion_absoluteHeight="75dp"
    tools:layout_conversion_absoluteWidth="117dp" />

 <TextView
    android:id="@+id/percentageresult"
    android:layout_
    android:layout_
    android:layout_marginStart="2dp"
    android:layout_marginLeft="2dp"
    android:layout_marginEnd="10dp"
    android:layout_marginRight="10dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:maxLength="5"
    android:text=""
    android:textColor="@color/white"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView3"
    app:layout_constraintEnd_toEndOf="@+id/imageView3"
    app:layout_constraintStart_toEndOf="@+id/priceresult"
    app:layout_constraintTop_toTopOf="@+id/imageView3"
    tools:layout_conversion_absoluteHeight="75dp"
    tools:layout_conversion_absoluteWidth="117dp" />

 <TextView
    android:id="@+id/dailylow"
    android:layout_
    android:layout_
    android:layout_alignBottom="@+id/gauge2"
    android:layout_centerHorizontal="true"
    android:layout_marginStart="20dp"
    android:layout_marginLeft="20dp"
    android:maxLength="5"
    android:text="0.00"
    android:textColor="@color/lightgrey"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/gauge2"
    app:layout_constraintEnd_toEndOf="@+id/gauge2"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/gauge2"
    app:layout_constraintTop_toTopOf="@+id/gauge2"
    app:layout_constraintVertical_bias="0.491" />

 <TextView
    android:id="@+id/dailyhigh"
    android:layout_
    android:layout_
    android:layout_alignBottom="@+id/gauge2"
    android:layout_centerHorizontal="true"
    android:layout_marginStart="2dp"
    android:layout_marginLeft="2dp"
    android:layout_marginEnd="20dp"
    android:layout_marginRight="20dp"
    android:maxLength="5"
    android:text="0.00"
    android:textColor="@color/lightgrey"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/gauge2"
    app:layout_constraintEnd_toEndOf="@+id/gauge2"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toEndOf="@+id/dailylow"
    app:layout_constraintTop_toTopOf="@+id/gauge2"
    app:layout_constraintVertical_bias="0.491" />

 <TextView
    android:id="@+id/slash"
    android:layout_
    android:layout_
    android:layout_alignBottom="@+id/gauge2"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="/"
    android:textColor="@color/lightgrey"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/gauge2"
    app:layout_constraintEnd_toStartOf="@+id/dailyhigh"
    app:layout_constraintHorizontal_bias="0.555"
    app:layout_constraintStart_toEndOf="@+id/dailylow"
    app:layout_constraintTop_toTopOf="@+id/gauge2"
    app:layout_constraintVertical_bias="0.491" />

 <TextView
    android:id="@+id/alltimelow"
    android:layout_
    android:layout_
    android:layout_alignBottom="@+id/gauge2"
    android:layout_centerHorizontal="true"
    android:layout_marginStart="20dp"
    android:layout_marginLeft="20dp"
    android:maxLength="5"
    android:text="0.00"
    android:textColor="@color/lightgrey"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/gauge3"
    app:layout_constraintEnd_toEndOf="@+id/gauge3"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/gauge3"
    app:layout_constraintTop_toTopOf="@+id/gauge3"
    app:layout_constraintVertical_bias="0.491" />

 <TextView
    android:id="@+id/alltimehigh"
    android:layout_
    android:layout_
    android:layout_alignBottom="@+id/gauge2"
    android:layout_centerHorizontal="true"
    android:layout_marginEnd="20dp"
    android:layout_marginRight="20dp"
    android:maxLength="5"
    android:text="0.00"
    android:textColor="@color/lightgrey"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/gauge3"
    app:layout_constraintEnd_toEndOf="@+id/gauge3"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toEndOf="@+id/alltimelow"
    app:layout_constraintTop_toTopOf="@+id/gauge3"
    app:layout_constraintVertical_bias="0.491" />

 <TextView
    android:id="@+id/slash2"
    android:layout_
    android:layout_
    android:layout_alignBottom="@+id/gauge2"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="/"
    android:textColor="@color/lightgrey"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/gauge3"
    app:layout_constraintEnd_toStartOf="@+id/alltimehigh"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/alltimelow"
    app:layout_constraintTop_toTopOf="@+id/gauge3"
    app:layout_constraintVertical_bias="0.491" />

 <ImageView
    android:id="@+id/imageView"
    android:layout_
    android:layout_
    android:layout_marginBottom="32dp"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintStart_toEndOf="@+id/imageView2"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@drawable/largeroundedbox2"
    tools:visibility="visible" />

 <TextView
    android:id="@+id/marketcap"
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:layout_marginEnd="6dp"
    android:layout_marginRight="6dp"
    android:layout_marginBottom="150dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:text=""
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

 <TextView
    android:id="@+id/circsupply"
    android:layout_
    android:layout_
    android:layout_marginEnd="6dp"
    android:layout_marginRight="6dp"
    android:layout_marginBottom="44dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:text=""
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

 <TextView
    android:id="@+id/volume"
    android:layout_
    android:layout_
    android:layout_marginEnd="6dp"
    android:layout_marginRight="6dp"
    android:layout_marginBottom="96dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:text=""
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

 <TextView
    android:id="@+id/volumeheader"
    android:layout_
    android:layout_
    android:layout_marginStart="6dp"
    android:layout_marginLeft="6dp"
    android:layout_marginBottom="96dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:text="24HR VOLUME:"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

 <TextView
    android:id="@+id/circsupplyheader"
    android:layout_
    android:layout_
    android:layout_marginBottom="44dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:text="CIRC SUPPLY:"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.028"
    app:layout_constraintStart_toStartOf="parent" />

 <TextView
    android:id="@+id/marketcapheader"
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:layout_marginStart="6dp"
    android:layout_marginLeft="6dp"
    android:layout_marginBottom="150dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:maxLines="2"
    android:text=""
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

 <ImageView
    android:id="@+id/imageView3"
    android:layout_
    android:layout_
    android:layout_marginTop="66dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.497"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView5"
    app:srcCompat="@drawable/smallpricebox" />

 <TextView
    android:id="@+id/explainprice"
    android:layout_
    android:layout_
    android:layout_marginStart="-1dp"
    android:layout_marginTop="30dp"
    android:fontFamily="@font/syncopatereg"
    android:gravity="center"
    android:maxLines="2"
    android:text="CURRENT PRICE + 24HR CHANGE:"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView5" />

 <ImageView
    android:id="@+id/imageView4"
    android:layout_
    android:layout_
    android:layout_marginTop="50dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.497"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:srcCompat="@drawable/minapluslogo" />

 <ImageView
    android:id="@+id/imageView5"
    android:layout_
    android:layout_
    android:layout_marginTop="32dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView4"
    app:srcCompat="@drawable/marketdataheader" />

 <com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator
    android:layout_
    android:layout_
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:numberOfDots="2"
    app:selectedDotIndex="0" />

</androidx.constraintlayout.widget.ConstraintLayout>

【参考方案1】：

您有很多硬编码的大 dp 值。 width/height/margins/padding 都会导致每个设备的输出不同。使用 ConstraintLayout 时，您走在正确的轨道上，但您也不会通过拥有所有这些大的 dp 值来让它发挥作用。

例如 imageView2 看起来不错，没有大的 dp 值，它的大小也由它的约束有效地定义。

但是看着gauge2。

<pl.pawelkleczkowski.customgauge.CustomGauge
    android:id="@+id/gauge2"
    android:layout_ <-- You are assuming the screen is this wide.
    android:layout_ <-- You are assuming the screen is this tall.
    android:layout_centerHorizontal="true"
    android:layout_marginStart="40dp" <-- You are assuming you have that much space from the Left.
    android:layout_marginTop="59dp" <-- You are assuming you have that much space from the Top.
    android:paddingLeft="10dp" <-- This I would say is fine its small enough that it wont be a problem along with the rest of the padding.
    android:paddingTop="10dp"
    android:paddingRight="10dp"
    android:paddingBottom="10dp"
    ...
/>

为小的调整设置较小的dp 值很好，并且可以让大多数屏幕上的一切看起来都很好。

但是当使用ConstraintLayout 时，允许它把东西放在需要经过适当约束的地方，然后使用dp 值进行微调。

【讨论】：

嗨。感谢您的回答和帮助，非常感谢。我将着手结束对约束布局中项目的硬编码高度和宽度的依赖。出于好奇，如果我想根据我希望它们在布局中的外观（与其他项目相比）调整项目的大小，我该怎么办？希望这是有道理的。非常感谢。

你会使用weights。这是一个答案，向您展示了如何包含结果图片。***.com/questions/48677839/…

谢谢。我已将您的标记为答案。我照你说的做了；删除了很多硬编码的值，而是让约束来完成这项工作，这里和那里只有很小的调整。我还使用了“match_parent”、“wrap_content”和一些指南（选择了百分比）的组合，以便将所有内容缩放到我想要的样子。最终结果是测试人员报告说没有重叠或挤压，并且对于许多不同的设备来说，一切看起来都很准确。

【参考方案2】：

移除硬编码值而不是高度和宽度使用填充将缩放以适应不同的屏幕尺寸

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。