Question

我正在制作一个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>

这是所需的输出，输出立即变为：

请帮助我解决这个问题！

Answer 1

如果您不熟悉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>

Answer 2

在Android中，开发Android应用程序时需要考虑不同屏幕尺寸的数量。

不同的手机具有不同的屏幕尺寸，在您的布局中，您使用的是固定尺寸的视图（例如，固定尺寸为50dp），结果是看起来效果不错一个屏幕（您的android studio预览屏幕）在另一屏幕（您的实际手机）上看起来效果不佳。

为解决您的问题，我建议将ConstraintLayout与guidelines和Chains结合使用以支持不同的屏幕尺寸。

以下是与您想要的布局相同的示例：

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

它看起来像这样：

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

2 个答案: