Плавающая кнопка между панелью действий и макетом кадра

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>

Но у меня есть некоторые проблемы:

1. Название сверху, а не снизу
2. Сверху есть что-то вроде разделителя

Сейчас я использую координатор, но мне не нужна сворачивающаяся панель инструментов, поэтому я думаю, что, возможно, должно быть другое решение.Как я могу решить это?

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 на нужный вам текст.

Вы можете установить его в xml с атрибутом app:title="YOUR_TITLE" или установить его программно, вызвав функцию 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)

Обратите внимание, что идентификатор панели инструментов должен быть таким: android.support.v7.widget.Toolbar, поэтому в нашем случае панель инструментов с идентификатором 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 для разработки этого представления и многие другие.

Свертывающаяся панель инструментов с Fab