如何设置具有自定义行为的折叠工具栏背景以适合整个屏幕 [英] How to set background of collapsing toolbar with custom behavior to fit whole screen

问题描述

我正在跟踪一个不错的仓库，该仓库显示了如何使折叠工具栏自定义行为 WhatsApp-ProfileCollapsingToolbar .

我不喜欢的是当工具栏下面的图片(工具栏的字体为白色)为白色而看不到工具栏时.因此，我试图将工具栏的背景设置为某种颜色.

首先，我添加到 widget_header_view.xml android:background="@android:color/holo_red_light"，现在我有了它:

<?xml version="1.0" encoding="utf-8"?>
<com.anton46.whatsapp_profile.HeaderView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_red_light"
    android:orientation="vertical">

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/white"
        android:textSize="@dimen/header_view_start_text_size"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/last_seen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textColor="@android:color/white" />


</com.anton46.whatsapp_profile.HeaderView>

并且在 activity_main .xml 我已将app:contentScrim="?attr/colorPrimary"更改为app:contentScrim="@android:color/holo_red_light"

但是此仓库使用 https://stackoverflow.com/users/3436179/alexander 在https://stackoverflow.com/a/372​​80227/2401535 无效，因为这样浮动"工具栏会覆盖后退按钮，如下所示:

解决方案

您应该使用padding而不是margin.为此，请像这样编辑WhatsuppHeaderBehavior.java:

private int mStartPaddingLeft;
private int mEndPaddingLeft;
private int mPaddingRight;
private int mStartPaddingBottom;


  @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, HeaderView child, View dependency) {
        shouldInitProperties();

        int maxScroll = ((AppBarLayout) dependency).getTotalScrollRange();
        float percentage = Math.abs(dependency.getY()) / (float) maxScroll;
        float childPosition = dependency.getHeight()
                + dependency.getY()
                - child.getHeight()
                - (getToolbarHeight(mContext) - child.getHeight()) * percentage / 2;

        if (Math.abs(dependency.getY()) >= maxScroll / 2) {
            float layoutPercentage = (Math.abs(dependency.getY()) - (maxScroll / 2)) / Math.abs(maxScroll / 2);
            child.setPaddingRelative((int)(layoutPercentage * mEndPaddingLeft) + mStartPaddingLeft,0,0,0);
         }
        child.setY(childPosition);
        if (isHide && percentage < 1) {
            child.setVisibility(View.VISIBLE);
            isHide = false;
        } else if (!isHide && percentage == 1) {
            child.setVisibility(View.GONE);
            isHide = true;
        }
        return true;
    }


private void shouldInitProperties() {
        if (mStartPaddingLeft == 0) {
            mStartPaddingLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_start_margin_left);
        }

        if (mEndPaddingLeft == 0) {
            mEndPaddingLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_end_margin_left);
        }

        if (mStartPaddingBottom == 0) {
            mStartPaddingBottom = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_start_margin_bottom);
        }

        if (mPaddingRight == 0) {
            mPaddingRight = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_end_margin_right);
        }

        if (mTitleStartSize == 0) {
            mTitleEndSize = mContext.getResources().getDimensionPixelSize(R.dimen.header_view_end_text_size);
        }

        if (mTitleStartSize == 0) {
            mTitleStartSize = mContext.getResources().getDimensionPixelSize(R.dimen.header_view_start_text_size);
        }
    }

对于MainActivity中的工具栏也可以使用setBackground方法

@Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
        int maxScroll = appBarLayout.getTotalScrollRange();
        float percentage = (float) Math.abs(offset) / (float) maxScroll;

        if (percentage == 1f && isHideToolbarView) {
            toolbarHeaderView.setVisibility(View.VISIBLE);
            toolbar.setBackgroundColor(yourColor);
            isHideToolbarView = !isHideToolbarView;

        } else if (percentage < 1f && !isHideToolbarView) {
            toolbarHeaderView.setVisibility(View.GONE);
            toolbar.setBackgroundColor(yourColor);
            isHideToolbarView = !isHideToolbarView;
        }
    }

I'm following nice repo which shows how to make custom behavior of collapsing toolbar WhatsApp-ProfileCollapsingToolbar.

What I don't like is when picture below toolbar (toolbar's font is white) is white then toolbar is not visible. So I'm trying to set background of toolbar to some color.

First I added to widget_header_view.xml android:background="@android:color/holo_red_light" and now I have it like:

<?xml version="1.0" encoding="utf-8"?>
<com.anton46.whatsapp_profile.HeaderView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_red_light"
    android:orientation="vertical">

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/white"
        android:textSize="@dimen/header_view_start_text_size"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/last_seen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textColor="@android:color/white" />


</com.anton46.whatsapp_profile.HeaderView>

And in activity_main.xml I've changed app:contentScrim="?attr/colorPrimary" to app:contentScrim="@android:color/holo_red_light"

But as this repo uses margins in WhatsappHeaderBehavior effect is like:

But I'd like it to be like:

EDIT 1:

solution with paddings proposed by https://stackoverflow.com/users/3436179/alexander in https://stackoverflow.com/a/37280227/2401535 does not help because then "floating" toolbar covers back button like here:

解决方案

You should use padding instead of margin. For this purpose edit WhatsuppHeaderBehavior.java like this:

private int mStartPaddingLeft;
private int mEndPaddingLeft;
private int mPaddingRight;
private int mStartPaddingBottom;


  @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, HeaderView child, View dependency) {
        shouldInitProperties();

        int maxScroll = ((AppBarLayout) dependency).getTotalScrollRange();
        float percentage = Math.abs(dependency.getY()) / (float) maxScroll;
        float childPosition = dependency.getHeight()
                + dependency.getY()
                - child.getHeight()
                - (getToolbarHeight(mContext) - child.getHeight()) * percentage / 2;

        if (Math.abs(dependency.getY()) >= maxScroll / 2) {
            float layoutPercentage = (Math.abs(dependency.getY()) - (maxScroll / 2)) / Math.abs(maxScroll / 2);
            child.setPaddingRelative((int)(layoutPercentage * mEndPaddingLeft) + mStartPaddingLeft,0,0,0);
         }
        child.setY(childPosition);
        if (isHide && percentage < 1) {
            child.setVisibility(View.VISIBLE);
            isHide = false;
        } else if (!isHide && percentage == 1) {
            child.setVisibility(View.GONE);
            isHide = true;
        }
        return true;
    }


private void shouldInitProperties() {
        if (mStartPaddingLeft == 0) {
            mStartPaddingLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_start_margin_left);
        }

        if (mEndPaddingLeft == 0) {
            mEndPaddingLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_end_margin_left);
        }

        if (mStartPaddingBottom == 0) {
            mStartPaddingBottom = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_start_margin_bottom);
        }

        if (mPaddingRight == 0) {
            mPaddingRight = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_end_margin_right);
        }

        if (mTitleStartSize == 0) {
            mTitleEndSize = mContext.getResources().getDimensionPixelSize(R.dimen.header_view_end_text_size);
        }

        if (mTitleStartSize == 0) {
            mTitleStartSize = mContext.getResources().getDimensionPixelSize(R.dimen.header_view_start_text_size);
        }
    }

Also use setBackground method for toolbar in MainActivity

@Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
        int maxScroll = appBarLayout.getTotalScrollRange();
        float percentage = (float) Math.abs(offset) / (float) maxScroll;

        if (percentage == 1f && isHideToolbarView) {
            toolbarHeaderView.setVisibility(View.VISIBLE);
            toolbar.setBackgroundColor(yourColor);
            isHideToolbarView = !isHideToolbarView;

        } else if (percentage < 1f && !isHideToolbarView) {
            toolbarHeaderView.setVisibility(View.GONE);
            toolbar.setBackgroundColor(yourColor);
            isHideToolbarView = !isHideToolbarView;
        }
    }

这篇关于如何设置具有自定义行为的折叠工具栏背景以适合整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！