用户滚动时如何为工具栏中的视图设置动画？

Question

我正在尝试在我的应用程序中添加一些动画。请找到随附的照片以获得动画创意。

我使用了 CoordinatorLayout。我的搜索布局和工具栏托管在 AppBarLayout/CollapsingToolbarLayout 中。下面是我的 NestedScrollView 托管片段。

当用户使用滚动标志滚动时，我可以隐藏搜索布局。我正在尝试实现一个 CoordinatorLayout.Behavior 它将开始将购物车图标向左移动并开始搜索图标以从 0 缩放到 1；一旦用户滚动并且搜索布局开始隐藏。当搜索布局完全隐藏时，我想在第二个屏幕中显示工具栏。当用户向下滚动并通过缓慢向右移动购物车并缩小搜索图标开始显示搜索布局时，它将恢复到初始状态，如第一个屏幕所示。

最初我将工具栏上的搜索图标设置为隐藏，购物车图标和搜索图标位于线性布局内。

请找到我的 xml activity_home_page.xml

<?xml version="1.0" encoding="utf-8"?>
<com.example.ui.customviews.CustomDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/ab_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="131dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <LinearLayout
                    android:id="@+id/ll_search_layout"
                    android:layout_width="match_parent"
                    android:layout_height="75dp"
                    android:layout_gravity="bottom"
                    android:orientation="vertical"
                    android:visibility="visible"
                    app:layout_scrollFlags="scroll|snap">

                    <LinearLayout
                        android:id="@+id/ll_search_box"
                        android:layout_width="match_parent"
                        android:layout_height="51dp"
                        android:layout_marginBottom="@dimen/dimen_12_dp"
                        android:layout_marginLeft="@dimen/dimen_8_dp"
                        android:layout_marginRight="@dimen/dimen_8_dp"
                        android:layout_marginTop="@dimen/dimen_12_dp"
                        android:background="@drawable/round_corner_layout_white"
                        android:elevation="@dimen/dimen_5_dp"
                        android:focusableInTouchMode="true"
                        android:orientation="horizontal">

                        <EditText
                            android:id="@+id/et_search"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_marginLeft="@dimen/dimen_15_dp"
                            android:layout_weight="80"
                            android:background="@android:color/transparent"
                            android:hint="Search for Products"
                            android:padding="@dimen/dimen_5_dp"
                            android:textColor="@color/black"
                            android:textColorHint="@color/hint_text_color"
                            android:textSize="@dimen/dimen_text_16_sp" />

                        <ImageView
                            android:id="@+id/iv_search_icon"
                            android:layout_width="@dimen/dimen_22_dp"
                            android:layout_height="@dimen/dimen_24_dp"
                            android:layout_gravity="center"
                            android:layout_marginLeft="@dimen/dimen_17_dp"
                            android:layout_marginRight="@dimen/dimen_20_dp"
                            android:src="@drawable/ic_search_grey" />
                    </LinearLayout>

                </LinearLayout>

                <include
                    layout="@layout/layout_primary_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/toolbar_primary_height"
                    android:layout_gravity="top"
                    app:layout_collapseMode="pin"/>

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

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/askme_blue"
            app:layout_behavior="com.GetIt.animation.SearchLayoutBehavior"/>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

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

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

    <fragment
        android:id="@+id/navigation_drawer"
        android:name="com.example.ui.fragment.SideMenuFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start" />
</com.example.ui.customviews.CustomDrawerLayout>

我的 layout_primary_toolbar.xml xml 是

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_primary_height"
    android:background="@color/askme_blue"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <LinearLayout
        android:id="@+id/layout_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_drawer_menu"
            android:layout_width="@dimen/dimen_22_dp"
            android:layout_height="@dimen/dimen_22_dp"
            android:layout_gravity="center"
            android:layout_marginLeft="@dimen/dimen_16_dp"
            android:layout_marginRight="@dimen/dimen_15_dp"
            android:src="@drawable/ic_drawer_menu" />

        <ImageView
            android:id="@+id/iv_back_btn"
            android:layout_width="@dimen/dimen_22_dp"
            android:layout_height="@dimen/dimen_20_dp"
            android:layout_gravity="center"
            android:layout_marginLeft="@dimen/dimen_16_dp"
            android:layout_marginRight="@dimen/dimen_15_dp"
            android:src="@drawable/ic_back_button"
            android:visibility="gone"/>

        <LinearLayout
            android:id="@+id/ll_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center">

            <com.GetIt.ui.customviews.TextViewRRegular
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Delhi"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:visibility="visible" />

            <ImageView
                android:id="@+id/toolbar_location_change"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="2dp"
                android:layout_marginTop="2dp"
                android:src="@drawable/ic_edit_location"
                android:visibility="gone"/>
        </LinearLayout>


    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:gravity="right"
        android:layout_marginRight="@dimen/dimen_16_dp">

        <RelativeLayout
            android:id="@+id/rl_cart_count"
            android:layout_width="@dimen/dimen_40_dp"
            android:layout_height="@dimen/dimen_40_dp"
            android:layout_centerVertical="true">

            <ImageView
                android:layout_width="@dimen/dimen_25_dp"
                android:layout_height="@dimen/dimen_24_dp"
                android:layout_centerInParent="true"
                android:clickable="false"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:scaleType="center"
                android:src="@drawable/ic_cart" />

            <TextView
                android:id="@+id/tv_cart_count"
                android:layout_width="@dimen/dimen_17_dp"
                android:layout_height="@dimen/dimen_17_dp"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="@dimen/dimen_3_dp"
                android:layout_marginTop="@dimen/dimen_3_dp"
                android:background="@drawable/cart_count_background_circle"
                android:elevation="@dimen/dimen_5_dp"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="@dimen/dimen_text_10_sp"
                android:textStyle="bold"
                android:visibility="visible" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rl_search"
            android:layout_width="@dimen/dimen_40_dp"
            android:layout_height="@dimen/dimen_40_dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="14dp"
            android:layout_toRightOf="@+id/rl_cart_count">

            <ImageView
                android:id="@+id/iv_search"
                android:layout_width="@dimen/dimen_24_dp"
                android:layout_height="@dimen/dimen_24_dp"
                android:layout_centerInParent="true"
                android:src="@drawable/ic_search" />
        </RelativeLayout>
    </RelativeLayout>

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

在过去的 7 个小时里，我一直坚持这一点。我是安卓动画新手。

最初我以编程方式隐藏 rl_search（搜索框）。我希望当 ll_search_layout 向上滚动（在工具栏下方）时，rl_cart 应该向左移动（这是它的原始位置，没有隐藏 rl_search）并且 rl_search 应该从 0 缩放到 1。

我已经将 ObjectAnimator 与 LinearInterpolator 一起使用，但它根本不起作用。

有什么建议可以实现吗？

附： - 如果你们需要，我可以发布代码以供参考。

谢谢

Answer 1

使用CoordinatorLayout 和AppBarLayout 设计如下布局，并在其中添加Toolbar。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".dashboard.DashboardActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <include
            layout="@layout/toolbar_default"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabGravity="fill"
            app:tabMaxWidth="0dp"
            app:tabIndicatorHeight="4dp"
            app:tabMode="fixed"
            app:tabIndicatorColor="@android:color/white"
            android:background="@color/AppPrimary"/>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_dashboard" />

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

并且在您的仪表板内容的布局 res 中为您的内容定义布局行为，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".dashboard.DashboardActivity"
    tools:showIn="@layout/activity_dashboard">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

这有点过时了，但您可以通过以下链接查看我的解决方案，而无需协调器布局： Android Toolbar + Tab Layout + Drawer, Hide toolbar when scrolling and take TabLayout to the top

祝你好运。

Answer 2

经过2天多的尝试，我终于可以做动画了。如果他们也想做类似的事情，我会为其他人发布这个答案。

我没有使用 android 的动画实用程序，而是使用 hack 来增加和减少填充以及放大和缩小搜索图标。

这是我的行为类

public class SearchLayoutBehavior extends CoordinatorLayout.Behavior<ImageView> {

    Context mContext;

    private static final int DIRECTION_UP = 1;
    private static final int DIRECTION_DOWN = -1;
    private static final int CART_PADDING_LOWER_LIMIT = 0;
    private static int CART_PADDING_UPPER_LIMIT;
    private static final float SEARCH_SCALING_LOWER_LIMIT = 0.0f;
    private static final float SEARCH_SCALING_UPPER_LIMIT = 1.0f;
    private float CART_PADDING_MULTIPLICATION_FACTOR;
    private float SEARCH_SCALE_MULTIPLICATION_FACTOR;

    RelativeLayout mRlSearch, mRlParentCart;
    Toolbar mToolbar;
    LinearLayout mLlSearchLayout;

    boolean mIsSetupDone = false;
    int mScrollingDirection, mPrevDiff1, mPrevDiff2;

    public SearchLayoutBehavior() {
        super();
    }

    public SearchLayoutBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {
        return (dependency.getId() == R.id.ab_app_bar);
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {
        mRlParentCart = (RelativeLayout) dependency.findViewById(R.id.rl_parent_cart_count);
        mRlSearch = (RelativeLayout) dependency.findViewById(R.id.rl_search);
        mToolbar = (Toolbar) dependency.findViewById(R.id.toolbar);
        mLlSearchLayout = (LinearLayout) dependency.findViewById(R.id.ll_search_layout);

        int searchLayoutBottom = mLlSearchLayout.getBottom();
        int searchLayoutTop = mLlSearchLayout.getTop();
        int toolbarBottom = mToolbar.getBottom();

        int diff1 = searchLayoutBottom - toolbarBottom;
        int diff2 = searchLayoutTop - toolbarBottom;

        if (!mIsSetupDone) {
            CART_PADDING_UPPER_LIMIT = mContext.getResources().getDimensionPixelSize(R.dimen.cart_animation_move_left);
            CART_PADDING_MULTIPLICATION_FACTOR = (float) CART_PADDING_UPPER_LIMIT / diff1;
            SEARCH_SCALE_MULTIPLICATION_FACTOR = (float) 1 / diff1;
            mPrevDiff1 = diff1;
            mPrevDiff2 = -diff1;
            mIsSetupDone = true;
        }

        if (mScrollingDirection == DIRECTION_UP && mPrevDiff1 >= diff1) {
            moveCart(mRlParentCart, mPrevDiff1 - diff1, true);
            mPrevDiff1 = diff1;
        } else if (mScrollingDirection == DIRECTION_DOWN && mPrevDiff2 <= diff2) {
            moveCart(mRlParentCart, diff2 - mPrevDiff2, false);
            mPrevDiff2 = diff2;
        }

        if (diff2 == 0) {
            mPrevDiff1 = diff1;
            mPrevDiff2 = -diff1;
        }

        return true;
    }

    private void moveCart(final View view, float by, boolean doMoveLeft) {
        int paddingRight = view.getPaddingRight();
        float scaleX = mRlSearch.getScaleX();
        float scaleY = mRlSearch.getScaleY();

        if (doMoveLeft) {
            paddingRight += (int) (by * CART_PADDING_MULTIPLICATION_FACTOR);
            if (paddingRight >= CART_PADDING_UPPER_LIMIT) {
                view.setPadding(0, 0, CART_PADDING_UPPER_LIMIT, 0);
            } else {
                view.setPadding(0, 0, paddingRight, 0);
            }

            scaleX += by * SEARCH_SCALE_MULTIPLICATION_FACTOR;
            scaleY += by * SEARCH_SCALE_MULTIPLICATION_FACTOR;
            if (Float.compare(scaleX, SEARCH_SCALING_UPPER_LIMIT) >= 0) {
                mRlSearch.setScaleX(SEARCH_SCALING_UPPER_LIMIT);
            } else {
                mRlSearch.setScaleX(scaleX);
            }

            if (Float.compare(scaleY, SEARCH_SCALING_UPPER_LIMIT) >= 0) {
                mRlSearch.setScaleY(SEARCH_SCALING_UPPER_LIMIT);
            } else {
                mRlSearch.setScaleY(scaleY);
            }

        } else {
            paddingRight -= (int) (by * CART_PADDING_MULTIPLICATION_FACTOR);
            if (paddingRight <= CART_PADDING_LOWER_LIMIT) {
                view.setPadding(0, 0, CART_PADDING_LOWER_LIMIT, 0);
            } else {
                view.setPadding(0, 0, paddingRight, 0);
            }

            scaleX -= by * SEARCH_SCALE_MULTIPLICATION_FACTOR;
            scaleY -= by * SEARCH_SCALE_MULTIPLICATION_FACTOR;

            if (Float.compare(scaleX, SEARCH_SCALING_LOWER_LIMIT) == -1) {
                mRlSearch.setScaleX(SEARCH_SCALING_LOWER_LIMIT);
            } else {
                mRlSearch.setScaleX(scaleX);
            }

            if (Float.compare(scaleY, SEARCH_SCALING_LOWER_LIMIT) == -1) {
                mRlSearch.setScaleY(SEARCH_SCALING_LOWER_LIMIT);
            } else {
                mRlSearch.setScaleY(scaleY);
            }
        }
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, ImageView child, View target, int dx, int dy, int[] consumed) {
        //Determine direction changes here
        if (dy > 0 && mScrollingDirection != DIRECTION_UP) {
            mScrollingDirection = DIRECTION_UP;
        } else if (dy < 0 && mScrollingDirection != DIRECTION_DOWN) {
            mScrollingDirection = DIRECTION_DOWN;
        }
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, ImageView child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

}

这是我使用协调器布局的 xml。当搜索布局向上移动时，购物车向左移动，搜索图标放大。

<com.example.ui.customviews.CustomDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/ab_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="131dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <LinearLayout
                    android:id="@+id/ll_search_layout"
                    android:layout_width="match_parent"
                    android:layout_height="75dp"
                    android:layout_gravity="bottom"
                    android:orientation="vertical"
                    android:visibility="visible"
                    android:background="@drawable/search_layout_twin_background"
                    app:layout_scrollFlags="scroll|snap">

                    <LinearLayout
                        android:id="@+id/ll_search_box"
                        android:layout_width="match_parent"
                        android:layout_height="51dp"
                        android:layout_marginBottom="@dimen/dimen_12_dp"
                        android:layout_marginLeft="@dimen/dimen_8_dp"
                        android:layout_marginRight="@dimen/dimen_8_dp"
                        android:layout_marginTop="@dimen/dimen_12_dp"
                        android:background="@drawable/round_corner_layout_white"
                        android:elevation="@dimen/dimen_5_dp"
                        android:focusableInTouchMode="true"
                        android:orientation="horizontal">

                        <EditText
                            android:id="@+id/et_search"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_marginLeft="@dimen/dimen_15_dp"
                            android:layout_weight="80"
                            android:background="@android:color/transparent"
                            android:hint="Search for Products"
                            android:padding="@dimen/dimen_5_dp"
                            android:textColor="@color/black"
                            android:textColorHint="@color/hint_text_color"
                            android:textSize="@dimen/dimen_text_16_sp" />

                        <ImageView
                            android:id="@+id/iv_search_icon"
                            android:layout_width="@dimen/dimen_22_dp"
                            android:layout_height="@dimen/dimen_24_dp"
                            android:layout_gravity="center"
                            android:layout_marginLeft="@dimen/dimen_17_dp"
                            android:layout_marginRight="@dimen/dimen_20_dp"
                            android:src="@drawable/ic_search_grey" />
                    </LinearLayout>

                </LinearLayout>

                <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_primary_height"
    android:background="@color/askme_blue"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <LinearLayout
        android:id="@+id/layout_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center">

            <ImageView
                android:id="@+id/iv_drawer_menu"
                android:layout_width="@dimen/dimen_22_dp"
                android:layout_height="@dimen/dimen_22_dp"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/dimen_16_dp"
                android:layout_marginRight="@dimen/dimen_15_dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_drawer_menu" />

            <ImageView
                android:id="@+id/iv_back_btn"
                android:layout_width="@dimen/dimen_22_dp"
                android:layout_height="@dimen/dimen_20_dp"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/dimen_16_dp"
                android:layout_marginRight="@dimen/dimen_15_dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_back_button"
                android:visibility="gone" />
        </FrameLayout>

        <LinearLayout
            android:id="@+id/ll_location"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="?attr/selectableItemBackgroundBorderless">

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Delhi"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:visibility="visible" />

            <ImageView
                android:id="@+id/toolbar_location_change"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/dimen_3_dp"
                android:layout_marginTop="@dimen/dimen_4_dp"
                android:src="@drawable/ic_edit_location"
                android:visibility="visible" />
        </LinearLayout>


    </LinearLayout>

    <FrameLayout
        android:layout_width="@dimen/dimen_100_dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:layout_marginRight="@dimen/dimen_16_dp"
        android:gravity="right">

        <RelativeLayout
            android:id="@+id/rl_search"
            android:layout_width="@dimen/dimen_40_dp"
            android:layout_height="@dimen/dimen_40_dp"
            android:layout_gravity="center_vertical|right"
            android:layout_marginLeft="14dp"
            android:background="?attr/selectableItemBackgroundBorderless">

            <ImageView
                android:id="@+id/iv_search"
                android:layout_width="@dimen/dimen_24_dp"
                android:layout_height="@dimen/dimen_24_dp"
                android:layout_centerInParent="true"
                android:src="@drawable/ic_search" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rl_parent_cart_count"
            android:layout_width="94dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|right"
            android:gravity="right"
            android:paddingRight="54dp">

            <RelativeLayout
                android:id="@+id/rl_cart_count"
                android:layout_width="@dimen/dimen_40_dp"
                android:layout_height="@dimen/dimen_40_dp"
                android:layout_gravity="center_vertical|right"
                android:background="?attr/selectableItemBackgroundBorderless">

                <ImageView
                    android:layout_width="@dimen/dimen_25_dp"
                    android:layout_height="@dimen/dimen_24_dp"
                    android:layout_centerInParent="true"
                    android:clickable="false"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:scaleType="center"
                    android:src="@drawable/ic_cart" />

                <TextView
                    android:id="@+id/tv_cart_count"
                    android:layout_width="@dimen/dimen_17_dp"
                    android:layout_height="@dimen/dimen_17_dp"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginRight="@dimen/dimen_3_dp"
                    android:layout_marginTop="@dimen/dimen_3_dp"
                    android:background="@drawable/cart_count_background_circle"
                    android:elevation="@dimen/dimen_5_dp"
                    android:gravity="center"
                    android:textColor="@color/white"
                    android:textSize="@dimen/dimen_text_10_sp"
                    android:textStyle="bold"
                    android:visibility="visible" />
            </RelativeLayout>
        </RelativeLayout>
    </FrameLayout>

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

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

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/askme_blue"
            app:layout_behavior="com.GetIt.animation.SearchLayoutBehavior"/>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

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

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

    <fragment
        android:id="@+id/navigation_drawer"
        android:name="com.example.ui.fragment.SideMenuFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start" />
</com.example.ui.customviews.CustomDrawerLayout>

这就是它的样子。