2017-04-10 152 views
2

通過ConstraintLayout,我使用底部表單來顯示地圖細節的內容。我的想法與GoogleMaps中使用的相同,但頂部沒有圖片輪播。如何在佈局的底部視圖中綁定底部表單

enter image description here

我需要找到某些屬性,以配合BottomSheet在底部,只用大小從它的佈局,而不是整個窗口,如下圖:

enter image description here

這裏我從父視圖獲得的XML:

<?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」

<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> 

回答

-1

設置佈局底部的重力。

+0

它沒有工作。 – marceloquinta

+0

爲什麼使用底部圖紙佈局的約束佈局? –

+0

沒什麼特別的。我的迴應是「爲什麼不呢?」 = P – marceloquinta

0

BottomSheet只能在協調器佈局中或作爲BottomSheetDialogFragment彈出。

因爲:app:layout_behavior是協調佈局

好像此刻有沒有辦法把BottomSheet內ConstraintsLayout,這將是真棒的一部分。 它們都擴展視圖組,所以也許有一天,我們將看到ConstraintsLayout內部的協調器佈局功能或兩種混合的功能。