在折叠工具栏布局中添加FloatingActionButton

时间:2016-01-15 06:32:59

标签: android material-design floating-action-button android-collapsingtoolbarlayout

目前正在处理我需要添加"分享"的应用。和"添加" Collapsing toolbar右下角的按钮(用于视差效果)。

可能会在滚动时隐藏或可能会在Actionbar上隐藏。添加了我想要实现的图像。目前还不知道如何做到这一点( 尝试使用锚定的浮动操作按钮,但失败了 )。

这应该是这样的:

以下是代码:

 <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/htab_maincontent"
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:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/htab_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/htab_collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <ImageView
            android:id="@+id/htab_header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/header"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/htab_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="top"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleMarginTop="13dp"/>
    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/htab_tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        app:tabIndicatorHeight="@dimen/tabIndicatorHeight"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/htab_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

1 个答案:

答案 0 :(得分:6)

如果您在cellForAtIndexPath中使用它,则可以执行此操作:

CollapsingToolbarLayout

另外,根据Google Material Design,我不认为这是否是两个按钮的标准方式/好方法!

此外,这是我的想法(标准方式):

您可以在<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbarCollapse" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="match_parent" android:layout_height="190dp" android:background="@android:color/darker_gray" android:minHeight="190dp" android:src="@drawable/ic_email" app:layout_collapseMode="parallax" android:id="@+id/imageView8" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fabmain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@drawable/ic_add" app:backgroundTint="@color/ColorAccent" app:borderWidth="0dp" app:fabSize="mini" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|end" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_alignTop="@+id/fabmain2" android:layout_toStartOf="@+id/fabmain2" android:layout_marginEnd="20dp" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fabmain2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginLeft="16dp" android:src="@drawable/ic_add" app:backgroundTint="@color/ColorAccent" app:borderWidth="0dp" app:fabSize="mini" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|end" android:layout_marginRight="16dp" android:layout_marginEnd="23dp" android:layout_alignBottom="@+id/imageView8" android:layout_alignParentEnd="true" android:layout_marginBottom="29dp" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?actionBarSize" app:layout_collapseMode="pin" /> </RelativeLayout> </android.support.design.widget.CollapsingToolbarLayout> 上添加带有该图标的Share action,然后像这样使用一个Actionbar

https://github.com/xuyisheng/DesignSupportLibraryDemo

或者我自己就是这样做的:

FloatingActionButton