Question

https://material.io/design/components/backdrop.html

我在Material Design上找到了这个，但是找不到任何资源。考虑其布局，我认为它是由具有物料卡视图的任何布局组成的，并且我正尝试使用布局+物料卡视图创建活动文件。这种方法是否正确进行背景布局？

此外，我想知道应该使用哪种布局。 RelativeLayout可以吗？我真的不明白。

Answer 1

截至{strong> 2018年12月16日，Android Material Components库的此组件（BackDrop）仍在开发中。

但是，如果您已经在使用Material Components，则实现自己的组件并不难。您将需要以下内容：

CoordinatorLayout作为根布局
一个BottomSheetBehaviour应用于根布局的直接子级

下面提供的解决方案，如下图所示……

下面的示例使用一个片段，我将省略托管活动的详细信息，因为它与问题/答案无关。但是，您可以对活动执行完全相同的操作。您的片段布局文件将如下所示...

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    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">

    <!--This the interface sitting behind the backdrop and shown when it is collapsed-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/colorPrimary"
        android:padding="@dimen/activity_spacing">

        <EditText
            android:id="@+id/searchTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/ic_search_primary_xlight_24dp"
            style="@style/EditTextStyle.Inverse.Large.Light"
            android:hint="@string/search_hint"/>

        <EditText
            android:id="@+id/datesFilterButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/ic_calendar_primary_xlight_24dp"
            style="@style/EditTextStyle.Inverse.Large.Light"
            android:hint="@string/select_dates_hint"/>
    </LinearLayout>

    <!--This is the backdrop's content with a BottomSheetBehaviour applied to it-->
    <LinearLayout
        android:id="@+id/contentLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:behavior_peekHeight="56dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <!--This is the backdrop's header with a title and icon-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:clickable="true"
            android:background="@drawable/ic_list_header_background"
            android:padding="@dimen/activity_spacing"
            android:elevation="4dp">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                style="@style/TextAppearance.Stems.Body2"
                android:text="0 items(s)"/>

            <ImageView
                android:id="@+id/filterIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_filter_black_24dp"
                android:layout_gravity="end"/>

        </LinearLayout>

        <!--And finally this is the body of the backdrop's content. You can add here whatever you need inside a view group (LinearLayout, RelativeLayout, SwipeRefreshLayout, ConstraintLayout, etc.)-->
        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/swiperefresh"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorBackground">

             <!--The content's body goes here-->
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    </LinearLayout>   


</androidx.coordinatorlayout.widget.CoordinatorLayout>

在这里需要注意几件事。首先，位于背景后面的LinearLayout使用colorPrimary颜色，它与Toolbar的背景颜色完全相同...为清楚起见，省略了工具栏，它是在托管活动中声明（请记住，此解决方案仅适用于片段）。

然后片段的类将如下所示……

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        coordinatorLayout = (CoordinatorLayout)inflater.inflate(R.layout.fragment_hazards, container, false);

        Context context = getContext();

        if(context != null){
            setTitle(context.getString(R.string.title_hazards));
        }

        filterIcon = coordinatorLayout.findViewById(R.id.filterIcon);
        LinearLayout contentLayout = coordinatorLayout.findViewById(R.id.contentLayout);

        sheetBehavior = BottomSheetBehavior.from(contentLayout);
        sheetBehavior.setFitToContents(false);
        sheetBehavior.setHideable(false);//prevents the boottom sheet from completely hiding off the screen
        sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);//initially state to fully expanded

        filterIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                toggleFilters();
            }
        });


        return coordinatorLayout;
    }

    private void toggleFilters(){
        if(sheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED){
            sheetBehavior.setState(BottomSheetBehavior.STATE_HALF_EXPANDED);
        }
        else {
            sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }
    }

就是这样，您唯一需要记住的是根布局必须是CoordinatorLayout，并且BottomSheetBehaviour必须应用于根布局的直接子元素< / p>

圆角

您还将注意到，我没有在BackDrop标题中使用CardView来获得CardView附带的漂亮圆角。这是因为我只需要对顶部的角进行四舍五入，并且CardView的默认实现不允许您显式设置各个角。相反，我使用了一个很好的旧LinearLayout并为其背景（ic_list_header_background）提供了我自己的可绘制对象。这是此drawable的xml声明...

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <solid android:color="@color/colorBackground" />
    <corners android:topLeftRadius="16dp" android:topRightRadius="16dp" />

</shape>

没有什么特别的，只是带有选择性圆角（顶部）的矩形

工具栏的投影

您将要删除工具栏的投影，可以将其标高设置为0dp或以编程方式删除父项AppBarLayout上的轮廓提供者，如下所示...

appBarLayout.setOutlineProvider(null);

很明显，这是假设您的Toolbar位于指南中的AppBarLayout内

我希望这在Material Component的BackDrop仍在开发中时确实可以帮助某人。这不是完美的，因为您仍然受限于BottomSheetBehaviour组件所公开的功能，该功能非常有限。但是，如果您挑剔或想花哨，我建议您通过扩展默认值实现自己的BottomSheetBehaviour

Answer 2

它正在开发中（Backdrop github page）。

代码及其操作方法一经开发便可以使用。因此，现在您必须创建自己的自定义背景或等待它。

我建议您是否要这样做，然后采用 FrameLayout 并添加一些 CardView 在其中添加一些空白以使其看起来像背景，在过渡上添加一些动画，这样您的自定义背景就可以使用了。

Answer 3

我想对狮子座的答案做一个小修改：

我在RecyclerView中使用了LinearLayout。 LinearLayout是我的底页。按照Leo的建议使用GestureLockedBottomSheetBehavior不允许RecyclerView滚动，以下是我为克服该问题所做的工作。

这是自定义底表行为类，我最终使用它来使RecyclerView滚动。

class GestureLockedBottomSheetBehavior<V: View>(context: Context, attributeSet: AttributeSet) : BottomSheetBehavior<V>(context, attributeSet){

    override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: V, event: MotionEvent): Boolean = false

    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: V,
        directTargetChild: View,
        target: View,
        axes: Int,
        type: Int
    ): Boolean = false
}

与此同时，我的RecyclerView正在滚动。但是，仅当底部工作表的状态为STATE_EXPANDED时才滚动，而当底部工作表的状态为RecyclerView时STATE_HALF_EXPANDED不滚动。

如果有人知道如何解决这个问题，那将非常有帮助。

在Android上使用背景幕

3 个答案:

圆角

工具栏的投影