android - 带有 float 操作菜单的折叠工具栏

我按照此链接创建带有 fab 的 float 工具栏 ..

Collapsing toolbar with floating action Menu

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



这是我用来创建 float 菜单的链接
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)无效 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);
        }

    }
});

}

如何实现这一目标

最佳答案

我为你创建了一个新的布局 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();
            }
        }
    });