ConstraintLayout 不缩放以适应各种屏幕尺寸
ConstraintLayout not scaling to adjust for various screen sizes
我有以下在 Pixel 4 XL
上运行良好的约束布局。
测试时,它似乎可以针对 AVD 中的许多不同设备进行扩展。
尽管如此,当我的一个朋友在 Pixel 5
上尝试它时,它似乎全部被压扁和重叠。我仍然在思考约束布局和屏幕缩放,想知道是否有人可以帮我一个大忙,看看下面的布局文件,看看我可能哪里出错了?非常感谢!如果您需要任何额外的 info/screenshots 等,请告诉我。非常乐意提供它们。
<?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>
您有很多硬编码的大 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
值进行微调。
删除硬编码值而不是高度和宽度使用填充将缩放以适应不同的屏幕尺寸
我有以下在 Pixel 4 XL
上运行良好的约束布局。
测试时,它似乎可以针对 AVD 中的许多不同设备进行扩展。
尽管如此,当我的一个朋友在 Pixel 5
上尝试它时,它似乎全部被压扁和重叠。我仍然在思考约束布局和屏幕缩放,想知道是否有人可以帮我一个大忙,看看下面的布局文件,看看我可能哪里出错了?非常感谢!如果您需要任何额外的 info/screenshots 等,请告诉我。非常乐意提供它们。
<?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>
您有很多硬编码的大 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
值进行微调。
删除硬编码值而不是高度和宽度使用填充将缩放以适应不同的屏幕尺寸