前言

最近有個一個需求，需要在屏幕底部顯示一個對話框，原本是想要用BottomSheetDialogFragment來完成的，但是因?yàn)椴恍枰郫B效果，與需求不符，所以放棄。因此嘗試用DialogFragment實(shí)現(xiàn)，實(shí)現(xiàn)過程踩到一些坑，現(xiàn)在記錄下來便于以后查閱。

1. 大小不受控制

  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {
    return inflater.inflate(R.layout.dialog_bottom, container, false);
  }

在Fragment中會通過類似上面這樣的代碼加載一個xml的布局文件，但是這DailogFragment中這樣加載出來視圖大小是不受xml中的layout_height 和 layout_width 控制的。其中的原因很簡單，可以查閱下 DialogFragment.show() 方法。

    public void show(FragmentManager manager, String tag) {
        mDismissed = false;
        mShownByMe = true;
        FragmentTransaction ft = manager.beginTransaction();
        ft.add(this, tag);
        ft.commit();
    }

DialogFragment是通過 FragmentTransac.add() 添加進(jìn)入FragmentManager中的，因此在 onCreateView 階段，傳遞進(jìn)來的container參數(shù)是 null，而 LayoutInflate.inflate() 在 root 為 null 時不會設(shè)置LayoutParams，核心代碼如下所示。

final View temp = createViewFromTag(root, name, inflaterContext, attrs);
ViewGroup.LayoutParams params = null;
if (root != null) {
        // Create layout params that match root, if supplied
        params = root.generateLayoutParams(attrs);
        if (!attachToRoot) {
        // Set the layout params for temp if we are not
        // attaching. (If we are, we use addView, below)
        temp.setLayoutParams(params);
        }
}

要想控制顯示的 Dialog 的大小，只能通過直接設(shè)置 Window 的大小實(shí)現(xiàn)。而且 Window.setLayout 必須在 onActivityCreate 完成后調(diào)用才能生效。下面的代碼設(shè)置Window的大小匹配屏幕的大小。

  @Override
  public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    Window window = getDialog().getWindow();
    if (window != null) {
      window.setLayout(MATCH_PARENT, MATCH_PARENT);
    }
  }

2. Dialog周圍有空隙

按照上面的方法設(shè)置了 Window 的大小之后，雖然是設(shè)置了 MATCH_PARENT 但在四周還是留下了一些間隙，如下圖所示。

    public BottomSheetDialog(@NonNull Context context, @StyleRes int theme) {
        super(context, getThemeResId(context, theme));
        // We hide the title bar for any style configuration. Otherwise, there will be a gap
        // above the bottom sheet when it is expanded.
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
    }

    private static int getThemeResId(Context context, int themeId) {
        if (themeId == 0) {
            // If the provided theme is 0, then retrieve the dialogTheme from our theme
            TypedValue outValue = new TypedValue();
            if (context.getTheme().resolveAttribute(
                    R.attr.bottomSheetDialogTheme, outValue, true)) {
                themeId = outValue.resourceId;
            } else {
                // bottomSheetDialogTheme is not provided; we default to our light theme
                themeId = R.style.Theme_Design_Light_BottomSheetDialog;
            }
        }
        return themeId;
    }

所以可以通過自定義一個主題，添加 <item name="android:windowBackground">@android:color/transparent</item> 使得Dialog中的視圖可以鋪滿整個屏幕。不過還有一個更加簡單的辦法，那就是設(shè)置 DialogFragment 的樣式，DialogFragment 預(yù)定義好了四種樣式效果，只要設(shè)置為 STYLE_NO_FRAME 就可以實(shí)現(xiàn)視圖鋪滿屏幕的效果，示例代碼：

  @Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setStyle(STYLE_NO_FRAME, 0);
  }

3. 控制視圖位置

因?yàn)楦晥D與Window大小相同控制不了，為了更加方便的控制視圖的位置，可以學(xué)習(xí) BottomSheetDialog，通過在真實(shí)視圖上包裹一層根視圖實(shí)現(xiàn)，下面是核心代碼截取。

    @Override
    public void setContentView(@LayoutRes int layoutResId) {
        super.setContentView(wrapInBottomSheet(layoutResId, null, null));
    }

    private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
        final FrameLayout container = (FrameLayout) View.inflate(getContext(),
                R.layout.design_bottom_sheet_dialog, null);
        final CoordinatorLayout coordinator =
                (CoordinatorLayout) container.findViewById(R.id.coordinator);
        if (layoutResId != 0 && view == null) {
            view = getLayoutInflater().inflate(layoutResId, coordinator, false);
        }
        FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);
        if (params == null) {
            bottomSheet.addView(view);
        } else {
            bottomSheet.addView(view, params);
        }
        // We treat the CoordinatorLayout as outside the dialog though it is technically inside
        coordinator.findViewById(R.id.touch_outside).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mCancelable && isShowing() && shouldWindowCloseOnTouchOutside()) {
                    cancel();
                }
            }
        });
        return container;
    }

而我們則是選擇在 onCreateView 中操作。

  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {
    container = new FrameLayout(getContext());
    return inflater.inflate(R.layout.dialog_bottom, container, true);
  }

這樣只需要在xml中使用 android:layout_gravity="bottom" 即可控制視圖顯示在底部。