如何在布局的底视图上绑定BottomSheet [英] How to tie a BottomSheet at the bottom view of the layout
问题描述
通过ConstraintLayout,我正在使用BottomSheet来显示地图详细信息的内容.我的想法与GoogleMaps中使用的想法相同,但顶部没有图像轮播.
Through ConstraintLayout, I am using a BottomSheet to show content of a map detail. My idea is the same used in GoogleMaps, but without the image carousel at the top.
我需要找到一些属性以将BottomSheet绑定在底部,仅使用其布局中的大小,而不是整个窗口的大小,如下所示:
I need to find some property to tie the BottomSheet in the bottom, using only the size from its layout, not the whole window, as below:
这是父视图中的我的XML:
Here is my XML from parent view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.mapbox.mapboxsdk.maps.MapView
android:id="@+id/mapview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
mapbox:center_latitude="0"
mapbox:center_longitude="0"
mapbox:style_url="@string/style_mapbox_streets"
mapbox:zoom="12" />
<!--
<ImageView
android:id="@+id/bottom_sheet_backdrop"
android:layout_width="match_parent"
android:layout_height="@dimen/anchor_point"
android:fitsSystemWindows="true"
app:layout_behavior="@string/BackDropBottomSheetBehavior" />
-->
<android.support.v4.widget.NestedScrollView
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:anchorPoint="@dimen/anchor_point"
app:behavior_hideable="true"
app:behavior_peekHeight="@dimen/bottom_sheet_peek_height"
app:layout_behavior="@string/BottomSheetBehaviorGoogleMapsLike">
<include
layout="@layout/places_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/places_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"
android:src="@drawable/ic_directions"
app:elevation="3dp"
app:layout_anchor="@id/bottom_sheet"
app:layout_anchorGravity="top|right|end"
app:layout_behavior="@string/ScrollAwareFABBehavior" />
</android.support.design.widget.CoordinatorLayout>
这是BottomSheet"layout/places_bottom_sheet"中的设计
Here is the design from BottomSheet "layout/places_bottom_sheet"
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical"
android:paddingBottom="16dp">
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/bottom_sheet_place_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:src="@drawable/watchmen" />
<TextView
android:id="@+id/bottom_sheet_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:text="Bottom Sheet Title"
android:textSize="20sp" />
</LinearLayout>
<!-- line separator -->
<include
android:id="@+id/include2"
layout="@layout/line_separator"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout2" />
<!-- street address-->
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="0dp"
android:orientation="horizontal"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/include2">
<ImageView
android:id="@+id/bottom_sheet_address_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="8dp"
android:scaleType="center"
android:src="@drawable/ic_location_on_black_24dp" />
<TextView
android:id="@+id/bottom_sheet_address_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:text="Rua tal, Nº 1234"
android:textSize="14sp" />
</LinearLayout>
<!-- phone -->
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout">
<ImageView
android:id="@+id/bottom_sheet_phone_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="8dp"
android:scaleType="center"
android:src="@drawable/ic_phone_black_24dp" />
<TextView
android:id="@+id/bottom_sheet_phone_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:text="(62) 983 234 544"
android:textSize="14sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
推荐答案
BottomSheet仅在协调器布局内或作为BottomSheetDialogFragment弹出窗口起作用.
BottomSheet works only inside Coordinator Layout or as BottomSheetDialogFragment popup.
因为:app:layout_behavior
是协调器布局的一部分
Because: app:layout_behavior
is part of Coordinator Layout
目前似乎无法将BottomSheet放入ConstraintsLayout中,这真是太棒了. 他们俩都扩大了视图组,所以也许有一天,我们将在ConstraintsLayout内看到协调器布局的功能,或者将两者结合在一起.
It seems like at the moment there is no way of putting BottomSheet inside ConstraintsLayout, which would be awesome. They both extend view group so maybe one day, we will see capabilities of Coordinator Layout inside ConstraintsLayout or some mix of two.
这篇关于如何在布局的底视图上绑定BottomSheet的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!