如何在 android studio 中为线性布局制作 'wavy' 边框？

Question

这个问题是关于移动应用 UI 设计的，我在网上搜索了很长时间这个问题，但没有找到任何令人满意的解释 - 所以我决定把它带到这里。我正在使用 Android studio (Java)，我有一个由 LinearLayout 组成的导航栏，在我的 activity_home.xml 中包含 5 个导航按钮，我想要在该导航栏的中间（不是角落）制作一种圆形 'wavy' 边框。看起来像这样的东西：

我将在这里分享一些代码和图片，展示我已经拥有的和我想要的。

代码：

activity_home.xml:

<LinearLayout
    android:id="@+id/navigationBar"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@drawable/navigation_bar_border"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".20"
        android:background="@drawable/user_icon"
        android:clickable="true" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".20"
        android:background="@drawable/notifications_icon"
        android:clickable="true" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".20"
        android:background="@drawable/add_icon"
        android:clickable="true" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".20"
        android:background="@drawable/search_icon"
        android:clickable="true" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".20"
        android:background="@drawable/home_icon"
        android:clickable="true" />

</LinearLayout>

navigation_bar_border.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle" >
            
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />

            <gradient
                android:startColor="@color/light_dark_color"
                android:endColor="@color/light_dark_color"
                android:angle="90"/>

        </shape>
    </item>
</layer-list>

我现在拥有的：

我想达到的目标：

我该怎么做？

Answer 1

啊，那可以用BottomAppBarTopEdgeTreatment来实现。如何？让我们看看。

首先，创建一个这样的函数，其中 returns 一个 MaterialShapeDrawable，您可以将其设置为 LinearLayout 为：

//Suppressing a Restricted API warning as it's a part of Stock Material Libraries.
@SuppressLint("RestrictedApi")
private fun returnBottomEdgeShapeDrawable(): MaterialShapeDrawable {

    //This is how you get the curve, the main ingredient.
    //BottomAppBarTopEdgeTreatment() takes three parameters:
    //FabMargin - Margin between Fab Button and the curve
    //RoundedCornerRadius - Radius to make the corners round
    //CradleVerticalOffset - Vertical offset of curve and Fab
    val bottomAppBarTopEdgeTreatment = BottomAppBarTopEdgeTreatment(
        2f, 8f, 2f
    )

    //Diameter of the curve, current as Default Fab 56Dp
    bottomAppBarTopEdgeTreatment.fabDiameter = resources.getDimension(R.dimen.56dp)

    //This is further the shape of the LinearLayout.
    //Set Corners to 0 in your case else corners of the LinearLayout will be curved
    val shapeAppearanceModel = ShapeAppearanceModel()
        .toBuilder()
        .setAllCornerSizes(0f)
        //Including the main ingredient here
        .setTopEdge(bottomAppBarTopEdgeTreatment)
        .build()

    //Returning the ShapeDrawable
    return MaterialShapeDrawable(shapeAppearanceModel)
}

这是我的一个项目中的确切代码。现在，将它用于您的 LinearLayout 为：

ViewCompat.setBackground(yourLinearLayout, returnBottomEdgeShapeDrawable())

记得给 LinearLayout 一个 BackgroundTint 因为上面的代码会生成黑色的形状。

我对代码进行了注释以使其更易于理解。

编辑：一个提示，您可以将它用于其他视图以及 ImageView，而且，您可以在其他边以及左侧或底部显示曲线，只需使用 setBottomEdge() 而不是 setTopEdge()。此外，这是您在图像中显示的确切曲线，因为这是 Material 应用栏的默认代码，由 Material 库的核心开发人员之一 Gabriele Mariotti 共享。

如何在 android studio 中为线性布局制作 'wavy' 边框？

How to make a 'wavy' border for a Linear layout in android studio?

android

android-layout

android-linearlayout