操作栏和框架布局之间的浮动按钮

Question

我想要这样的东西：

我现在有：

具有以下XML：

<?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.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_height="130dp"
            android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:toolbarId="@+id/toolbar"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

                app:contentScrim="?attr/colorPrimary">
            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_width="match_parent">

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

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

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

    <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

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

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

    <android.support.design.widget.FloatingActionButton
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@android:drawable/ic_input_add"
            android:layout_margin="16dp"
            android:clickable="true"
            android:focusable="true"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|end"/>

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

但是我有一些问题：

标题在顶部而不是底部
上面有一个类似分隔符的东西

我现在正在使用协调器，但我不需要折叠工具栏，所以我认为也许必须有其他解决方案。我该如何解决？

Answer 1

让我们首先从提高工具栏开始。我想你要找的是 CollapingToolbarLayout

要使用 CollapsingToolbarLayout，您必须将 ConstraintLayout 更改为 CoordinatorLayout。然后你必须创建一个 AppBarLayout 来保存 CollapsingToolbarLayout 和 Toolbar.

然后要在该位置制作浮动按钮，您必须将其锚定到之前创建的 AppBarLayout，如下所示：

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:clickable="true"
        android:src="@drawable/message" 
        android:focusable="true" 
        app:elevation="30dp"/>

这样它将固定到 AppBarLayout，因此它会随着 AppBarLayout 的上升或下降而上升和下降。

编辑#1：

要从顶部删除标题并删除分隔符，您必须将 activity 的主题设置为 NoActionBar。在您的 AndroidManifest.xml 文件中，转到您的 activity 并将其代码更改为以下内容：

<activity
        android:name="YOUR_ACTIVITY_PATH.BookDetailActivity"
        android:theme="@style/AppTheme.NoActionBar" />

这样 activity 将在没有操作栏的情况下声明，这意味着没有分隔符和标题。

然后要将标题添加到底部，您只需将 CollapsingToolbarLayout 的标题设置为您想要的文本即可。

您可以使用 app:title="YOUR_TITLE" 属性在 xml 中设置它，或者您可以通过为 CollapsingToolbarLayout 变量调用函数 setTitle("YOUR_TITLE") 以编程方式设置它。

下面是完整代码的样子：

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BookDetailActivity">

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

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                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>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="0dp" 
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp" 
        app:layout_constraintStart_toStartOf="parent" 
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp" 
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp" 
        app:layout_constraintEnd_toEndOf="parent" 
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" 
        android:id="@+id/book_detail">
    </FrameLayout>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:clickable="true"
        android:src="@drawable/message" 
        android:focusable="true" 
        app:elevation="30dp"/>


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

编辑 2:

在您的 activity 中，通过以下方式设置您的操作栏： setSupportActionBar(YOUR_TOOLBAR_VARIABLE) 那么你可以使用 getSupportActionBar().setDisplayHomeAsUpEnabled(true)

请注意，工具栏应为此工具栏的 ID：android.support.v7.widget.Toolbar 因此在我们的示例中，工具栏的 ID 为 toolbar

Answer 2

使用此布局

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="192dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:elevation="4dp"
        android:id="@+id/collapsing_toolbar"
        android:background="@color/primary"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

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


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


<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    style="@style/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|right|end" />

使用此 class 用于 FAB 的操作

public class FlexibleSpaceExampleActivity extends AppCompatActivity
    implements AppBarLayout.OnOffsetChangedListener {
    private static final int PERCENTAGE_TO_SHOW_IMAGE = 20;
    private View mFab;
    private int mMaxScrollSize;
    private boolean mIsImageHidden;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flexible_space);

        mFab = findViewById(R.id.flexible_example_fab);

        Toolbar toolbar = (Toolbar) findViewById(R.id.flexible_example_toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                onBackPressed();
            }
        });

        AppBarLayout appbar = (AppBarLayout) findViewById(R.id.flexible_example_appbar);
        appbar.addOnOffsetChangedListener(this);
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (mMaxScrollSize == 0)
            mMaxScrollSize = appBarLayout.getTotalScrollRange();

        int currentScrollPercentage = (Math.abs(i)) * 100
            / mMaxScrollSize;

        if (currentScrollPercentage >= PERCENTAGE_TO_SHOW_IMAGE) {
            if (!mIsImageHidden) {
                mIsImageHidden = true;

                ViewCompat.animate(mFab).scaleY(0).scaleX(0).start();
                /**
                * Realize your any behavior for FAB here!
                **/
            }
        }

        if (currentScrollPercentage < PERCENTAGE_TO_SHOW_IMAGE) {
            if (mIsImageHidden) {
                mIsImageHidden = false;
                ViewCompat.animate(mFab).scaleY(1).scaleX(1).start();
                /**
                * Realize your any behavior for FAB here!
                **/
            }
        }
    }

    public static void start(Context c) {
        c.startActivity(new Intent(c, FlexibleSpaceExampleActivity.class));
    }
}

有一些 Github 实现来开发此视图和许多其他

Collapsing Toolbar with Fab

操作栏和框架布局之间的浮动按钮

Floating button between action bar and Frame Layout

android

floating

android-layout