DialogFragment 使用指南:几个小问题的解法

简介: DialogFragment是Android中用于创建弹窗的特殊Fragment,继承自Fragment。使用步骤包括:1. 创建子类,2. 在onCreateView加载布局,3. onViewCreated初始化控件,4. 通过show方法显示。示例代码展示了一个基本的DialogFragment及其布局。此外,文中还解答了三个常见问题:如何设置弹窗宽度为match_parent,如何使弹窗位于屏幕底部,以及如何去除弹窗四周的默认padding。每个问题都提供了相应的解决方案,涉及在onStart中调整窗口参数和设置自定义样式。

一、DialogFragment 简介

DialogFragment 是 Android 中的一个特殊的 Fragment,通常用于创建和显示弹窗。DialogFragment 继承自 Fragment,因此具有 Fragment 的所有特性。

DialogFragment 的使用非常简单,只需要如下几步:

  1. 创建 DialogFragment 的子类。
  2. onCreateView() 方法中,加载弹窗的布局文件。
  3. onViewCreated() 方法中,初始化弹窗的控件。
  4. 使用 show() 方法显示弹窗。

以下是一个简单的 DialogFragment 示例:

public class SimpleDialogFragment extends DialogFragment {
   
   

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
   
   
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_simple_dialog, container, false);

        return view;
    }
}

fragment_simple_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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:gravity="center"
        android:text="测试弹窗"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

要使用该示例,需要在 Activity 中添加以下代码:

// 创建弹窗实例
SimpleDialogFragment dialogFragment = new SimpleDialogFragment();

// 显示弹窗
dialogFragment.show(getSupportFragmentManager(), "SimpleDialogFragment");

该代码将创建一个 SimpleDialogFragment 实例,并使用 show() 方法显示弹窗。

二、几个小问题的解法

问题1:弹窗宽度设置为 match_parent 没有效果

明明我的布局里面设置的 layout_widthmatch_parent ,但是运行起来发现弹窗的内容宽度却是 wrap_content 的效果。运行效果如下图这样拉跨:

image.png

原因是当我们以布局 View 创建 DialogFragment 时,在 View 添加后,对话框最外层的 ViewGroup 并不知道我们导入的 View 所需要的的宽度(也就是说在 在 onCreateView 和 onViewCreated 方法里都不知道需要宽度)。

所以我们需要在 onStart 生命周期里修改一下对话框尺寸参数。

解决方案

class SimpleDialogFragment : DialogFragment(){
    companion object {
        const val TAG = "SimpleDialogFragment"
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View {
        return inflater.inflate(R.layout.layout_simple_dialog_fragment, container, false)
    }

    override fun onStart() {
        super.onStart()
        val window = dialog?.window
        // 设置宽度为铺满
        window?.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
    }
}

image.png

问题2:如何设置弹窗布局内容位于屏幕底部

class SimpleDialogFragment : DialogFragment(){
    companion object {
        const val TAG = "SimpleDialogFragment"
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View {
        return inflater.inflate(R.layout.layout_simple_dialog_fragment, container, false)
    }

    override fun onStart() {
        super.onStart()
        val window = dialog?.window
        // 设置宽度为铺满
        window?.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        // 设置布局内容显示在底部
        window?.setGravity(Gravity.BOTTOM)
    }
}

image.png

问题3:弹窗四周默认的 padding 如何去掉

在经过上面两步设置后,基本满足我们的要求了,不过还有点小瑕疵,在弹窗四周还有一个默认的 padding 🤪:

image.png

解决方案如下

首先,创建一个自定义的样式,去掉 padding。在 res/values/styles.xml 文件中,添加如下代码:

<style name="DialogFragmentNoPaddingStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
        <item name="android:paddingTop">0dp</item>
        <item name="android:paddingBottom">0dp</item>
    </style>

然后,在 DialogFragment 的 onCreate() 方法中,设置该样式:

class SimpleDialogFragment : DialogFragment(){
    companion object {
        const val TAG = "SimpleDialogFragment"
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 设置 Style
        setStyle(STYLE_NO_FRAME, R.style.DialogFragmentNoPaddingStyle)
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View {
        return inflater.inflate(R.layout.layout_simple_dialog_fragment, container, false)
    }

    override fun onStart() {
        super.onStart()
        val window = dialog?.window
        // 设置宽度为铺满
        window?.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        // 设置布局内容显示在底部
        window?.setGravity(Gravity.BOTTOM)
    }
}

运行效果如下:

image.png

(完)

相关文章
|
6月前
|
XML Java API
30. 【Android教程】吐司提示:Toast 的使用方法
30. 【Android教程】吐司提示:Toast 的使用方法
240 2
|
7月前
|
Android开发 Kotlin
android开发,使用kotlin学习滚动控件RecyclerView
android开发,使用kotlin学习滚动控件RecyclerView
172 0
|
Android开发
侧滑菜单的简单使用
本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,说到侧滑,相信很多人都用过github上的SlidingMenu,不过好像有两个版本,一个是单独的,另一个需要依赖另一个开源项目:ActionBarSherlock;既然Google为我们提供了这个控件,为何不用咧,而且在Material Design设计规范中,随处可见的很多侧滑菜单的动画效果,大都可以通过Toolbar +DrawerLayout来实现。
|
Android开发
官方侧滑菜单的简单使用
本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,说到侧滑,相信很多人都用过github上的SlidingMenu,不过好像有两个版本,一个是单独的,另一个需要依赖另一个开源项目:ActionBarSherlock;既然Google为我们提供了这个控件,为何不用咧,而且在Material Design设计规范中,随处可见的很多侧滑菜单的动画效果,大都可以通过Toolbar +DrawerLayout来实现。
|
Android开发
DrawerLayout(官方侧滑菜单)的简单使用
本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,说到侧滑,相信很多人都用过github上的SlidingMenu,不过好像有两个版本,一个是单独的,另一个需要依赖另一个开源项目:ActionBarSherlock;既然Google为我们提供了这个控件,为何不用咧,而且在Material Design设计规范中,随处可见的很多侧滑菜单的动画效果,大都可以通过Toolbar +DrawerLayout来实现。 1.使用的注意事项 1.主内容视图一定要是Dra
|
JSON Android开发 数据格式
Android 购物车实现(思路+步骤+源码)
Android 购物车实现(思路+步骤+源码)
944 0
Android 购物车实现(思路+步骤+源码)
autojs之RecycleView抽丝剥茧
作者: 牙叔 使用情景: 解析RecycleView常用方法
351 0
autojs之RecycleView抽丝剥茧
|
缓存 Android开发
聊聊RecyclerView新出的ConcatAdapter如何使用
聊聊RecyclerView新出的ConcatAdapter如何使用
聊聊RecyclerView新出的ConcatAdapter如何使用
|
Java Android开发 Python
Android 逆向笔记 —— 一个简单 CrackMe 的逆向总结
Android 逆向笔记 —— 一个简单 CrackMe 的逆向总结
Android 逆向笔记 —— 一个简单 CrackMe 的逆向总结
|
存储 调度 Android开发
Android 深入研究之 ✨ Activity启动流程+Activity生命周期✨
Activity分析目录 前言 Activity生命周期 1.activity的四个状态 2.activity的生命周期 3.activity优先级 Activity启动流程 Activity的启动流程分析