带有移动浮动操作按钮的底片
Bottomsheet with moving Floating action buttons
我想使用支持库中的 Bottom-sheet 和两个浮动操作按钮 (FABS),如图所示。关键是我还希望两个 FABS 与底部一起移动-sheet,如图 1 和 2。
我必须使用的基本布局是什么以及如何使 FABS 粘在底部-sheet?
更新
<LinearLayout
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"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- my context here -->
</LinearLayout>
<!-- bottomsheet -->
<FrameLayout
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
app:behavior_hideable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<include layout="@layout/navigation_info" />
</FrameLayout>
<!-- FABS -->
<!-- wrap to primary fab to extend the height -->
<LinearLayout
android:id="@+id/primary_wrap"
android:layout_width="wrap_content"
android:layout_height="88dp"
app:layout_anchor="@id/bottom_sheet"
app:layout_anchorGravity="top|end">
<android.support.design.widget.FloatingActionButton
android:id="@+id/primary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_delete"/>
</LinearLayout>
<!-- Pin secondary fab in the top of the extended primary -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchor="@+id/primary_wrap"
app:layout_anchorGravity="top|end"/>
</android.support.design.widget.CoordinatorLayout>
基于 Ruan_Lopes 答案。
有了这个布局,我的 FABS 就可以按我想要的方式工作,但我仍然认为我做得不是很清楚。
我想知道是否可以用更正式的方式来做到这一点。
您可以使用类似这样的布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<!-- Your code -->
</android.support.design.widget.AppBarLayout>
<!-- Your content -->
<include layout="@layout/content_main" />
<!-- Bottom Sheet -->
<include layout="@layout/bottom_sheets_main"/>
<!-- First FAB -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottomSheet"
app:layout_anchorGravity="bottom|end"/>
<!-- Second FAB -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
app:layout_anchor="@id/fab"
app:layout_anchorGravity="top" />
</android.support.design.widget.CoordinatorLayout>
为了清楚起见,我在示例中使用了 "include",但是 app:layout_anchor 将使您的 FAB "stick" 位于底部 - sheet,所以你应该把你底部的 id Sheet 作为参数放在那里,你可以按照同样的原则为你的第二个 FAB 使用 layout_anchor 把它贴在第一个 FAB 上。
您是否尝试过使用 BottomSheetBehaviour 将 app:layout_insetEdge="bottom" 添加到视图中?像这样,在 ConstraintLayout 中作为 FAB 和 BottomSheetBehaviour View 兄弟姐妹对我有用:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:backgroundTint="@color/white"
app:fabSize="normal"
app:layout_dodgeInsetEdges="bottom"
app:srcCompat="@drawable/icon"
/>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_insetEdge="bottom"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
/>
这段代码对我有用
<?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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidsample.BottomSheetActivity">
<!-- include app bar -->
<include layout="@layout/app_bar" />
<!-- include main content -->
<include layout="@layout/activity_bottom_sheet_content" />
<!-- include bottom sheet -->
<include layout="@layout/bottom_sheet" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/ic_share_black_24dp"
app:backgroundTint="#3F51B5"
app:layout_anchor="@+id/text"
app:layout_anchorGravity="top|end" />
<TextView
android:id="@+id/text"
android:layout_width="50dp"
android:layout_height="70dp"
app:layout_anchor="@+id/b1"
app:layout_anchorGravity="top|end" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/ic_share_black_24dp"
app:backgroundTint="#3F51B5"
app:layout_anchor="@+id/bottom_sheet_mapviewfinal"
app:layout_anchorGravity="top|end" />
</android.support.design.widget.CoordinatorLayout>
with layout_anchor 你指的是bottom_sheet的id。
参考:
Medium Reference
希望对您有所帮助。
我想使用支持库中的 Bottom-sheet 和两个浮动操作按钮 (FABS),如图所示。关键是我还希望两个 FABS 与底部一起移动-sheet,如图 1 和 2。 我必须使用的基本布局是什么以及如何使 FABS 粘在底部-sheet?
更新
<LinearLayout
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"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- my context here -->
</LinearLayout>
<!-- bottomsheet -->
<FrameLayout
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
app:behavior_hideable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<include layout="@layout/navigation_info" />
</FrameLayout>
<!-- FABS -->
<!-- wrap to primary fab to extend the height -->
<LinearLayout
android:id="@+id/primary_wrap"
android:layout_width="wrap_content"
android:layout_height="88dp"
app:layout_anchor="@id/bottom_sheet"
app:layout_anchorGravity="top|end">
<android.support.design.widget.FloatingActionButton
android:id="@+id/primary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_delete"/>
</LinearLayout>
<!-- Pin secondary fab in the top of the extended primary -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchor="@+id/primary_wrap"
app:layout_anchorGravity="top|end"/>
</android.support.design.widget.CoordinatorLayout>
基于 Ruan_Lopes 答案。
有了这个布局,我的 FABS 就可以按我想要的方式工作,但我仍然认为我做得不是很清楚。
我想知道是否可以用更正式的方式来做到这一点。
您可以使用类似这样的布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<!-- Your code -->
</android.support.design.widget.AppBarLayout>
<!-- Your content -->
<include layout="@layout/content_main" />
<!-- Bottom Sheet -->
<include layout="@layout/bottom_sheets_main"/>
<!-- First FAB -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottomSheet"
app:layout_anchorGravity="bottom|end"/>
<!-- Second FAB -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
app:layout_anchor="@id/fab"
app:layout_anchorGravity="top" />
</android.support.design.widget.CoordinatorLayout>
为了清楚起见,我在示例中使用了 "include",但是 app:layout_anchor 将使您的 FAB "stick" 位于底部 - sheet,所以你应该把你底部的 id Sheet 作为参数放在那里,你可以按照同样的原则为你的第二个 FAB 使用 layout_anchor 把它贴在第一个 FAB 上。
您是否尝试过使用 BottomSheetBehaviour 将 app:layout_insetEdge="bottom" 添加到视图中?像这样,在 ConstraintLayout 中作为 FAB 和 BottomSheetBehaviour View 兄弟姐妹对我有用:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:backgroundTint="@color/white"
app:fabSize="normal"
app:layout_dodgeInsetEdges="bottom"
app:srcCompat="@drawable/icon"
/>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_insetEdge="bottom"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
/>
这段代码对我有用
<?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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidsample.BottomSheetActivity">
<!-- include app bar -->
<include layout="@layout/app_bar" />
<!-- include main content -->
<include layout="@layout/activity_bottom_sheet_content" />
<!-- include bottom sheet -->
<include layout="@layout/bottom_sheet" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/ic_share_black_24dp"
app:backgroundTint="#3F51B5"
app:layout_anchor="@+id/text"
app:layout_anchorGravity="top|end" />
<TextView
android:id="@+id/text"
android:layout_width="50dp"
android:layout_height="70dp"
app:layout_anchor="@+id/b1"
app:layout_anchorGravity="top|end" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/ic_share_black_24dp"
app:backgroundTint="#3F51B5"
app:layout_anchor="@+id/bottom_sheet_mapviewfinal"
app:layout_anchorGravity="top|end" />
</android.support.design.widget.CoordinatorLayout>
with layout_anchor 你指的是bottom_sheet的id。
参考: Medium Reference
希望对您有所帮助。