【问题标题】:Curved android toolbar with shadow带有阴影的弯曲 android 工具栏
【发布时间】:2019-08-30 08:35:01
【问题描述】:

我需要为 Toolbar 或 CardView 提供一个弯曲的底视图。

我尝试过的:

bg_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item
            android:bottom="0dp"
            android:left="-100dp"
            android:right="-100dp"
            android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

将其设置为工具栏的背景会使应用栏的高度(阴影)无效。此外,如果此背景应用于 CardView 背景设置但阴影不是根据背景的形状。

看下图,我想让阴影环绕曲线。

【问题讨论】:

    标签: android android-layout android-toolbar cardview


    【解决方案1】:

    我已经使用 arcView 完成了这项工作

    依赖实现'com.github.florent37:shapeofview:1.3.2'

    <com.github.florent37.shapeofview.shapes.ArcView
            android:layout_width="match_parent"
            android:layout_height="155dp"
            android:elevation="5.0dp"
            app:shape_arc_cropDirection="outside"
            app:shape_arc_height="35dp"
            app:shape_arc_position="bottom">
    
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="155dp"
                android:background="@color/colorPrimary"
                android:elevation="5dp" />
    
        </com.github.florent37.shapeofview.shapes.ArcView>
    

    查看附件图片

    【讨论】:

    • 谢谢。 ArcView 为我完成了这项工作。
    【解决方案2】:

    试试下面的布局

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout 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.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            app:elevation="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/test1"
            android:gravity="center"
            android:padding="@dimen/_10sdp"
            android:text="My Title"
            android:textSize="@dimen/_20ssp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toolbar" />
    
    </android.support.constraint.ConstraintLayout>
    

    test1.xml

        <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle" />
        </item>
        <item
            android:bottom="0dp"
            android:left="-100dp"
            android:right="-100dp"
            android:top="-80dp">
            <shape android:shape="oval">
                <solid android:color="#50CCCCCC" />
            </shape>
        </item>
        <item
            android:bottom="10dp"
            android:left="-100dp"
            android:right="-100dp"
            android:top="-80dp">
            <shape android:shape="oval">
                <solid android:color="@color/colorAccent"/>//Background Color
            </shape>
        </item>
    </layer-list>
    

    输出:

    【讨论】:

    • 非常感谢您的回答 Mehul。我试过你的代码,但视图没有显示任何高程/阴影
    • @HamzaAhmedKhan :只需使用 test.xml 回答更新,请检查它。现在你可以显示阴影了。
    • 感谢您的努力,但这更像是视图的边框/轮廓,而不是渐变阴影。
    【解决方案3】:

    您可以使用以下 xml 文件作为背景,并根据需要提供特定的半径:

    shadowfile.xml

        <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape>
                <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
                <solid android:color="#18000000" />
                <corners android:radius="8dp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
                <solid android:color="#05000000" />
                <corners android:radius="7dp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
                <solid android:color="#10000000" />
                <corners android:radius="6dp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
                <solid android:color="#15000000" />
                <corners android:radius="5dp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
                <solid android:color="#20000000" />
                <corners android:radius="4dp" />
            </shape>
        </item>
    
        <!-- Background -->
        <item>
            <shape>
                <solid android:color="#FFFFFF" />
                <corners android:radius="0dp" />
            </shape>
        </item>
    </layer-list>
    

    注意:这里一项等于一层,您可以根据需要添加或删除

    在布局或工具栏中使用:

    android:background="@drawable/shadowfile"  
    

    来自https://stackoverflow.com/a/51536488/3257579

    【讨论】:

      猜你喜欢
      • 2018-01-03
      • 2023-04-01
      • 1970-01-01
      • 2020-05-04
      • 1970-01-01
      • 2012-01-11
      • 2014-12-21
      • 2020-06-24
      • 2016-10-27
      相关资源
      最近更新 更多