【问题标题】:Integrate a floating action button into linear layout with toolbar使用工具栏将浮动操作按钮集成到线性布局中
【发布时间】:2017-03-29 19:15:00
【问题描述】:

我有以下 RecyclerView,我想向其中添加一个浮动操作按钮。但问题是浮动操作按钮与 RecyclerView 部分是分开的(它将屏幕分为两部分)。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayoutandroid:id="@+id/swifeRefresh"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto">


<LinearLayout

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


<android.support.v7.widget.Toolbar
    android:id="@+id/toolBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"/>

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/material_design_android_floating_action_menu"
    android:layout_width="match_parent"
    android:layout_height="244dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="11dp"
    android:layout_marginLeft="11dp"
    android:layout_marginRight="11dp"
    fab:menu_animationDelayPerItem="55"
    fab:menu_backgroundColor="@android:color/transparent"
    fab:menu_buttonSpacing="0dp"
    fab:menu_colorNormal="#da3c2f"
    fab:menu_colorPressed="#dc4b3f"
    fab:menu_colorRipple="#99d4d4d4"
    fab:menu_fab_label="Floating Action Menu"
    fab:menu_fab_size="normal"
    fab:menu_icon="@drawable/fab_add"
    fab:menu_labels_colorNormal="#333"
    fab:menu_labels_colorPressed="#444"
    fab:menu_labels_colorRipple="#66efecec"
    fab:menu_labels_cornerRadius="3dp"
    fab:menu_labels_ellipsize="none"
    fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
    fab:menu_labels_margin="0dp"
    fab:menu_labels_maxLines="-1"
    fab:menu_labels_padding="8dp"
    fab:menu_labels_position="left"
    fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
    fab:menu_labels_showShadow="true"
    fab:menu_labels_singleLine="false"
    fab:menu_labels_textColor="#f2f1f1"
    fab:menu_labels_textSize="15sp"
    fab:menu_openDirection="up"
    fab:menu_shadowColor="#66aff198"
    fab:menu_shadowRadius="4dp"
    fab:menu_shadowXOffset="1dp"
    fab:menu_shadowYOffset="4dp"
    fab:menu_showShadow="true">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/material_design_floating_action_menu_item1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_clear_24dp"
        fab:fab_label="Menu Item 1"
        fab:fab_size="mini" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/material_design_floating_action_menu_item2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_clear_24dp"
        fab:fab_label="Menu Item 2"
        fab:fab_size="mini" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/material_design_floating_action_menu_item3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_clear_24dp"
        fab:fab_label="Menu Item 3"
        fab:fab_size="mini" />
</com.github.clans.fab.FloatingActionMenu>

</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>

如果有人可以帮助我解决这个问题,我会很高兴。谢谢。

【问题讨论】:

    标签: android xml android-layout android-recyclerview floating-action-button


    【解决方案1】:

    只需在ToolBar 下方添加另一个RelativeLayout 并将RecyclerViewcom.github.clans.fab.FloatingActionMenu 放在RelativeLayout 中。

    同时更改您的RecyclerView 如下:

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    

    这是完整的工作代码。试试这个:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swifeRefresh"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary" />
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/recycler_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
    
                <com.github.clans.fab.FloatingActionMenu
                    android:id="@+id/material_design_android_floating_action_menu"
                    android:layout_width="match_parent"
                    android:layout_height="244dp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="11dp"
                    android:layout_marginLeft="11dp"
                    android:layout_marginRight="11dp"
                    fab:menu_animationDelayPerItem="55"
                    fab:menu_backgroundColor="@android:color/transparent"
                    fab:menu_buttonSpacing="0dp"
                    fab:menu_colorNormal="#da3c2f"
                    fab:menu_colorPressed="#dc4b3f"
                    fab:menu_colorRipple="#99d4d4d4"
                    fab:menu_fab_label="Floating Action Menu"
                    fab:menu_fab_size="normal"
                    fab:menu_icon="@drawable/fab_add"
                    fab:menu_labels_colorNormal="#333"
                    fab:menu_labels_colorPressed="#444"
                    fab:menu_labels_colorRipple="#66efecec"
                    fab:menu_labels_cornerRadius="3dp"
                    fab:menu_labels_ellipsize="none"
                    fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
                    fab:menu_labels_margin="0dp"
                    fab:menu_labels_maxLines="-1"
                    fab:menu_labels_padding="8dp"
                    fab:menu_labels_position="left"
                    fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
                    fab:menu_labels_showShadow="true"
                    fab:menu_labels_singleLine="false"
                    fab:menu_labels_textColor="#f2f1f1"
                    fab:menu_labels_textSize="15sp"
                    fab:menu_openDirection="up"
                    fab:menu_shadowColor="#66aff198"
                    fab:menu_shadowRadius="4dp"
                    fab:menu_shadowXOffset="1dp"
                    fab:menu_shadowYOffset="4dp"
                    fab:menu_showShadow="true">
    
                    <com.github.clans.fab.FloatingActionButton
                        android:id="@+id/material_design_floating_action_menu_item1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/icon_refresh"
                        fab:fab_label="Menu Item 1"
                        fab:fab_size="mini" />
    
                    <com.github.clans.fab.FloatingActionButton
                        android:id="@+id/material_design_floating_action_menu_item2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/icon_refresh"
                        fab:fab_label="Menu Item 2"
                        fab:fab_size="mini" />
    
                    <com.github.clans.fab.FloatingActionButton
                        android:id="@+id/material_design_floating_action_menu_item3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/icon_refresh"
                        fab:fab_label="Menu Item 3"
                        fab:fab_size="mini" />
                </com.github.clans.fab.FloatingActionMenu>
            </RelativeLayout>
        </LinearLayout>
    </android.support.v4.widget.SwipeRefreshLayout>
    

    输出:

    希望对你有帮助~

    【讨论】:

    • @asaproG 很高兴知道:)
    • @asaproG 如果我的回答似乎有用,请投赞成票。在此先感谢:)
    猜你喜欢
    • 2015-12-04
    • 1970-01-01
    • 2015-07-21
    • 2016-06-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-01
    相关资源
    最近更新 更多