Android应用无法针对小型设备正确缩放
[英]Android app not scaling properly for small devices
问题描述
I am making an android app where a certain layout is not scaling properly.The cardviews are clashing over each, I know it is because of the hardcoded pixels but if I don't do that how can I achieve this type of output. 
我正在制作一个Android应用程序，其中某些布局无法正确缩放.cardviews在每个视图上发生冲突，我知道这是因为硬编码像素，但是如果不这样做，我如何实现这种类型的输出。
Here is my XML code: 这是我的XML代码：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/culinary"
android:layout_width="221dp"
android:layout_height="144dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
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.0">
<ImageView
android:id="@+id/imageView23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/culinary" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/music"
android:layout_width="161dp"
android:layout_height="146dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView25"
android:layout_width="143dp"
android:layout_height="133dp"
android:layout_gravity="center"
android:foregroundGravity="center"
app:srcCompat="@drawable/music" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/literature"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="400dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/culinary"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/literature" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/acting"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="0.072">
<ImageView
android:id="@+id/imageView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drama" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/design"
android:layout_width="122dp"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.571"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/music"
app:layout_constraintVertical_bias="0.009">
<ImageView
android:id="@+id/imageView17"
android:layout_width="114dp"
android:layout_height="105dp"
android:layout_gravity="center"
app:srcCompat="@drawable/fashion" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/handicrafts"
android:layout_width="99dp"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="400dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.974"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="@+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/handicraft" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/drawing"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="60dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="0.225">
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drawing2" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/photography"
android:layout_width="390dp"
android:layout_height="165dp"
android:layout_marginTop="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.533"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/handicrafts"
app:layout_constraintVertical_bias="0.034">
<ImageView
android:id="@+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/photography1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/miscellanous"
android:layout_width="77dp"
android:layout_height="124dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/acting"
app:layout_constraintHorizontal_bias="0.222"
app:layout_constraintStart_toEndOf="@+id/drawing"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="0.083">
<ImageView
android:id="@+id/imageView22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/misc" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Here is the desired output and the ouput im getting: 这是所需的输出和输出即时消息：
Please help me solve this problem! 请帮我解决这个问题！
2 个解决方案
解决方案1
3 已采纳 2019-07-11 16:56:10
If you're new to android I suggest starting with simpler layouts because ConstraintLayout is kinda tricky. 如果您不熟悉android，建议您从更简单的布局开始，因为ConstraintLayout有点棘手。 It's trying to be everything at once which makes it complicated to use. 它试图同时做所有事情，这使得使用起来很复杂。 Try LinearLayout instead. 请尝试使用LinearLayout。 I tried to edit your layout and here's what I got. 我试图编辑您的布局，这就是我得到的。
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="146dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/culinary"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView23"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/culinary" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/music"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView25"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:foregroundGravity="center"
app:srcCompat="@drawable/music" />
</android.support.v7.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="128dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/literature"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView26"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/literature" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/acting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drama" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/design"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView17"
android:layout_width="114dp"
android:layout_height="105dp"
android:layout_gravity="center"
app:srcCompat="@drawable/fashion" />
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.CardView
android:id="@+id/handicrafts"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/handicraft" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/drawing"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drawing2" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/photography"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/photography1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/miscellanous"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/misc" />
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</ScrollView>
解决方案2
2 2019-07-11 16:49:27
In Android, you need to consider the number of different screen sizes when developing an android application. 在Android中，开发Android应用程序时需要考虑不同屏幕尺寸的数量。
Different phones got different screen size , in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone). 不同的手机具有不同的屏幕尺寸 ，在布局中，您在视图上使用的是固定尺寸（例如，固定尺寸为50dp ），结果是在一个屏幕（Android Studio预览屏幕）上看起来可能不错另一个屏幕（您的实际电话）。
To solve your problem I would recommend using ConstraintLayout with guidelines and Chains to suport different screen sizes. 为了解决您的问题，我建议将ConstraintLayout与准则和Chains配合使用以支持不同的屏幕尺寸。
Here is an example of a layout that looks the same as you want: 这是一个外观与所需外观相同的示例：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="@+id/button6"
app:layout_constraintDimensionRatio=""
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="@+id/button" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="@+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toTopOf="@+id/button5" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="@+id/button8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button9"
app:layout_constraintTop_toTopOf="@+id/button8" />
<Button
android:id="@+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="8"
app:layout_constraintBottom_toBottomOf="@+id/button8"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintStart_toEndOf="@+id/button8"
app:layout_constraintTop_toTopOf="@+id/button8" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="4"
app:layout_constraintBottom_toBottomOf="@+id/button6"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintStart_toEndOf="@+id/button6"
app:layout_constraintTop_toTopOf="@+id/button6" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="3"
app:layout_constraintBottom_toTopOf="@+id/button7"
app:layout_constraintEnd_toStartOf="@+id/button5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="6"
app:layout_constraintBottom_toTopOf="@+id/button8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button6" />
<Button
android:id="@+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button7" />
</android.support.constraint.ConstraintLayout>
And it will look like this: 它看起来像这样：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Android应用中的布局位置无法针对不同设备正确缩放 - Layout positions in android app not scaling properly for different devices
在某些设备上，Android App UI太小 - Android App UI too small on some devices
小堆的Android设备 - Android devices with small heap
屏幕尺寸小，密度高？ 如何为此类设备开发android应用 - small Screen size with high in density? how to develop android app for such devices
Android GridView无法正确缩放 - Android GridView Not Scaling Properly
WebView无法在Android中正确缩放 - WebView not scaling Properly in Android
Android ListView无法正确缩放 - Android ListView not scaling properly
Android图片无法正确缩放 - Android images not scaling properly
Android针对不同设备的常规缩放 - Android general scaling for different devices
将Android应用程序扩展到屏幕 - Scaling android app to screen
相关标签