仿抖音评论底部弹出框（列表框+发表框）

BottomSheetDialogFragment高仿抖音评论底部弹出框

先看效果图：

这个弹窗的效果是使用BottomSheetDialogFragment做的，第一个弹出的对话框为CommentListDialogFragment ，第二个弹出的对话框为SendCommentDialogFragment，代码如下：

展示 CommentListDialogFragment。

public class CommentListDialogFragment extends BottomSheetDialogFragment {
    private Dialog dialog;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NO_FRAME, R.style.DialogTheme);//给dialog设置主题为透明背景 不然会有默认的白色背景
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        dialog = super.onCreateDialog(savedInstanceState);
        dialog.setCanceledOnTouchOutside(true);//设置点击外部可消失
        Window win = dialog.getWindow();
        WindowManager.LayoutParams params = win.getAttributes();
        win.setSoftInputMode(params.SOFT_INPUT_ADJUST_NOTHING);//设置使软键盘弹出的时候dialog不会被顶起
        win.setWindowAnimations(R.style.Anim_Dialog_Bottom);//这里设置dialog的进出动画
        return dialog;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // 在这里将view的高度设置为精确高度，即可屏蔽向上滑动不占全屏的手势。如果不设置高度的话 会默认向上滑动时dialog覆盖全屏
        View view = inflater.inflate(R.layout.list_dialog, container, false);
        view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                getScreenHeight(getActivity()) * 2 / 3));
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        TextView postCommentText = view.findViewById(R.id.tv);
        RecyclerView recyclerView = view.findViewById(R.id.rv);
        recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
        ItemAdapter itemAdapter = new ItemAdapter();
        recyclerView.setAdapter(itemAdapter);
        postCommentText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //写评论的弹出框
                SendCommentDialogFragment dialogFragment = new SendCommentDialogFragment();
                dialogFragment.show(getFragmentManager(),dialogFragment.getClass().getName());
            }
        });

    }

    /**
     * 得到屏幕的高
     */
    public static int getScreenHeight(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        int height = wm.getDefaultDisplay().getHeight();
        return height;
    }

    @Override
    public void onStart() {
        super.onStart();
        final View view = getView();
        view.post(new Runnable() {
            @Override
            public void run() {
                View parent = (View) view.getParent();
                CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) (parent).getLayoutParams();
                CoordinatorLayout.Behavior behavior = params.getBehavior();
                BottomSheetBehavior mBottomSheetBehavior = (BottomSheetBehavior) behavior;
                mBottomSheetBehavior.setHideable(false);//禁止下拉取消弹框
                mBottomSheetBehavior.setPeekHeight(view.getMeasuredHeight());//让dialog的内容显示完整
            }
        });
    }





    public class ItemAdapter extends RecyclerView.Adapter {

        @NonNull
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            return new ViewHolder(LayoutInflater.from(getContext()).inflate(R.layout.item_comment, parent, false));
        }

        @Override
        public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
            TextView comment = holder.itemView.findViewById(R.id.comment);
            TextView name=holder.itemView.findViewById(R.id.name);
            name.setText("用户"+position+":");
            comment.setText("评论:" + position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public int getItemCount() {
            return 30;
        }


        class ViewHolder extends RecyclerView.ViewHolder {

            public ViewHolder(@NonNull View itemView) {
                super(itemView);

            }
        }
    }
}

展示 SendCommentDialogFragment。

public class SendCommentDialogFragment extends BottomSheetDialogFragment {

    private Dialog dialog;
    private int mLastDiff = 0;//键盘弹出过程中最后的高度值

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NO_FRAME, R.style.DialogTheme);//给dialog设置主题为透明背景 不然会有默认的白色背景
    }


    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        dialog = super.onCreateDialog(savedInstanceState);
        dialog.setCanceledOnTouchOutside(true);//设置点击外部可消失
        Window win = dialog.getWindow();
        WindowManager.LayoutParams params = win.getAttributes();
        win.setSoftInputMode(params.SOFT_INPUT_STATE_VISIBLE | params.SOFT_INPUT_ADJUST_RESIZE);//配置输入法，避免弹出遮挡布局
        win.setWindowAnimations(R.style.Anim_Dialog_Bottom);//这里设置dialog的进出动画
        return dialog;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.dialog_sendcomment, container, false);
        view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT));
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        //R.id.dialog_ly这里是根布局
        LinearLayout dialogLy = view.findViewById(R.id.dialog_ly);
        dialogLy.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View view, int i, int i1, int i2, int i3, int i4, int i5, int i6, int i7) {
                Rect r = new Rect();
                dialog.getWindow().getDecorView().getWindowVisibleDisplayFrame(r);//获取当前界面可视部分
                int screenHeight = dialog.getWindow().getDecorView().getRootView().getHeight();//获取屏幕的高度
                int heightDifference = screenHeight - r.bottom;//此处就是用来获取键盘的高度的， 在键盘没有弹出的时候 此高度为0 键盘弹出的时候为一个正数
                if (heightDifference <= 0 && mLastDiff > 0) {
                    onDismiss(dialog);//手动关闭输入法时，对话框也跟着关闭
                }
                mLastDiff = heightDifference;
            }
        });
    }


    @Override
    public void onStart() {
        super.onStart();
        final View view = getView();
        view.post(new Runnable() {
            @Override
            public void run() {
                View parent = (View) view.getParent();
                CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) (parent).getLayoutParams();
                CoordinatorLayout.Behavior behavior = params.getBehavior();
                BottomSheetBehavior mBottomSheetBehavior = (BottomSheetBehavior) behavior;
                mBottomSheetBehavior.setHideable(false);//禁止下拉取消弹框
                mBottomSheetBehavior.setPeekHeight(view.getMeasuredHeight());//让内容显示完整
            }
        });
    }
}

注意
在弹出（SendCommentDialogFragment）也就是第二个对话框的时候，部分的布局控件会被输入法给遮挡，解决办法就是在res/values/styles文件中找到该对话框的主题文件，然后配置输入法，像这样：

<style name="DialogTheme">
    <item name="android:windowIsFloating">false</item>
    <item name="android:windowSoftInputMode">adjustResize</item>
</style>

加上这两句代码，布局就能正常地显示啦。

本文地址：https://blog.csdn.net/weixin_41809010/article/details/108576915