具有重叠视图的 DialogFragment
DialogFragment with overlapping view
我的动机是拥有一个带有重叠卡片视图图标视图的基本卡片。我尝试使用 Constraint Layout 作为根并从中创建一个 DialogFragment 来实现相同的效果。但是,IDE 与 Phone 上的预览完全不同。
我想达到:
- 带有重叠图标的 DialogFragment
- 并且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);
}
}
好的,这就是我所做的。首先,我从 DialogFragment
class 中的 onResume
中删除了你的台词。然后,在你的 XML 中,我为用户添加了我的照片。
在调用 UserProfileDialog 的 activity 中,我使用了这个:
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>
然后,你得到这个:
您现在可以使用其他一些属性来发挥更多作用,让它成为您想要的样子。抱歉视图内的间距和颜色,但这是我的 temp_project 只是为了这样的事情,主题很混乱。因此,当您在代码中实现它时,它应该可以正常工作。
我的动机是拥有一个带有重叠卡片视图图标视图的基本卡片。我尝试使用 Constraint Layout 作为根并从中创建一个 DialogFragment 来实现相同的效果。但是,IDE 与 Phone 上的预览完全不同。 我想达到:
- 带有重叠图标的 DialogFragment
- 并且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);
}
}
好的,这就是我所做的。首先,我从 DialogFragment
class 中的 onResume
中删除了你的台词。然后,在你的 XML 中,我为用户添加了我的照片。
在调用 UserProfileDialog 的 activity 中,我使用了这个:
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>
然后,你得到这个:
您现在可以使用其他一些属性来发挥更多作用,让它成为您想要的样子。抱歉视图内的间距和颜色,但这是我的 temp_project 只是为了这样的事情,主题很混乱。因此,当您在代码中实现它时,它应该可以正常工作。