堆栈内存溢出
  简体   繁体   English

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

[英]ConstraintLayout not scaling to adjust for various screen sizes

 原文  2021-12-22 21:14:25  4   2    android/ android-studio/ android-layout/ android-constraintlayout

问题描述

I have the below Constraint Layout that works well on a Pixel 4 XL .我有以下在Pixel 4 XL上运行良好的约束布局。 It seems to scale for a number of different devices in AVD when tested.在测试时，它似乎适用于 AVD 中的许多不同设备。

Albeit, when a friend of mine tried it on Pixel 5 it appeared all squashed and overlapped.尽管如此，当我的一个朋友在Pixel 5上试用它时，它看起来都被压扁并重叠了。 I'm still getting my head around Constraint Layouts and screen scaling and was wondering if somebody could do me a huge favour and cast an eye over the below Layout file to see where I might be going wrong please?我仍然在考虑约束布局和屏幕缩放，想知道是否有人可以帮我一个大忙，看看下面的布局文件，看看我可能哪里出错了？ Many thanks.非常感谢。 Please let me know if you require any additional info/screenshots etc. More than happy to provide them.如果您需要任何其他信息/屏幕截图等，请告诉我。非常乐意提供。

<?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>

2 个解决方案

解决方案1
 0  2021-12-23 01:34:49

You have a lot of hardcoded large dp values.你有很多硬编码的大dp值。 width / height / margins / padding will all result in different outputs per device. width / height / margins / padding都会导致每个设备的输出不同。 You are on the right track using a ConstraintLayout , but you are also not letting it do its job by having all of theses large dp values.您使用ConstraintLayout走在正确的轨道上，但您也不会通过拥有所有这些大的dp值来完成其工作。

For example imageView2 looks fine, no large dp values and its size is effectively defined by what its constrained too.例如imageView2看起来很好，没有大的dp值，它的大小也由它的约束有效地定义。

But looking at gauge2 .但是看着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"
    ...
/>

Setting small dp values for small adjustments is fine and will keep everything looking good across most screens.为小的调整设置小的dp值很好，并且可以让大多数屏幕上的一切看起来都很好。

But when using the ConstraintLayout allow it to place things where they need to go through proper constraints, and then do the fine tuning with the dp values.但是当使用ConstraintLayout时，允许它通过适当的约束将东西放置到 go 需要的地方，然后使用dp值进行微调。

解决方案2
 0  2021-12-23 11:28:51

Remove hard code values instead of height and width use padding will scaling for different screen sizes删除硬代码值而不是高度和宽度使用填充将缩放以适应不同的屏幕尺寸

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 缩放ImageButton以适应各种屏幕尺寸 - Scaling ImageButtons for various screen sizes 缩放ImageButton以适应各种屏幕尺寸 - Scaling ImageButton for various screen sizes 在Android中编程各种屏幕尺寸 - Programming For Various Screen Sizes in Android 适用于各种屏幕尺寸的Android ImageButton - Android ImageButton for various screen sizes 将 GridView 调整为所有屏幕尺寸 - Adjust GridView to all Screen Sizes 适用于各种屏幕尺寸背景的缩放dpi位图 - Scaled dpi bitmaps for various screen sizes' backgrounds 具有各种屏幕尺寸的自定义评分栏 - Custom Rating Bar with various screen sizes Android：根据屏幕大小以编程方式调整大小 - Android: Adjust sizes programmatically according to screen size android 布局自动适应不同的屏幕尺寸 - android layout auto adjust to different screen sizes 调整具有不同屏幕尺寸的EditText和按钮 - adjust EditTexts and buttons with different screen sizes
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM