Question

如何使.my-group { background-image: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg), url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg), url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg), url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg); background-position: -6% -2%, 109% -2%, -6% 100%, 104% 100%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards; -moz-animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards; -webkit-animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards; animation: animatedBackgroundfrom 0.3s ease-in-out forwards; -webkit-animation: animatedBackgroundfrom 0.3s ease-in-out forwards; -moz-animation: animatedBackgroundfrom 0.3s ease-in-out forwards; background-repeat: no-repeat; } .my-group:hover { animation: animatedBackgroundto 0.3s ease-in-out forwards; -webkit-animation: animatedBackgroundto 0.3s ease-in-out forwards; -moz-animation: animatedBackgroundto 0.3s ease-in-out forwards; background-repeat: no-repeat; } @keyframes animatedBackgroundfrom { from { background: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat, url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat, url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat, url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat; background-color: #fbaf5d; } to { background: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat, url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat, url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat, url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat; background-color: #448ccb; } } @keyframes animatedBackgroundto { from { background: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat, url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat, url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat, url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat; background-color: #448ccb; } to { background: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat, url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat, url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat, url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat; background-color: #fbaf5d; } }填满View中的所有剩余空间

我有类似xml的

ConstraintLayout

我想使<ImageView android:background="#FF0000" android:id="@+id/header" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_header" android:scaleType="fitXY" android:adjustViewBounds="true" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHeight_default="wrap" app:layout_constraintWidth_default="spread"/> <FrameLayout android:background="#00FF00" app:layout_constraintHeight_default="spread" app:layout_constraintWidth_default="wrap" app:layout_constraintTop_toBottomOf="@id/header" app:layout_constrainedHeight="true" app:layout_constraintBottom_toTopOf="@id/footer" android:id="@+id/task_fragment" android:layout_width="match_parent" android:layout_height="wrap_content"/> <LinearLayout android:background="#FFFF00" android:orientation="vertical" android:id="@+id/footer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHeight_default="spread" app:layout_constraintWidth_default="spread" app:layout_constraintBottom_toBottomOf="parent"> <ImageButton style="?borderlessButtonStyle" android:id="@+id/btn_ar" android:layout_height="wrap_content" android:layout_width="match_parent" android:padding="0dp" android:scaleType="fitXY" android:adjustViewBounds="true" android:src="@drawable/ic_ar"/> </LinearLayout>填满所有剩余空间，中间有页眉，页脚和FrameLayout。

我不知道我必须使用哪些属性来扩展FrameLayout。请帮帮我！

编辑：或任何具有不同布局的解决方案。

Answer 1

这真的很简单。要使任何视图水平或垂直填充可用空间，只需根据需要将layout_width / layout_height设置为0dp。

Answer 2

这项工作与ConstraintLayout一起使用，因为它具有更好的性能。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:background="#FF0000"
        android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_header"
        android:minHeight="30dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="wrap"
        app:layout_constraintWidth_default="spread"/>

    <FrameLayout
        android:id="@+id/task_fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#00FF00"
        android:orientation="vertical"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@+id/btn_ar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/header"
        app:layout_constraintWidth_default="wrap">

    </FrameLayout>

    <ImageButton
        android:id="@+id/btn_ar"
        style="?borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:padding="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_ar"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Answer 3

<FrameLayout
    android:id="@+id/task_fragment"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="#00FF00"
    android:orientation="vertical"
    app:layout_constrainedHeight="true"
    app:layout_constraintBottom_toTopOf="@+id/btn_ar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/header"
    app:layout_constraintWidth_default="wrap">

</FrameLayout>

这应该有效。

说明：

您要做的就是将这个FrameLayout约束的顶部放在标题的底部，并将这个FrameLayout约束的底部放在页脚的顶部。

设置所有约束后，您仍然需要设置FrameLayout的布局参数以匹配约束。为此，您可以尝试将layout_height设置为0dp。这将使FrameLayout的高度具有match_constraint的作用。

有关更多详细信息，您可以查看以下文档：https://developer.android.com/reference/android/support/constraint/ConstraintLayout（只需搜索关键字match constraint，您将找到该块），或简单地查看以下类似答案：Set width to match constraints in ConstraintLayout

如何使ConstraintsLayout中的视图填充剩余空间

3 个答案: