如何在Constraint Layout中删除不必要的间距和填充?

时间:2018-01-12 06:11:46

标签: android android-layout android-constraintlayout

我在我的应用程序中遇到问题,我的布局中存在不必要的间距和填充。出于某种原因,每个视图之间存在很大的空间差距。是否有另一种解决方案可以移除或避免在布局周围出现不必要的间距和填充?

感谢您的帮助!

布局代码

<ScrollView 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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true" >

<android.support.constraint.ConstraintLayout
android:id="@+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/title_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@color/colorTeal"
    android:ellipsize="none"
    android:gravity="start"
    android:padding="@dimen/title_padding"
    android:textColor="@color/colorWhite"
    android:textSize="35sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.571"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />


<TextView
    android:id="@+id/vote_average"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:textSize="18sp"
    app:layout_constraintBottom_toTopOf="@+id/overview_text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.05"
    app:layout_constraintStart_toEndOf="@+id/image_thumbnail"
    app:layout_constraintTop_toBottomOf="@+id/release_date"
    app:layout_constraintVertical_bias="0.19999999" />

<TextView
    android:id="@+id/release_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="64dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="20dp"
    android:textSize="24sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.09"
    app:layout_constraintStart_toEndOf="@+id/image_thumbnail"
    app:layout_constraintTop_toBottomOf="@+id/title_text" />

<ImageView
    android:id="@+id/image_thumbnail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:layout_marginStart="4dp"
    android:layout_marginTop="20dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.02"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/title_text" />


<TextView
    android:id="@+id/overview_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.415"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image_thumbnail"
    app:layout_constraintVertical_bias="0.366" />

<ImageView
    android:id="@+id/playbutton"
    android:layout_width="39dp"
    android:layout_height="44dp"
    android:layout_marginBottom="48dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/trailer_title"
    app:layout_constraintHorizontal_bias="0.326"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@android:drawable/ic_media_play" />

<View
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@android:color/darker_gray"
    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/overview_text"
    app:layout_constraintVertical_bias="0.305" />

<TextView
    android:id="@+id/trailer_title"
    android:layout_width="93dp"
    android:layout_height="21dp"
    android:layout_marginBottom="64dp"
    android:layout_marginEnd="144dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.25"
    app:layout_constraintStart_toEndOf="@+id/imageView2" />

<TextView
    android:id="@+id/TrailersName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="Trailers"
    android:textSize="24sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.055"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view"
    app:layout_constraintVertical_bias="0.0" />

</android.support.constraint.ConstraintLayout>

</ScrollView>

1st layout screenshot
2nd layout screenshot

2 个答案:

答案 0 :(得分:0)

您看到的空格和填充不是因为ScrollView,而是因为Viewgroup,尝试使用LinearLayout进行垂直定向,它应该可以正常工作

答案 1 :(得分:0)

试试这个,

我重新编写了代码并根据需要实现了结果。 请检查以下代码。

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:fillViewport="false">

    <RelativeLayout
        android:id="@+id/LinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/title_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:background="#009587"
            android:ellipsize="none"
            android:gravity="start"
            android:padding="20dp"
            android:text="Jumaji: Welcome to the Jungle"
            android:textColor="#ffffff"
            android:textSize="35sp" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/title_text"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp">

            <ImageView
                android:id="@+id/ivMoviePoster"
                android:layout_width="120dp"
                android:layout_height="180dp"
                android:contentDescription="@null"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/release_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="64dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="20dp"
                android:layout_toEndOf="@id/ivMoviePoster"
                android:text="2017-12-08"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/vote_average"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/release_date"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_toEndOf="@id/ivMoviePoster"
                android:text="6.4"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/overview_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ivMoviePoster"
                android:layout_marginBottom="8dp"
                android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
                android:textSize="18sp" />

            <View
                android:id="@+id/view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@id/overview_text"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp" />

            <TextView
                android:id="@+id/trailer_title"
                android:layout_width="93dp"
                android:layout_height="21dp"
                android:layout_below="@id/view"
                android:layout_marginBottom="64dp"
                android:layout_marginEnd="144dp"
                android:layout_marginStart="8dp"
                android:text="Trailer title" />


            <ImageView
                android:id="@+id/playbutton"
                android:layout_width="39dp"
                android:layout_height="44dp"
                android:layout_below="@id/trailer_title"
                android:layout_marginBottom="48dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:contentDescription="@null"
                app:srcCompat="@android:drawable/ic_media_play" />

            <TextView
                android:id="@+id/TrailersName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/trailer_title"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                android:layout_toEndOf="@id/playbutton"
                android:text="Trailers"
                android:textSize="24sp" />

        </RelativeLayout>

    </RelativeLayout>

</ScrollView>

<强>结果,

{{3}}

希望它会对你有所帮助。