带有浮动操作菜单的折叠工具栏

Question

我按照这个 link 创建了带有 fab 的浮动工具栏 ..

Collapsing toolbar with floating action Menu

当我点击 fab 时，我试图将 fab 更改为只有几个选项的浮动菜单，但是当我将 fab 与工具栏一起附加时，我无法将工具栏与 fab 一起折叠并隐藏浮动菜单菜单。

这是我用来创建浮动菜单的link Sub menu items in fab

谁能帮帮我....

我的布局

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_card"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        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/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="256dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/app_bg_overlay"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:elevation="4dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

        <TextView
            android:id="@+id/textViewJob"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bg_card"
            android:maxLines="2"
            android:paddingBottom="8dp"
            android:paddingEnd="96dp"
            android:paddingStart="24dp"
            android:paddingTop="8dp"
            android:textColor="@color/white"
            android:textSize="16sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/black" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabBackground="@color/bg_card"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/white"
            app:tabTextColor="@color/hint_color" />


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

    <!--<com.github.clans.fab.FloatingActionMenu
        app:layout_anchor="@id/collapsing_toolbar"
        app:layout_anchorGravity="bottom|right|end">-->
    <!--

        <include layout="@layout/layout_fab" />-->


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


    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/fraToolFloat"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:orientation="vertical"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom|end">

            <LinearLayout
                android:id="@+id/linFab1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="80dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Mentorship"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />
                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/mentorship"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="130dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Alumni Meet"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />

                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/alumni"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFab3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="180dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Lunch Meetup"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />

                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/lunch"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFab4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="230dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Coffee Connect"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />

                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/lunch"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFabSetting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="280dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSetting"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|end"
                    android:layout_marginEnd="20dp"
                    android:src="@drawable/prof_plus"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="normal" />

            </LinearLayout>

        </FrameLayout>
    </FrameLayout>


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

我的折叠工具栏功能

private void setupCollapsingToolbar() {

collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
headerImageView = (ImageView) findViewById(R.id.header_image);
headerImageView.setImageBitmap(sqLiteDBHelper.getUserImage(Prefs.getUserKey()));
collapsingToolbar.setTitleEnabled(true);
collapsingToolbar.setTitle(sqLiteDBHelper.getName(Prefs.getUserKey()));
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.expandedappbar);

subtitleTextView = (TextView) findViewById(R.id.textViewJob);
appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        //Initialize the size of the scroll
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }

        //Check if the view is collapsed
        if (scrollRange + verticalOffset == 0) {
            toolbar.setBackgroundColor(ContextCompat.getColor(ProfileActivity.this, R.color.colorPrimary));
            subtitleTextView.setVisibility(View.GONE);
            fraToolFloat.setVisibility(View.GONE);
        } else {
            toolbar.setBackgroundColor(ContextCompat.getColor(ProfileActivity.this, android.R.color.transparent));
            subtitleTextView.setText(sqLiteDBHelper.getCompanyName(Prefs.getUserKey()));
            subtitleTextView.setVisibility(View.VISIBLE);
            fraToolFloat.setVisibility(View.VISIBLE);
        }

    }
});

}

如何实现

Answer 1

我得到了解决方案，你可以像这样创建一个新布局 layout_fab_submenu

    <LinearLayout
    android:id="@+id/layoutFabSave"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="120dp"
    android:layout_marginEnd="8dp"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/cardview_light_background"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true" >
        <TextView
            android:id="@+id/cvtSave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="132456"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textStyle="bold"
             />
    </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_favorite_fill"
        app:backgroundTint="@android:color/holo_green_light"
        app:fabSize="mini" />

</LinearLayout>

<LinearLayout
    android:id="@+id/layoutFabEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="170dp"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/cardview_light_background"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true" >

        <TextView
            android:id="@+id/cvtEdit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="12346"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textStyle="bold"
            />

    </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_favorite_fill"
        app:backgroundTint="@android:color/holo_green_dark"
        app:fabSize="mini" />

</LinearLayout>

现在像这样将此布局包含在折叠工具栏布局中

<?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"
android:fitsSystemWindows="true"
tools:context=".temp">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_barbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

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


        <ImageView
            android:id="@+id/expandedImage"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/disha2"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_my"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="-30dp"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:id="@+id/tv_home_welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingBottom="10dp"
        android:text="Welcome,"
        android:textColor="@color/colorWhite"
        android:textSize="18dp"
        app:layout_collapseMode="pin" />




</LinearLayout>


<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/layout_fab_submenu" />


    </LinearLayout>


</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_barbar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_info" />


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

现在在您的 java 文件中添加此代码

// declare variables 
//boolean flag to know if main FAB is in open or closed state.
private boolean fabExpanded = false;
private FloatingActionButton fabSettings;

//Linear layout holding the Save submenu
private LinearLayout layoutFabSave;

//Linear layout holding the Edit submenu
private LinearLayout layoutFabEdit;
private LinearLayout layoutFabPhoto;

设置 fab 按钮点击监听器

 layoutFabSave = (LinearLayout) this.findViewById(R.id.layoutFabSave);
    layoutFabEdit = (LinearLayout) this.findViewById(R.id.layoutFabEdit);
    layoutFabPhoto = (LinearLayout) this.findViewById(R.id.layoutFabPhoto);

  private void closeSubMenusFab(){
    layoutFabSave.setVisibility(View.INVISIBLE);
    layoutFabEdit.setVisibility(View.INVISIBLE);
    layoutFabPhoto.setVisibility(View.INVISIBLE);
    fabSettings.setImageResource(R.drawable.ic_favorite_fill);
    fabExpanded = false;
}

//Opens FAB submenus
private void openSubMenusFab(){
    layoutFabSave.setVisibility(View.VISIBLE);
    layoutFabEdit.setVisibility(View.VISIBLE);
    layoutFabPhoto.setVisibility(View.VISIBLE);
    //Change settings icon to 'X' icon
    fabSettings.setImageResource(R.drawable.ic_favorite_fill);
    fabExpanded = true;
}

如有任何疑问，请联系我 github link

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (fabExpanded == true){
                closeSubMenusFab();
            } else {
                openSubMenusFab();
            }
        }
    });

带有浮动操作菜单的折叠工具栏

Collapsing toolbar with floating action Menu

android

android-layout

floating-action-button

android-toolbar

android-collapsingtoolbarlayout