2017-10-12 128 views
0

问题:试图与拱形底部实现工具栏。滚动时的内容应该经过这个弧空间。是否有可能在Android的默认的矩形改变Android的工具栏的形状?

  • 只有我能想到的(以及尝试)的东西是设置工具栏的背景与具有拱形的绘图。它看起来能解决问题。但是当内容向上滚动时,由于工具栏保持矩形形状,拱形区域中的空白区域保持不变。

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

有什么建议吗?

enter image description here

+0

@commonsware你以前遇到过这种情况?对此有何想法? – RmK

回答

3

这可以相当容易地完成。

<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充当拱容器底部。我创建了我作为背景的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> 

更改绘制来控制你想要多高的android:height财产拱去

输出

enter image description here

+0

我认为你非常接近解决方案。我运行了你的代码。文字进入弧线。但正如我在问题的第二部分中提到的,我想让Collapsibletoolbarlayout操作保持不变。这实际上打破了它。 您能否运行您的代码并验证它? – RmK

+0

@RmK我已经包括了输出。它适用于我。 –

+0

谢谢Ajil。滚动内容正在通过弧线?你能不能分享一下呢? – RmK