Skip to content

自定义宽高和Builder

有些时候我们需要自定义弹窗的大小。系统默认的尺寸可能不符合我们定制化的需求。 大体思路是获得当前window的宽高,将window宽高设置成缩放后的尺寸。 在DialogFragmentonStart中获取并调整宽高参数。

这里给出了几个常用自定义DialogFragment的例子

DialogFragment 自定义背景和宽高

先申请无标题栏

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);
    // ......
    }

然后在onStart方法里重新指定宽高

先设置透明背景,然后通过DisplayMetrics设置宽高。

    private int mDialogWid  = -1;
    private int mDialogHeight = -1;

    @Override
    public void onStart() {
        Log.d(TAG, "onStart");
        super.onStart();
        Window window = getDialog().getWindow();
        if (null != window) {
            WindowManager.LayoutParams windowParams = window.getAttributes();
            windowParams.dimAmount = 0.0f;
            window.setAttributes(windowParams);
            DisplayMetrics dm = new DisplayMetrics();
            getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
            if (mDialogHeight < 0) {
                mDialogHeight = (int) (dm.heightPixels * 0.7);
                mDialogWid = (int) (dm.widthPixels * 0.5);
            }
            window.setLayout(mDialogWid, mDialogHeight);
        }
    }

默认横屏情况下,dialogFragment显示出来,锁屏再解锁后,手机解锁后可能会有从竖屏转换到横屏的动作,dialog宽高很可能显示不正常。 可以创建dialog宽高属性mDialogWid,mDialogHeight默认为负值;onStart中判断一下是否使用记录中的宽高。

DialogFragment生命周期,创建,显示最后销毁

onAttach
onCreate
onCreateDialog
onCreateView
onViewStateRestored
onStart
onPause
onDestroy

创建,显示,锁屏,解锁,最后销毁;以下是三星手机log

onAttach
onCreate
onCreateDialog
onCreateView
onViewStateRestored
onStart
onPause // 锁屏
onSaveInstanceState
onStart // 亮屏但还没解锁
onPause
onSaveInstanceState
onStart // 解锁
onPause
onDestroy

自定义FragmentDialog

自定义FragmentDialog

使用的样式

    <style name="TranslucentStyle">
        <item name="android:windowNoTitle">true</item>
        <!--windowBackground是设置你的xml显示的root的背景-->
        <item name="android:windowBackground">@color/transparent</item>
    </style>

BlackRedConfirmDialog.java

import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

import com.rustfisher.demo.R;

/**
 * 确认和取消 红与黑
 * Created by Rust on 2018/04/28.
 */
public class BlackRedConfirmDialog extends android.support.v4.app.DialogFragment {
    public static final String F_TAG = "f_tag_confirm_dialog";
    private int mDialogWid = -1;
    private int mDialogHeight = -1;

    private String mContent = "";
    private String mTitle = "";
    private String mCancelText = "Cancel";
    private String mConfirmText = "Confirm";

    private OnItemClickListener onItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    public static BlackRedConfirmDialog build(String title, String content, String cancelText, String confirmText) {
        BlackRedConfirmDialog d = new BlackRedConfirmDialog();
        d.setConfirmText(confirmText);
        d.setContent(content);
        d.setTitle(title);
        d.setCancelText(cancelText);
        return d;
    }

    @Override
    public void onStart() {
        super.onStart();
        Window window = getDialog().getWindow();
        if (null != window) {
            WindowManager.LayoutParams windowParams = window.getAttributes();
            windowParams.dimAmount = 0.0f;
            window.setAttributes(windowParams);
            DisplayMetrics dm = new DisplayMetrics();
            getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
            if (mDialogWid < 0) {
                mDialogHeight = (int) (dm.heightPixels * 0.55);
                mDialogWid = (int) (dm.widthPixels * 0.5);
            }
            window.setLayout(mDialogWid, mDialogHeight);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Window window = getDialog().getWindow();
        if (null != window) {
            window.requestFeature(Window.FEATURE_NO_TITLE);
        }
        View root = inflater.inflate(R.layout.dialog_yes_no, container, false);
        TextView confirmTv = root.findViewById(R.id.confirm_tv);
        TextView cancelTv = root.findViewById(R.id.cancel_tv);
        TextView titleTv = root.findViewById(R.id.title_tv);
        TextView contentTv = root.findViewById(R.id.content_tv);
        titleTv.setText(mTitle);
        contentTv.setText(mContent);
        cancelTv.setText(mCancelText);
        confirmTv.setText(mConfirmText);
        confirmTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (null != onItemClickListener) {
                    onItemClickListener.onConfirm();
                }
            }
        });
        cancelTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (null != onItemClickListener) {
                    onItemClickListener.onCancel();
                }
            }
        });

        return root;
    }

    public void setContent(String mContent) {
        this.mContent = mContent;
    }

    public void setTitle(String mTitle) {
        this.mTitle = mTitle;
    }

    public void setCancelText(String mCancelText) {
        this.mCancelText = mCancelText;
    }

    public void setConfirmText(String mConfirmText) {
        this.mConfirmText = mConfirmText;
    }

    public interface OnItemClickListener {
        void onCancel();

        void onConfirm();
    }
}

dialog_yes_no.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#24292f">

    <View
        android:id="@+id/header_view"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/shape_dialog_header_bg" />

    <TextView
        android:id="@+id/title_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/header_view"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="4dp"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/content_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/title_tv"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:textColor="#818181"
        android:textSize="15sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="24dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/cancel_tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#373b40"
            android:gravity="center"
            android:text="cancel"
            android:textColor="#ffffff"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/confirm_tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#e34e15"
            android:gravity="center"
            android:text="yes"
            android:textColor="#ffffff"
            android:textSize="16sp" />

    </LinearLayout>

</RelativeLayout>

shape_dialog_header_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="270"
        android:endColor="#00252a30"
        android:startColor="#e8e95c27" />

</shape>

Builder模式的DialogFragment

需要配置的属性太多了,使用Builder模式。 调用的时候一串代码即可搞定,例如

    /**
     * 显示确认弹窗
     * 弹窗样式为 点击按钮则消失
     */
    private void showDefDismissUConfirmDialog(int textResId, final String fTag) {
        new UConfirmDialog.Builder().create()
                .setContent(textResId)
                .hideHeaderIvAndTv().defaultDismiss().setConfirmTextResId(R.string.confirm)
                .build()
                .show(getSupportFragmentManager(), fTag);
    }

弹窗代码 UConfirmDialog.java

import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.text.TextUtils;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;

import com.xxxx.R;

/**
 * 确认弹窗
 * Created by Rust on 2018/05/04.
 */
public class UConfirmDialog extends DialogFragment {
    public static final String F_TAG = "f_tag_xxx_confirm_dialog";
    private int mDialogWid = -1;
    private int mDialogHeight = -1;

    private boolean mShowHeadIv = true;
    private boolean mShowTitleTv = true;
    private int mHeadIvResId;
    private int mContentResId = -1;
    private int mConfirmTextResId = -1;
    private int mTitleTextResId = -1;
    private String mContent = "";
    private String mTitle = "";
    private String mConfirmText = "Confirm";

    private OnItemClickListener onItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    @Override
    public void onStart() {
        super.onStart();
        Window window = getDialog().getWindow();
        if (null != window) {
            WindowManager.LayoutParams windowParams = window.getAttributes();
            windowParams.dimAmount = 0.0f;
            window.setAttributes(windowParams);
            DisplayMetrics dm = new DisplayMetrics();
            getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
            if (mDialogWid < 0) {
                mDialogHeight = (int) (dm.heightPixels * 0.68);
                mDialogWid = (int) (dm.widthPixels * 0.65);
            }
            window.setLayout(mDialogWid, mDialogHeight);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Window window = getDialog().getWindow();
        if (null != window) {
            window.requestFeature(Window.FEATURE_NO_TITLE);
        }
        View root = inflater.inflate(R.layout.dialog_u_confirm, container, false);
        ImageView headIv = root.findViewById(R.id.head_iv);
        TextView confirmTv = root.findViewById(R.id.confirm_tv);
        View closeIv = root.findViewById(R.id.close_iv);
        TextView titleTv = root.findViewById(R.id.title_tv);
        TextView contentTv = root.findViewById(R.id.content_tv);

        if (mContentResId > 0 && TextUtils.isEmpty(mContent)) {
            contentTv.setText(mContentResId);
        } else {
            contentTv.setText(mContent);
        }
        if (mConfirmTextResId > 0) {
            confirmTv.setText(mConfirmTextResId);
        } else {
            confirmTv.setText(mConfirmText);
        }
        confirmTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (null != onItemClickListener) {
                    onItemClickListener.onConfirm();
                }
            }
        });
        closeIv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (null != onItemClickListener) {
                    onItemClickListener.onCancel();
                }
            }
        });
        if (mTitleTextResId > 0 && TextUtils.isEmpty(mTitle)) {
            titleTv.setText(mTitleTextResId);
        } else {
            titleTv.setText(mTitle);
        }

        titleTv.setVisibility(mShowTitleTv ? View.VISIBLE : View.GONE);
        if (mShowHeadIv) {
            headIv.setImageResource(mHeadIvResId);
            headIv.setVisibility(View.VISIBLE);
        } else {
            headIv.setVisibility(View.GONE);
        }
        return root;
    }

    public void setConfirmTextResId(int id) {
        this.mConfirmTextResId = id;
    }

    public void setContent(String mContent) {
        this.mContent = mContent;
    }

    public void setContent(int resId) {
        this.mContentResId = resId;
    }

    public void setContentResId(int mContentResId) {
        this.mContentResId = mContentResId;
    }

    public void setTitle(String mTitle) {
        this.mTitle = mTitle;
    }

    public void setTitleTextResId(int mTitleTextResId) {
        this.mTitleTextResId = mTitleTextResId;
    }

    public void setConfirmText(String mConfirmText) {
        this.mConfirmText = mConfirmText;
    }

    public void setShowHeadIv(boolean mShowHeadIv) {
        this.mShowHeadIv = mShowHeadIv;
    }

    public void setHeadIvResId(int mHeadIvResId) {
        this.mHeadIvResId = mHeadIvResId;
    }

    public void setShowTitleTv(boolean mShowTitleTv) {
        this.mShowTitleTv = mShowTitleTv;
    }

    public interface OnItemClickListener {
        void onCancel();

        void onConfirm();
    }

    public static class Builder {
        private UConfirmDialog d;

        public Builder create() {
            d = new UConfirmDialog();
            d.setStyle(DialogFragment.STYLE_NORMAL, R.style.TranslucentStyle); // 设定透明背景样式
            return this;
        }

        public Builder setTitle(String title) {
            d.setTitle(title);
            return this;
        }

        public Builder setTitle(int resId) {
            d.setTitleTextResId(resId);
            return this;
        }

        public Builder showTitle(boolean showTitle) {
            d.setShowTitleTv(showTitle);
            return this;
        }

        public Builder showHeadIv(boolean show) {
            d.setShowHeadIv(show);
            return this;
        }

        public Builder setHeadIvRes(int resId) {
            d.setHeadIvResId(resId);
            return this;
        }

        public Builder hideHeaderIvAndTv() {
            d.setShowHeadIv(false);
            d.setShowTitleTv(false);
            return this;
        }

        public Builder setContent(int resId) {
            d.setContentResId(resId);
            return this;
        }

        public Builder setContent(String content) {
            d.setContent(content);
            return this;
        }

        public Builder setConfirmTextResId(int resId) {
            d.setConfirmTextResId(resId);
            return this;
        }

        public Builder defaultDismiss() {
            d.setOnItemClickListener(new OnItemClickListener() {
                @Override
                public void onCancel() {
                    d.dismiss();
                }

                @Override
                public void onConfirm() {
                    d.dismiss();
                }
            });
            return this;
        }

        public Builder setOnItemClickListener(OnItemClickListener listener) {
            d.setOnItemClickListener(listener);
            return this;
        }

        public UConfirmDialog build() {
            return d;
        }

    }
}

xml文件 dialog_u_confirm.xml 和相对应的部分资源

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/pic_def_dialog_bg">

    <ImageView
        android:id="@+id/close_iv"
        style="@style/UDialogCloseIconStyle" />

    <LinearLayout
        android:id="@+id/main_title_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/header_view"
        android:layout_marginTop="12dp"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/head_iv"
            android:layout_width="42dp"
            android:layout_height="42dp" />

        <TextView
            android:id="@+id/title_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:textColor="#ffffff"
            android:textSize="20sp" />

    </LinearLayout>

    <TextView
        android:id="@+id/confirm_tv"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_alignParentBottom="true"
        android:background="#e34e15"
        android:gravity="center"
        android:text="yes"
        android:textColor="#ffffff"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/content_tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_above="@id/confirm_tv"
        android:layout_below="@id/main_title_layout"
        android:layout_centerHorizontal="true"
        android:layout_marginEnd="34dp"
        android:layout_marginStart="34dp"
        android:layout_marginTop="-4dp"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="16sp" />

</RelativeLayout>

styles.xml

    <!-- 弹窗右上角的关闭按钮 -->
    <style name="UDialogCloseIconStyle">
        <item name="android:layout_height">@dimen/u_dialog_close_icon_size</item>
        <item name="android:layout_width">@dimen/u_dialog_close_icon_size</item>
        <item name="android:layout_alignParentEnd">true</item>
        <item name="android:padding">2dp</item>
        <item name="android:layout_marginEnd">8dp</item>
        <item name="android:layout_marginTop">6dp</item>
        <item name="android:src">@drawable/ic_close_dialog</item>
    </style>

自定义进度条弹窗

自定义一个背景透明的UProgressDialog

对于progress,先自定义样式layer_list_u_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--
      layer-list样式按照顺序堆叠,所以最上层的放在最后面,而且如果设置了progressDrawable
      的属性,再去设置progressbar的background是没有效果的
      -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="3dp" />
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#f65212" />
            </shape>
        </clip>
    </item>
</layer-list>

layout文件dialog_u_progress.xml;一个tv一个pb

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:gravity="center">

    <ProgressBar
        android:id="@+id/d_pb"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        android:maxHeight="6dp"
        android:progressDrawable="@drawable/layer_list_u_progress_bar" />

    <TextView
        android:id="@+id/d_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/d_pb"
        android:gravity="center"
        android:text="Content 10%"
        android:textColor="#ffffff"
        android:textSize="16sp" />
</RelativeLayout>

UProgressDialog.java 指定了弹窗宽高

import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ProgressBar;
import android.widget.TextView;

import com.xxx.R;

public class UProgressDialog extends DialogFragment {
    private int mDialogWid = -1;
    private int mDialogHeight = -1;

    private int mPbMax = 100;
    private TextView mTv;
    private ProgressBar mPb;
    private String sText;

    @Override
    public void onStart() {
        super.onStart();
        Window window = getDialog().getWindow();
        if (null != window) {
            WindowManager.LayoutParams windowParams = window.getAttributes();
            windowParams.dimAmount = 0.0f;
            window.setAttributes(windowParams);
            DisplayMetrics dm = new DisplayMetrics();
            getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
            if (mDialogWid < 0) {
                mDialogHeight = (int) (dm.heightPixels * 0.68);
                mDialogWid = (int) (dm.widthPixels * 0.45);
            }
            window.setLayout(mDialogWid, mDialogHeight);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.dialog_u_progress, container, false);
        init(root);
        return root;
    }

    public void setContent(String text) {
        this.sText = text;
    }

    public void updateContent(String text) {
        setContent(text);
        mTv.setText(sText);
    }

    private void init(View root) {
        mTv = root.findViewById(R.id.d_tv);
        mPb = root.findViewById(R.id.d_pb);
        mPb.setMax(mPbMax);
    }

    public void setProgressBar(int progress) {
        if (mPb != null) {
            mPb.setProgress(progress);
        }
    }

}

调用时设置透明背景

    // 新建DialogFragment
    mProgressDialog = new UProgressDialog();
    mProgressDialog.setStyle(DialogFragment.STYLE_NORMAL, R.style.Translucent_Origin);
    Fragment fragment = getSupportFragmentManager().findFragmentByTag(fTag);
    if (null != fragment && fragment.isAdded()) {
        getSupportFragmentManager().beginTransaction().remove(fragment).commit();
    }
    mProgressDialog.show(getSupportFragmentManager(), fTag);

    // 设置进度和文字
    int progress = 42;
    if (mProgressDialog != null && mProgressDialog.isVisible()) {
        mProgressDialog.setProgressBar(progress);
        mProgressDialog.updateContent(progress + "%");
        if (progress == 100) {
            mProgressDialog.dismiss();
        }
    }