是否可以从Android中的默认矩形更改Android工具栏的形状?

时间:2017-10-12 19:35:18

标签: android android-layout android-toolbar

问题:尝试使用拱形底部实现工具栏。滚动时的内容应该通过此弧空间。

  • 我唯一想到的(以及尝试过的)就是设置工具栏的背景,其中有一个具有拱形的drawable。看起来它解决了问题。但是当内容向上滚动时,拱形中的空白区域仍然存在,因为工具栏保持其矩形形状。

  • 我还试图避免使用自定义形状而不是工具栏,因为此工具栏是由协调器布局控制的Collapsibletoolbarlayout和Appbarlayout的一部分。

有什么建议吗?

enter image description here

1 个答案:

答案 0 :(得分:4)

这可以很容易地完成。

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0000"
        app:elevation="0dp">

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

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:layout_collapseMode="pin"/>

            <!--Other collapsing toolbar components here-->

        </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="@string/appbar_scrolling_view_behavior">

            <!--Your content here-->

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/curve"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom"
        android:layout_gravity="bottom"/>

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

锚定在FrameLayout底部的AppBarLayout充当拱门的容器。我创建了一个矢量drawable,我用它作为FrameLayout

的背景

<强> curve.xml

<vector android:width="100dp"
    android:height="40dp"
    android:viewportHeight="50"
    android:viewportWidth="400"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <path
        android:pathData="M0,0L400,0L400,50Q200,-50,0,50L0,0"
        android:fillColor="@color/colorPrimary"/>

</vector>

更改drawable的android:height属性以控制拱门的移动高度

<强>输出

enter image description here