android - Android应用无法针对小型设备正确缩放

我正在制作一个Android应用程序，其中某些布局无法正确缩放.cardviews在每个视图上发生冲突，我知道这是因为硬编码像素，但是如果不这样做，我如何实现这种类型的输出。

这是我的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>

这是所需的输出和输出即时消息：




请帮我解决这个问题！

最佳答案

如果您不熟悉android，建议您从更简单的布局开始，因为ConstraintLayout有点棘手。它试图同时做所有事情，这使得使用起来很复杂。请尝试使用LinearLayout。我试图编辑您的布局，这就是我得到的。

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