ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

用NiceDialog打造底部分享弹窗:仿微信风格UI完整实战教程

用NiceDialog打造底部分享弹窗:仿微信风格UI完整实战教程 用NiceDialog打造底部分享弹窗仿微信风格UI完整实战教程【免费下载链接】NiceDialogA nice dialog, that is based on DialogFragment项目地址: https://gitcode.com/gh_mirrors/ni/NiceDialog在Android开发中底部分享弹窗是App里出现频率极高的交互组件从微信、微博到各类内容社区几乎无处不在。如果你还在用DialogWindowManager手写弹窗忍受布局、动画、遮罩的一堆样板代码那么今天这篇教程就是为你准备的。我将带你使用开源弹窗库NiceDialog一个基于DialogFragment封装的轻量弹窗框架快速实现一个仿微信风格的底部分享弹窗全程只需三步5分钟即可跑通。 为什么选择NiceDialog打造底部分享弹窗NiceDialog 的核心价值在于把弹窗开发中繁琐的细节全部封装好让你把精力集中在「界面长什么样」和「点击后干什么」上。它主要有三大优势基于 DialogFragment生命周期安全屏幕旋转、进程被杀后状态可自动恢复不会出现传统 Dialog 的崩溃问题链式调用配置极简位置、宽高、遮罩透明度、进出场动画全部一行搞定内置四方向动画底部、顶部、左侧、右侧弹出动画开箱即用仿微信分享弹窗只需指定Gravity.BOTTOM。项目核心源码集中在nicedialog模块中入口类是 NiceDialog.java底层封装逻辑在 BaseNiceDialog.java代码量小、注释清晰非常适合学习或二次改造。⚙️ NiceDialog快速集成步骤2分钟搞定第一步在项目根目录build.gradle中加入 JitPack 仓库allprojects { repositories { maven { url https://jitpack.io } } }第二步在 app 模块添加依赖dependencies { implementation com.github.SheHuan:NiceDialog:1.2.0 }如果你想把源码下载下来边看边改也可以直接克隆仓库学习git clone https://gitcode.com/gh_mirrors/ni/NiceDialog集成完成后就能开始愉快的弹窗开发了。 仿微信底部分享弹窗UI实现核心三步第一步编写分享布局文件仿微信分享弹窗的布局核心是「一行应用图标 一行文字」的横向排列。参考项目中的 share_layout.xml每个分享渠道微信、朋友圈、QQ、QQ空间、微博用LinearLayout均分宽度即可LinearLayout android:layout_width0dp android:layout_heightwrap_content android:layout_weight1 android:orientationvertical android:gravitycenter ImageView android:layout_widthwrap_content android:layout_heightwrap_content android:backgrounddrawable/share_wechat / TextView android:layout_widthwrap_content android:layout_heightwrap_content android:text微信 android:textColor#333333 / /LinearLayout再给整个布局套一个白色圆角背景项目里的 white_round_corner_bg.xml 就是现成的素材一个精致的分享面板就完成了。第二步一行代码让弹窗从底部滑出这是 NiceDialog 最爽的地方——底部分享弹窗的定位和动画完全不用你操心。参考 MainActivity.java 中showDialog0的写法NiceDialog.init() .setLayoutId(R.layout.share_layout) .setConvertListener(new ViewConvertListener() { Override public void convertView(ViewHolder holder, final BaseNiceDialog dialog) { // 在这里绑定点击事件 } }) .setDimAmount(0.3f) // 遮罩透明度让背景微微变暗 .setGravity(Gravity.BOTTOM) // 关键底部弹出 .show(getSupportFragmentManager());.setGravity(Gravity.BOTTOM)一行NiceDialog 就会自动匹配 BottomAnimation 动画弹窗从屏幕底部平滑滑入退出时滑出效果和微信分享面板几乎一致。第三步绑定分享点击事件在convertView回调中通过ViewHolder可以像 ButterKnife 一样快速找到控件并设置点击holder.setOnClickListener(R.id.wechat, new View.OnClickListener() { Override public void onClick(View v) { // 调起微信分享 SDK dialog.dismiss(); } });ViewHolder封装了findViewById的缓存逻辑还提供了setText、setTextColor、setBackgroundResource等常用方法具体见 ViewHolder.java日常开发基本够用。 底部分享弹窗常用配置项一览配置方法作用示例setGravity()弹窗位置底部/居中/右侧等Gravity.BOTTOMsetDimAmount()遮罩透明度 0~1默认 0.5f0.3fsetMargin()弹窗左右边距dp60setWidth()弹窗宽度-1 表示自适应210setHeight()弹窗高度dp310setOutCancel()点击外部是否关闭falsesetAnimStyle()自定义进出场动画R.style.EnterExitAnimation 小提示setMargin()和setWidth()二选一即可同时设置会以setWidth()优先。 更多弹窗玩法红包、加载、确认弹窗除了分享弹窗NiceDialog 的示例工程还演示了多种常见场景评论弹窗自动弹出软键盘、加载弹窗、确认框、红包弹窗等。比如红包弹窗只需一张红包背景图配合setWidth(210)setOutCancel(false)就能做出抢红包的仪式感如果你想做确认弹窗还可以继承BaseNiceDialog写一个ConfirmDialog通过newInstance()传参复用性更强——这正是 MainActivity.java 中ConfirmDialog的用法。️ 常见问题与避坑指南弹窗出现在屏幕中间而不是底部检查是否漏了.setGravity(Gravity.BOTTOM)默认是居中显示。点击外部关不掉弹窗确认是否调用了.setOutCancel(false)这会让弹窗强制不可取消适合确认类场景。弹窗宽度撑满全屏默认宽度是屏幕宽度想留白请用setMargin()设置左右边距。屏幕旋转后弹窗状态丢失NiceDialog 基于 DialogFragment已在 BaseNiceDialog.java 中通过onSaveInstanceState做了状态保存正常使用即可。✨ 总结通过 NiceDialog一个仿微信底部分享弹窗从布局编写到交互完成只需要三步写一个布局文件、链式调用配置位置、在回调里绑定事件。它把 DialogFragment 的复杂度全部封装起来同时保留了生命周期安全、状态恢复等优质特性非常适合快速迭代的 Android 项目。如果你正在寻找一款轻量、好用的 Android 弹窗解决方案不妨把 NiceDialog 纳入你的工具箱它会让「弹窗」这件事变得异常简单。【免费下载链接】NiceDialogA nice dialog, that is based on DialogFragment项目地址: https://gitcode.com/gh_mirrors/ni/NiceDialog创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表