具有重叠视图的 DialogFragment

Question

我的动机是拥有一张带有重叠卡片视图图标视图的基础卡片。 我尝试使用 Constraint Layout 作为根并从中创建一个 DialogFragment 来实现相同的目的。 但是，IDE 与 Phone 上的预览是完全不同的。 我想实现：

1. 具有重叠图标的 DialogFragment
2. 并且 ConstraintLayout 的背景应该是透明的。

这是比较

user_profile_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent">

    <LinearLayout
        android:id="@+id/coins_count"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="@+id/cardView"
        app:layout_constraintStart_toStartOf="@id/textView2"
        app:layout_constraintEnd_toEndOf="@id/textView2"
        app:layout_constraintTop_toBottomOf="@id/textView2">


    <TextView
        style="@style/cardBodyText"
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="200" />

    <TextView
        style="@style/cardBodyText"
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="300"/>
    </LinearLayout>

    <TextView
        style="@style/viewParent.headerText"
        android:id="@+id/textView2"
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aman Sharma"
        app:layout_constraintRight_toRightOf="@id/cardView"
        app:layout_constraintLeft_toLeftOf="@id/cardView"
        app:layout_constraintTop_toBottomOf="@+id/materialCardView2" />


    <androidx.cardview.widget.CardView
        android:translationY="-50dp"
        android:translationZ="-3dp"
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/materialCardView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:clipChildren="true"
        app:cardCornerRadius="50dp"
        app:layout_constraintBottom_toTopOf="@id/cardView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_user" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.button.MaterialButton
        style="@style/myMaterialButton"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add as Friend"
        app:layout_constraintStart_toStartOf="@id/flexbox"
        app:layout_constraintEnd_toEndOf="@id/flexbox"
        app:layout_constraintTop_toBottomOf="@id/flexbox"
        app:layout_constraintBottom_toBottomOf="@id/cardView"/>
    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox"
        android:layout_marginTop="20dp"
        android:minHeight="60dp"
        app:alignItems="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@id/coins_count"
        app:layout_constraintEnd_toEndOf="@id/coins_count"
        app:layout_constraintTop_toBottomOf="@id/coins_count">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_user"/>
    </com.google.android.flexbox.FlexboxLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

这是我的 DialogFragmentClass

UserProfileDialogjava

public class UserProfileDialog extends DialogFragment {
    public UserProfileDialog() {

    }
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        DialogUserProfileBinding binding=DialogUserProfileBinding.inflate(inflater,container,false);

        return binding.getRoot();
    }

    @Override
    public void onResume() {
        super.onResume();
        ViewGroup.LayoutParams params=getDialog().getWindow().getAttributes();
        params.width= ViewGroup.LayoutParams.MATCH_PARENT;
        params.height=ViewGroup.LayoutParams.WRAP_CONTENT;
        getDialog().getWindow().setAttributes((WindowManager.LayoutParams) params);

    }
}

Answer 1

好的，这就是我所做的。 首先，我从DialogFragment class 中的onResume中删除了您的行。 然后，在您的 XML 中，我为用户添加了我的图片。

在您调用 UserProfileDialog 的活动中，我使用了这个：

FragmentManager fm = getSupportFragmentManager();
UserProfileDialog upd = new UserProfileDialog();
upd.setStyle(DialogFragment.STYLE_NO_TITLE, R.style.NoActionBarDialog);
upd.show(fm, "upd");

如您所见，我使用setStyle()为您的Dialog设置自定义样式，该样式在themes.xml中定义，如下所示：

<!-- Dialog Theme -->
<style name="NoActionBarDialog" parent="Theme.MaterialComponents.Light.Dialog.Bridge">
    <item name="windowActionBar">false</item>
    <item name="android:windowMinWidthMajor">97%</item>
    <item name="android:windowMinWidthMinor">97%</item>
    <item name="windowNoTitle">true</item>
    <item name="android:colorBackground">@android:color/transparent</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowActionBarOverlay">false</item>
    <item name="android:windowCloseOnTouchOutside">false</item>
</style>

然后，你得到这个：

您现在可以更多地使用其他一些属性来使其成为您想要的样子。 抱歉，视图中的间距和 colors 但这是我的 temp_project 只是为了这样的事情，主题很混乱。 因此，当您在代码中实现此功能时，它应该可以正常工作。