Question

我按照这个链接用fab创建浮动工具栏。

Collapsing toolbar with floating action Menu

当我点击松弛时，我尝试将fab更改为浮动菜单，只有很少的选项，但是当我连接工厂和工具栏时，我无法将工具栏与工厂一起折叠并隐藏浮动菜单。

这是我创建浮动菜单时所遵循的链接 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();
            }
        }
    });

使用浮动操作菜单折叠工具栏

1 个答案: