하단 시트 및 FAB 여백

하단 시트와 안드로이드의 플로팅 동작 버튼 사이에 여백을 어떻게 추가합니까? 다른 FAB을 사용하여 보이지 않게 만들었지 만 FAB은 Bottom Sheet 바로 위에 있습니다. 나는 바닥 시트를 표시 할 NestedScrollView을 사용하고하단 시트 및 FAB 여백

<android.support.design.widget.CoordinatorLayout 
android:id="@+id/coordinator" 
android:layout_height="match_parent" 
android:layout_width="match_parent" 
android:theme="@style/Theme.AppCompat.NoActionBar" 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto"> 

<RelativeLayout 
    android:id="@+id/search_relativeLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:theme="@style/Theme.AppCompat.NoActionBar"> 

    <com.google.android.gms.maps.MapView 
     android:id="@+id/mapView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

</RelativeLayout> 

<android.support.v4.widget.NestedScrollView 
    android:id="@+id/bottom_sheet" 
    android:layout_width="match_parent" 
    android:layout_height="300dp" 
    android:background="@android:color/white" 
    android:elevation="1dp" 
    app:behavior_hideable="true" 
    app:behavior_peekHeight="0dp" 
    app:layout_behavior="@string/bottom_sheet_behavior"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 
     <de.hdodenhof.circleimageview.CircleImageView 
      android:id="@+id/circle_picture" 
      android:src="@mipmap/login_background" 
      android:layout_margin="10dp" 
      android:layout_width="50dp" 
      android:layout_height="50dp" /> 
     <TextView 
      android:id="@+id/name_bottom_sheet" 
      android:layout_toEndOf="@id/circle_picture" 
      android:text="Title" 
      android:textColor="@color/buttonLoginColor" 
      android:layout_margin="10dp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
     <TextView 
      android:id="@+id/address_bottom_sheet" 
      android:layout_below="@id/name_bottom_sheet" 
      android:layout_toEndOf="@id/circle_picture" 
      android:layout_marginStart="10dp" 
      android:textColor="@color/btn_create" 
      android:text="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </RelativeLayout> 
</android.support.v4.widget.NestedScrollView> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:visibility="invisible" 
    android:layout_margin="15dp" 
    app:layout_anchor="@id/bottom_sheet" 
    app:layout_anchorGravity="top|end"/> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/floatingButton" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="50dp" 
    android:layout_marginEnd="15dp" 
    app:backgroundTint="@color/buttonLoginColor" 
    app:borderWidth="0dp" 
    app:elevation="6dp" 
    app:layout_anchor="@id/fab2" 
    app:layout_anchorGravity="top"/> 

</android.support.design.widget.CoordinatorLayout>

: 1

그리고 코드 :이 사진을 참조하십시오.

출처

2017-03-22 Emile Netter

전체 XML을 더 나은 이해로 당신을 도울 수있는 레이아웃입니까? 상대 좌표 또는 좌표 레이아웃을 통해이를 달성하는 방법 – 9spl

코디네이터 레이아웃을 사용 중입니다. 나는 나의 질문을 편집했다. –

예 RelativeLayout은 사실을 표시하는 것을 잊지 않고 유용하다고 생각하면 시도해 볼 수 있습니다. 감사합니다. – 9spl

예, 어쨌든이 다른 팹 버튼없이 그것을 할 것입니다 .. 난 아직도 당신이 300dp와 바닥 시트 고정 높이를 준 이유를 이해할 수 아니에요, RelativeLayout으로 시도 할 수

<RelativeLayout 
    android:id="@+id/coordinator" 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:theme="@style/Theme.AppCompat.NoActionBar" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 

    <RelativeLayout 
     android:id="@+id/search_relativeLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:theme="@style/Theme.AppCompat.NoActionBar"> 

     <com.google.android.gms.maps.MapView 
      android:id="@+id/mapView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 

    </RelativeLayout> 

    <android.support.v4.widget.NestedScrollView 
     android:id="@+id/bottom_sheet" 
     android:layout_width="match_parent" 
     android:layout_height="300dp" 
     android:layout_alignParentBottom="true" 
     android:background="@android:color/white" 
     android:elevation="1dp" 
     app:behavior_hideable="true" 
     app:behavior_peekHeight="0dp" 
     app:layout_behavior="@string/bottom_sheet_behavior"> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 
      <de.hdodenhof.circleimageview.CircleImageView 
       android:id="@+id/circle_picture" 
       android:src="@mipmap/login_background" 
       android:layout_margin="10dp" 
       android:layout_width="50dp" 
       android:layout_height="50dp" /> 
      <TextView 
       android:id="@+id/name_bottom_sheet" 
       android:layout_toEndOf="@id/circle_picture" 
       android:text="Title" 
       android:textColor="@color/buttonLoginColor" 
       android:layout_margin="10dp" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 
      <TextView 
       android:id="@+id/address_bottom_sheet" 
       android:layout_below="@id/name_bottom_sheet" 
       android:layout_toEndOf="@id/circle_picture" 
       android:layout_marginStart="10dp" 
       android:textColor="@color/btn_create" 
       android:text="" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 
     </RelativeLayout> 
    </android.support.v4.widget.NestedScrollView> 



    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/floatingButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/bottom_sheet" 

     android:layout_margin="15dp" 
     app:backgroundTint="@color/buttonLoginColor" 
     app:borderWidth="0dp" 
     android:layout_alignParentRight="true" 
     app:elevation="6dp" 
     app:layout_anchorGravity="top"/> 

</RelativeLayout>

당신 또한 요구 사항에 따라 팹 버튼 여백을 설정할 수 있습니다.

출처

2017-03-22 10:14:56 9spl

하단 시트가 EXPANDED 상태에있을 때 높이가 300dp가되기를 원합니다. 또한 동작 뷰는 CoordinatorLayout –

의 직계 자식이어야하므로 상위 뷰로 상대 레이아웃을 사용할 수 없으므로 중첩 스크롤 뷰를 따라 팹 버튼을 위로 이동 하시겠습니까? 그게 바로 코디네이터 레이아웃을 사용하는 이유입니다. 맞습니까? – 9spl

네, FAB와 하단 시트 사이에 공간이 필요합니다. 하지만 패딩이 작동하지 않습니다. –

나는 동일한 문제가있었습니다. 연구를 몇 시간 수행 한 결과, 재료 설계 지침 때문에 layout_anchor를 통해 레이아웃을 만들 수 없다고 생각했습니다. 아래처럼 트릭을 사용해야합니다. 나는 팹과 하단 시트 내용보기 사이의 여백을 만드는 투명한 뷰를 사용하고 있습니다.

FAB 자체 :

<android.support.design.widget.FloatingActionButton 
    ... 
    app:layout_anchor="@+id/bottomPanel" 
    app:layout_anchorGravity="right"/>

BottomSheet :

<FrameLayout 
    android:id="@+id/bottomPanel" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:backgound="@android:color/transparent" 
    app:layout_behavior="@string/bottom_sheet_behavior"> 

    <ContentView 
     android:layout_width="match_parent" 
     android:layout_height="300dp" 
     android:layout_marginTop="44dp" 
     android:backgound="@color/colorPrimary" /> 

</FrameLayout>

그냥 투명 루트 뷰를 만들고 콘텐츠 뷰가 그 안에 넣어 추가

이

내가 문제를 해결하는 방법입니다 44dp의 마진 (팹 크기 = 56dp, 팹 패딩 = 16dp, 56/2 + 16 = 44)

출처

2017-09-22 16:21:21

답변

관련 문제