棒棒糖和更高版本的FAB(浮动操作按钮)叠加

时间:2016-02-18 12:57:37

标签: android floating-action-button

我正在开发一个使用FloatingActionButton(FAB)的应用程序,就像skype或Inbox一样。点击FAB我正在显示带有叠加背景的对话框。

对于Kitkat版本,整个屏幕将被覆盖,这很好,但对于棒棒糖和棉花糖,它只覆盖到PageViewer并且它没有覆盖ActionBar(AppBarLayout)。我正在努力解决它,但我无法解决。

我该如何解决这个问题?

以下是代码段:

    final FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frame_layout);
    frameLayout.getBackground().setAlpha(0);
    final FloatingActionsMenu fabMenu = (FloatingActionsMenu) findViewById(R.id.multiple_actions);
    fabMenu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
        @Override
        public void onMenuExpanded() {
           frameLayout.getBackground().setAlpha(240);
            frameLayout.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    fabMenu.collapse();
                    return false;
                }
            });
        }

        @Override
        public void onMenuCollapsed() {
            frameLayout.getBackground().setAlpha(0);
            frameLayout.setOnTouchListener(null);
        }
    });`

这就是布局:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppThemeBlue">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@color/white"
        app:popupTheme="@style/AppThemeBlue"
        app:layout_scrollFlags="scroll|enterAlways|snap" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@android:color/white"
        app:tabIndicatorColor="@android:color/white"
        app:tabIndicatorHeight="3dp"/>

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

<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/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white_overlay"
    android:layout_gravity="bottom|end">

<com.support.android.fabbutton.FloatingActionsMenu
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.support.android.fabbutton.FloatingActionButton
            android:id="@+id/action_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_icon="@drawable/micro"
            fab:fab_size="mini"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed" />

        <com.support.android.fabbutton.FloatingActionButton
            android:id="@+id/action_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_size="mini"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action with a very long name "
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.support.android.fabbutton.FloatingActionsMenu>
</FrameLayout>

这是我目前正在实现的目标。正如您所看到的,ActionBar未被覆盖... enter image description here

1 个答案:

答案 0 :(得分:0)

你已经用框架布局包装了你的晶圆厂,并把它放在viewpager中,所以它只会在viewpager中显示...将你的xml包装在协调器布局中,然后检查它是否正常工作..从框架布局中查看分页器

像这样

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/root_coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppThemeBlue">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@color/white"
        app:popupTheme="@style/AppThemeBlue"
        app:layout_scrollFlags="scroll|enterAlways|snap" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@android:color/white"
        app:tabIndicatorColor="@android:color/white"
        app:tabIndicatorHeight="3dp"/>

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

<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" />


<com.support.android.fabbutton.FloatingActionsMenu
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.support.android.fabbutton.FloatingActionButton
            android:id="@+id/action_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_icon="@drawable/micro"
            fab:fab_size="mini"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed" />

        <com.support.android.fabbutton.FloatingActionButton
            android:id="@+id/action_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_size="mini"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action with a very long name "
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.support.android.fabbutton.FloatingActionsMenu>

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