0

我怎样才能创建这样的标题?

我已经尝试过但无法开发如上图所示的相同。下面是我开发的图像。

当我尝试开发时,它看起来像这张图片

请告诉我如何进行这样的设计。下面是我的源代码。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="wrap_content"


    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <LinearLayout
        android:id="@+id/ll_Nav_header_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/side_nav_bar"

        android:orientation="vertical"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp">


        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/nav_header_desc"
            android:paddingTop="@dimen/nav_header_vertical_spacing"

            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:text="@string/nav_header_title"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/nav_header_subtitle" />
    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="40dp"
        app:layout_anchor="@id/ll_Nav_header_main"
        app:layout_anchorGravity="end|center_vertical"
        android:layout_marginStart="80dp"
        app:borderWidth="5dp"
        android:padding="10dp"
        android:background="@color/teal_200"
        android:translationX="@dimen/cardview_default_elevation"
        android:transformPivotX="@dimen/activity_horizontal_margin"
        android:outlineAmbientShadowColor="@color/black"
        app:shapeAppearance="@style/Theme.MyApplication.PopupOverlay"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
4

1 回答 1

0

根据我在类似情况下的回答ShapeAppearanceModel,您可以使用自定义来实现这一点,并将自定义CutoutCircleEdgeTreatment(的子类EdgeTreatment)设置为仅右边缘。

示例用法:

LinearLayout linearLayout = findViewById(R.id.ll_Nav_header_main);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setRightEdge(new CutoutCircleEdgeTreatment(getResources(), 80, 20))
        .build();
MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this, android.R.color.holo_blue_dark));
ViewCompat.setBackground(linearLayout, shapeDrawable);

xml:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white">

    <LinearLayout
        android:id="@+id/ll_Nav_header_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginEnd="70dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="35dp"
            android:text="Header Title Text"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="35dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />

    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="-35dp"
        app:backgroundTint="@android:color/holo_blue_dark"
        app:elevation="3dp"
        app:fabCustomSize="70dp"
        app:layout_constraintTop_toTopOf="@+id/ll_Nav_header_main"
        app:layout_constraintStart_toStartOf="@+id/ll_Nav_header_main"
        app:layout_constraintEnd_toEndOf="@+id/ll_Nav_header_main"
        app:layout_constraintHorizontal_bias="1"
        app:srcCompat="@android:drawable/ic_menu_close_clear_cancel"
        app:tint="@android:color/white" />

</androidx.constraintlayout.widget.ConstraintLayout>   

结果:

header_cutout_image

于 2021-11-19T18:20:09.327 回答