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

Posted 2023-04-18

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

【英文标题】：How to make a 'wavy' border for a Linear layout in android studio?

【发布时间】：2021-05-11 08:18:48

【问题描述】：

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

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

代码：

activity_home.xml：

<LinearLayout
    android:id="@+id/navigationBar"
    android:layout_
    android:layout_
    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_
        android:layout_
        android:layout_weight=".20"
        android:background="@drawable/user_icon"
        android:clickable="true" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_weight=".20"
        android:background="@drawable/notifications_icon"
        android:clickable="true" />

    <TextView
        android:layout_
        android:layout_
        android:layout_weight=".20"
        android:background="@drawable/add_icon"
        android:clickable="true" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_weight=".20"
        android:background="@drawable/search_icon"
        android:clickable="true" />

    <ImageView
        android:layout_
        android:layout_
        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>

我现在拥有的：

我想要达到的目标：

我该怎么做？

【参考方案1】：

啊，这可以通过使用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() 而不是 setTopEdge()。此外，这是您在图片中显示的确切曲线，因为这是 Material 库的核心开发人员之一 Gabriele Mariotti 共享的 Material App Bar 的默认代码。