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 ：

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

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

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

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

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

这是完整代码的样子：

<?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 ：

在活动中，按以下步骤设置操作栏： 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" />

将此类用于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

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

2 个答案: