如何在appbarlayout中制作带有圆角和高程的工具栏?喜欢这张照片
Posted
技术标签:
【中文标题】如何在appbarlayout中制作带有圆角和高程的工具栏?喜欢这张照片【英文标题】:How to make toolbar with rounded corners and elevation inside appbarlayout? Like this picture 【发布时间】:2019-01-03 07:16:28 【问题描述】:这是我尝试创建的带有圆角工具栏的代码,如图所示。
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_
android:layout_
android:layout_margin="12dp"
android:background="@android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
android:background="@drawable/bg_actionbar" />
</android.support.design.widget.AppBarLayout>
bg_actionbar.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/white" />
<corners android:radius="16dp" />
</shape>
【问题讨论】:
【参考方案1】:在AppBarLayout
中设置app:elevation="0dp"
并将android:elevation="4dp"
设置为Toolbar
并且还将 'android:layout_margin="4dp"' 设置为工具栏,这将帮助您显示阴影。
所以你的布局会是这样的
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
app:elevation="0dp"
android:layout_
android:layout_
android:layout_margin="12dp"
android:background="@android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:elevation="4dp"
android:layout_margin="4dp"
android:layout_
android:layout_
android:background="@drawable/bg_actionbar" />
【讨论】:
感谢您的支持,我也试过了,但它只适用于Api 21及更高版本,低于api 21呢? 如果您正在考虑这些设备,那么您必须在 photo shop 中创建一个带有这种阴影的图像 bg 并设置为背景【参考方案2】:你可以试试:
<android.support.design.widget.AppBarLayout android:layout_ android:layout_ android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent" tools:layout_editor_absoluteX="0dp"> <android.support.v7.widget.CardView android:layout_ android:layout_ android:layout_margin="20dp" app:cardCornerRadius="14dp" app:cardElevation="20dp"> <android.support.v7.widget.Toolbar android:layout_ android:layout_> <TextView android:layout_ android:layout_ android:text="ElementApp" android:textSize="24sp" android:textStyle="bold" /> </android.support.v7.widget.Toolbar> </android.support.v7.widget.CardView> </android.support.design.widget.AppBarLayout>
输出将是:The output Image
【讨论】:
【参考方案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"
【讨论】:
【参考方案4】:你可以在没有 appbarlayout 的情况下使用工具栏
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
app:elevation="4dp"
android:layout_
android:layout_
android:background="@drawable/bg_actionbar" />
【讨论】:
【参考方案5】:你为什么不用cardview包装它
【讨论】:
以上是关于如何在appbarlayout中制作带有圆角和高程的工具栏?喜欢这张照片的主要内容,如果未能解决你的问题,请参考以下文章
如何在 android 中制作带有圆角的 EditText 组件