如何在android studio中为线性布局制作“波浪”边框？

问题描述

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

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

代码：

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>

我现在拥有的：

我想要实现的目标：

我该怎么做？

解决方法

啊，这可以通过使用 BottomAppBarTopEdgeTreatment 来实现。如何？让我们看看。

首先，创建一个这样的函数，它返回一个 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() 而不是 {{1 }}。此外，这是您在图像中显示的确切曲线，因为这是 Material 库的核心开发人员之一 Gabriele Mariotti 共享的 Material App Bar 的默认代码。