Android BottomSheet 灰色抓斗/把手答案

【问题标题】：Android BottomSheet gray grapple/handle barAndroid BottomSheet 灰色抓斗/把手
【发布时间】：2020-02-01 04:08:24
【问题描述】：

我在一些流行的应用程序中在 BottomSheets 上看到过这种灰色把手装饰。这是 Google 地图中的 BottomSheet 的屏幕截图。请注意 BottomSheet 顶部的灰色手柄/抓手。

实现这样的装饰或背景的最佳方式是什么？这种装饰有标准材质或安卓风格吗？

【问题讨论】：

标签： android bottom-sheet android-bottomsheetdialog

【解决方案1】：

我将用于抓斗/手柄的 SVG 插入到我的底部表单布局中。

MyBottomSheetDialogFragmentLayout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">

    <ImageView
        android:id="@+id/bottomSheetGrapple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/topMargin"
        android:src="@drawable/ic_bottom_sheet_grapple"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    .... // rest of layout
</androidx.constraintlayout.widget.ConstraintLayout>

ic_bottom_sheet_grapple.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="3dp"
    android:viewportWidth="24"
    android:viewportHeight="3">

    <path
        android:fillColor="@android:color/darker_gray"
        android:pathData="M 1.5 0 L 22.5 0 Q 24 0 24 1.5 L 24 1.5 Q 24 3 22.5 3 L 1.5 3 Q 0 3 0 1.5 L 0 1.5 Q 0 0 1.5 0 Z"
        android:strokeWidth="1" />
</vector>

【讨论】：

你能分享 ic_bottom_sheet_grapple 的 SVG 吗？
@policenauts 更新了抓斗矢量 xml
在您的情况下，“@dimen/topMargin”有什么价值？

【解决方案2】：

使用 MaterialCardView

<com.google.android.material.card.MaterialCardView
    android:layout_width="40dp"
    android:layout_height="5dp"
    android:backgroundTint="@color/ms_material_grey_400"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginTop="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

使用可以根据需要配置尺寸和圆角半径。

【讨论】：

【解决方案3】：

您也可以通过编程方式添加

private fun addLine() {
    val bottomSheet = requireDialog().findViewById<View>(com.google.android.material.R.id.design_bottom_sheet) as? FrameLayout
    val line = View(context)
    val frameLayoutParams =  FrameLayout.LayoutParams(dip(180), dip(6))
    frameLayoutParams.gravity = Gravity.CENTER_HORIZONTAL
    frameLayoutParams.topMargin = dip(16)
    line.layoutParams = frameLayoutParams
    line.setBackgroundResource(R.drawable.rounded_tv_grey)
    line.backgroundTintList = ColorStateList.valueOf(Color.rgb(226, 231, 233))
    bottomSheet?.addView(line,0)
    requireView().updatePadding(requireView().paddingLeft,dip(24),requireView().paddingRight, requireView().paddingBottom)
}

【讨论】：

欢迎来到 StackOverflow。虽然此代码可能会回答问题，但提供有关如何和/或 为什么 解决问题的附加上下文将提高答案的长期价值。