【问题标题】:How i can add fab in the drawer header?我如何在抽屉标题中添加工厂?
【发布时间】:2021-12-16 05:16:30
【问题描述】:

How i can create header like this?

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

when i try to develop it looks like this image

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

<?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>

【问题讨论】:

    标签: android header floating-action-button cradle


    【解决方案1】:

    基于我在类似情况下的answer here,您可以使用自定义ShapeAppearanceModel 实现此目的,并将自定义CutoutCircleEdgeTreatmentEdgeTreatment 的子类)设置为仅右边缘。

    示例用法:

    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>   
    

    结果:

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多