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

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

先看效果图：

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

展示 CommentListDialogFragment。


public class CommentListDialogFragment extends BottomSheetDialogFragment {private Dialog dialog;@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(DialogFragment.STYLE_NO_FRAME, R.style.DialogTheme);//给dialog设置主题为透明背景 不然会有默认的白色背景}@Overridepublic 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@Overridepublic 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;}@Overridepublic 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() {@Overridepublic 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;}@Overridepublic void onStart() {super.onStart();final View view = getView();view.post(new Runnable() {@Overridepublic 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@Overridepublic RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {return new ViewHolder(LayoutInflater.from(getContext()).inflate(R.layout.item_comment, parent, false));}@Overridepublic 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);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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;//键盘弹出过程中最后的高度值@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(DialogFragment.STYLE_NO_FRAME, R.style.DialogTheme);//给dialog设置主题为透明背景 不然会有默认的白色背景}@Overridepublic 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@Overridepublic 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;}@Overridepublic void onViewCreated(View view, @Nullable Bundle savedInstanceState) {//R.id.dialog_ly这里是根布局LinearLayout dialogLy = view.findViewById(R.id.dialog_ly);dialogLy.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {@Overridepublic 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;}});}@Overridepublic void onStart() {super.onStart();final View view = getView();view.post(new Runnable() {@Overridepublic 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>

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

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

android+底部评论框,Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)...
实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他 ...
多图弹出最后变成心形html,【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）...
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
pythoni屏幕连点_【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
Flutter组件：仿抖音双击点赞弹出爱心效果
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
java安卓弹框样式_Android 实现抖音头像底部弹框效果的实例代码
布局文件 activity_test.xml android:layout_width="match_parent" android:layout_height="mat ...
Android 仿抖音评论列表
仿抖音评论列表 https://github.com/sunjian0/Comment 突然来需求,需要协助公司其他部门项目,分给我们部门评论的功能部分.本来寻思,一个评论能有多少东西,写的时候发现细 ...
ios pan手势滑动消失动画_iOS仿抖音—评论视图滑动消失
iOS仿抖音短视频前言这是仿抖音短视频的第三篇-评论视图滑动消失,先来看下效果图: comment.gif 说明通过观察可以发现抖音的评论视图是从底部弹出的,包括顶部视图和UITableView ...
BottomSheetDialog仿抖音评论区的UI效果
大家好!我国著名数学家华罗庚曾说:聪明在于勤奋,天才出于积累. 一.问题背景当下抖音成为了人们平常生活消遣娱乐必不可少的视频软件,它评论区的UI具有良好的用户交互性,其动画效果非常人性化,滑动出现的 ...

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

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

最新文章

热门文章