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

Question

我有以下约束布局，它在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_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="143dp"
    android:layout_height="143dp"
    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_width="143dp"
    android:layout_height="34dp"
    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_width="143dp"
    android:layout_height="34dp"
    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_width="143dp"
    android:layout_height="143dp"
    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_width="104dp"
    android:layout_height="45dp"
    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_width="105dp"
    android:layout_height="45dp"
    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_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="16dp"
    android:layout_height="wrap_content"
    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_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="16dp"
    android:layout_height="wrap_content"
    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_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="200dp"
    android:layout_height="52.39dp"
    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_width="200dp"
    android:layout_height="52.39dp"
    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_width="200dp"
    android:layout_height="52.39dp"
    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_width="197dp"
    android:layout_height="52.39dp"
    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_width="197dp"
    android:layout_height="52.39dp"
    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_width="197dp"
    android:layout_height="52.39dp"
    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_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="228dp"
    android:layout_height="36dp"
    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_width="182dp"
    android:layout_height="67dp"
    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_width="match_parent"
    android:layout_height="60dp"
    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_width="45dp"
    android:layout_height="40dp"
    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>

Answer 1

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

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

但是看着gauge2。

<pl.pawelkleczkowski.customgauge.CustomGauge
    android:id="@+id/gauge2"
    android:layout_width="143dp" <-- You are assuming the screen is this wide.
    android:layout_height="143dp" <-- 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 值进行微调。

Answer 2

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