时间戳

首页 > 解决方案 > 约束布局为不同的屏幕支持正确的边距和大小

android - 约束布局为不同的屏幕支持正确的边距和大小

问题描述

我正在尝试使用 ConstraintLayout 构建布局。我需要每个视图根据屏幕大小自行调整，而不需要滚动视图。

这是我当前的代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        android:alpha="0"
        android:id="@+id/backgroundImage"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/colorBackground"
        android:alpha="0.4"
        android:background="@drawable/home_gradient_animation_list"/>

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/scene_app_intro"
        android:id="@+id/mainLayout">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="60dp"
            app:layout_constraintTop_toTopOf="parent"
            android:textSize="30sp"
            android:alpha="0"
            android:id="@+id/title"
            android:textColor="@color/white"
            android:fontFamily="sans-serif-thin"/>

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/donorAnimation"
            android:layout_width="80dp"
            android:layout_height="80dp"
            app:lottie_fileName="lotte_animation_place.json"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/title"
            android:layout_marginTop="40dp"
            android:tint="@color/white"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="30dp"
            app:cardElevation="2dp"
            app:cardCornerRadius="15dp"
            app:cardBackgroundColor="@color/white"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/donorAnimation"
            android:id="@+id/donorTextLayout">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:paddingStart="15dp"
                android:paddingEnd="15dp"
                android:textSize="16sp"
                android:textColor="@color/home_gradient_2_2"
                android:fontFamily="@font/avenir_bold"
                android:layout_gravity="center"
                android:gravity="center"
                android:lineSpacingMultiplier="1.2"
                android:text="Got extra food? Get on board and help serve the food to people in need"/>

        </androidx.cardview.widget.CardView>



        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/volunteerAnimation"
            android:layout_width="80dp"
            android:layout_height="80dp"
            app:lottie_fileName="lotte_animation_food_delivery_1.json"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/donorTextLayout"
            android:layout_marginTop="25dp"
            android:tint="@color/white"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="30dp"
            app:cardElevation="2dp"
            app:cardCornerRadius="15dp"
            app:cardBackgroundColor="@color/white"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/volunteerAnimation"
            android:id="@+id/volunteerTextLayout">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:paddingStart="15dp"
                android:paddingEnd="15dp"
                android:textSize="16sp"
                android:textColor="@color/home_gradient_2_2"
                android:fontFamily="@font/avenir_bold"
                android:layout_gravity="center"
                android:gravity="center"
                android:lineSpacingMultiplier="1.2"
                android:text="Not everyone gets a chance to server their community. Become a volunteer and help us deliver the food."/>

        </androidx.cardview.widget.CardView>



        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/recipientAnimation"
            android:layout_width="80dp"
            android:layout_height="80dp"
            app:lottie_fileName="lotte_animation_food.json"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/volunteerTextLayout"
            android:layout_marginTop="25dp"
            android:tint="@color/white"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="30dp"
            app:cardElevation="2dp"
            app:cardCornerRadius="15dp"
            app:cardBackgroundColor="@color/white"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/recipientAnimation"
            android:id="@+id/recipientTextLayout">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:paddingStart="15dp"
                android:paddingEnd="15dp"
                android:textSize="16sp"
                android:textColor="@color/home_gradient_2_2"
                android:fontFamily="@font/avenir_bold"
                android:layout_gravity="center"
                android:gravity="center"
                android:lineSpacingMultiplier="1.2"
                android:text="Whether you are a religious place or a non-profit organization, we have you covered."/>

        </androidx.cardview.widget.CardView>


        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constrainedWidth="true"

            app:layout_constraintWidth_max="250dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:id="@+id/btn_start"
            app:cardBackgroundColor="@color/white">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:focusable="true"
                android:id="@+id/btn_start_main"
                android:background="?attr/selectableItemBackground"
                android:padding="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:textSize="19sp"
                    android:fontFamily="@font/avenir_bold"
                    android:textColor="@color/home_gradient_2_2"
                    android:text="Start"/>

            </FrameLayout>

        </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.motion.widget.MotionLayout>

</RelativeLayout>

这是它在不同屏幕尺寸设备上的外观：

在这里工作正常 在这里工作正常

布局超越底部
布局超越底部

我可以与大小一起使用什么约束，以便布局调整其大小以填充屏幕？ImageView 设置为包装内容，以便它可以调整。

标签： androidxmlandroid-studioandroid-layoutandroid-constraintlayout

解决方案

我将运动布局设置为父视图（而不是相对布局）

然后你可以用按钮和图像做垂直链约束。这样就行了。实际上，这就是我为解决相同问题所做的工作。

推荐阅读