android - 在 Android 上使用背景

Question

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

我在 Material Design 上找到了这个，但找不到任何资源。考虑到它的布局，我认为它是由任何带有 Material 卡 View 的布局组成的，我正在尝试使用布局 + Material 卡 View 来制作我的 Activity 文件。这种布景布局的方法是否正确？

另外，我想知道应该使用哪种布局。 RelativeLayout 可以这样吗？其实我不明白。

Answer 1

此组件 (BackDrop) 仍在为 Android Material Components 开发图书馆截至 2018 年 12 月 16 日。

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

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

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

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

<?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 的背景颜色完全相同......为清楚起见，工具栏已被省略，它在托管 Activity 中声明(请记住，此解决方案适用于 fragment )。

然后该 fragment 的类将如下所示...

    @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 必须立即应用于根布局的 child

圆角

您还会注意到，我没有在 BackDrop 的标题中使用 CardView 来获得 CardView 附带的漂亮圆角。那是因为我只需要将顶角圆化，而 CardView 的默认实现不允许您显式设置各个角。相反，我使用了一个很好的旧 LinearLayout 并为其背景提供了我自己的 drawable (ic_list_header_background)。这是这个可绘制对象的 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 来实现自己的 BottomSheetBehaviour

禁用用户的滑动手势

基于 Material Design Guidelines , 建议不要在背景的前层使用滑动手势

Don’t use the swipe gesture on the front layer to reveal the back layer.

但是，默认情况下，BottomSheetBehaviour 不会公开任何属性或 API 来禁用滑动手势。为此，您需要通过扩展 BottomSheetBehaviour 覆盖所有与手势相关的方法来实现您自己的方法。这是我在我的一个项目中使用的示例(用 Kotlin 编写)

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

    constructor(context: Context):this(context, null)

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

    override fun onTouchEvent(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

    override fun onNestedPreScroll(
        coordinatorLayout: CoordinatorLayout,
        child: V,
        target: View,
        dx: Int,
        dy: Int,
        consumed: IntArray,
        type: Int
    ) { }

    override fun onStopNestedScroll(coordinatorLayout: CoordinatorLayout, child: V, target: View, type: Int) { }

    override fun onNestedFling(
        coordinatorLayout: CoordinatorLayout,
        child: V,
        target: View,
        velocityX: Float,
        velocityY: Float,
        consumed: Boolean
    ): Boolean = false
}

即使您不熟悉 Kotlin，也不难看出我所做的只是重写一堆方法并返回 false 或不调用父类(super class)的对应项而什么都不做

然后要使用这个 GestureLockedBottomSheetBehavior 类，您需要在您的布局中替换它，如下所示...

<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="ui.behaviors.GestureLockedBottomSheetBehavior">
...
</LinearLayout>

只需确保根据自定义类所在的包设置完全限定名称即可。