仿IOS底部弹框-CSDN博客

自从工作以后，总是调整不好自己的时间，明显感觉到时间没有大学充裕，加上之前一直在准备找工作，现在到新公司了，很忙，忙到我快忘了怎么学习，总算经过挣扎的一个月时间，我下定决心，以后每周都要坚持学习，一定要像以前一样，每周至少要更新两篇技术博客，坚持看书，写一篇读书笔记。话虽说到此，总归还是要靠自己动手做，永远做个高执行力的程序媛。

到新公司的第一篇文章我选择学习 Dialog，之前在做订单的时候，需要实现一个底部弹框的 Dialog，我想了好多方法，其实我并不是想用 Dialog 来实现它，我总是在找有没有其他方法，比如 Menu。在搜索了大量博客以后，我放弃了，索性对话框也没有使用，直接用了以前自己在大学时候封装的 PopuWindow 来实现的，我对我自己有些无语了，好在我总算是想通了，只好抽周末的时间将 Dialog，Menu，PopuWindow 全部再学习一遍了，以前也没有仔细学过，总是在要用的时候才慌张的打开 chrome，随便搜索一通，虽然功能全部实现，但是还是只知道小部分，总之，还是应该系统学习，才能在以后的编程道路上越走越远，另外还有一件很让我心碎的事情，新公司没有大神带我，我得靠自己努力学习，才能突破自己的技术瓶颈（像我这种菜鸟，连技术瓶颈都还没达到吧，该到小黑屋哭一会?）。

说了一堆废话，开始说正经的。

作为一个初级工程师，我们还是应该先把基础知识看一遍，这里我已经看过了，后面Dialog的一些基本功能还请感兴趣的读者自己去看哦，推荐 Android Developers Dialog，Google 官方介绍，而且还是中文的，很好懂，看这个不需要你懂太多，但是你要知道 Dialog 它有哪些功能，哪些用法，当你在实际开发中遇到你可以想到是不是应该用 Dialog 去实现，这就够了。在Google 官方介绍中，对话框主要的功能都在这个目录里，有详细的 Demo，建议看两遍就够啦。

看完上面的文章以后，看看我实现的一个底部弹框，先看效果图，这个效果不是我做的，我在网上找到的别的博主写的，在文章末尾我会贴上参考，感谢博主的精美实现效果。

上图中其实布局文件都差不多，一个普通的底部弹框，一个是圆角的底部弹框，区别就是一个布局中 backgroud 通过 shape 去重新绘制了一遍，如果你已经看完上面我推荐的官方文档，那么下面的文章对你来说就很简单啦。

Dialog bottomDialog = new Dialog(this, R.style.BottomDialog);
View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_content_normal, null);
bottomDialog.setContentView(contentView);
ViewGroup.LayoutParams layoutParams = contentView.getLayoutParams();
layoutParams.width = getResources().getDisplayMetrics().widthPixels;
contentView.setLayoutParams(layoutParams);//设置宽度
bottomDialog.getWindow().setGravity(Gravity.BOTTOM);//弹窗位置
bottomDialog.getWindow().setWindowAnimations(R.style.BottomDialog_Animation);//弹窗的动画效果
bottomDialog.show();
复制代码

通过 Dialog 来加载一个布局文件，并设置相应的属性即可，最后通过 show() 方法弹出 Dialog。

Dialog Style

<!--Dialog样式-->
<style name="BottomDialog" parent="@style/Base.V7.Theme.AppCompat.Light.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>
<!--Dialog弹出动画-->
<style name="BottomDialog.Animation" parent="Animation.AppCompat.Dialog">
     <item name="android:windowEnterAnimation">@anim/translate_dialog_in</item>
     <item name="android:windowExitAnimation">@anim/translate_dialog_out</item>
</style>
复制代码

Animation 弹出动画

<!--translate_dialog_in-->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="0"
    android:fromYDelta="100%"
    android:toXDelta="0"
    android:toYDelta="0">
</translate>
<!--translate_dialog_out-->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="0"
    android:toYDelta="100%">
</translate>
复制代码

代码中的图标是通过 path 进行绘制的，我也只是知道 path 可以用来绘制图标，之前还有了解过 SVG 矢量图，也是通过 path 进行绘制，感兴趣的可以去查一下，还有贝塞尔曲线等。

给你们编辑图标的 xml 文件怎么写的，用 vector 集合实现，通过 path 绘制出来，图标总共由三部分组成，所以 path 有三个，至于里面的一些算法，还需要研究，这里推荐一篇博客 Path 基本操作。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="18dp"
    android:height="18dp"
    android:viewportHeight="1024"
    android:viewportWidth="1024">
    <path
        android:fillColor="#FF666666"
        android:pathData="M358.232894 664.748916c-0.067538 0.001023-0.135076 0.001023-0.202615 0.002047-4.583388-0.028653-8.996908-1.850138-12.238742-5.104251L231.670383 544.742728c-6.722098-6.77531-6.698562-17.73492 0.076748-24.490787L683.96763 69.079308c3.25309-3.241834 7.996115-4.39817 12.269441-5.043876 4.583388 0.028653 8.996908 1.850138 12.238742 5.104251L822.578548 184.009897c6.722098 6.77531 6.698562 17.73492-0.076748 24.490787L370.299721 659.707087C367.096772 662.914128 362.765117 664.710031 358.232894 664.748916z"/>
    <path
        android:fillColor="#FF666666"
        android:pathData="M132.691091 770.20062c-4.532223 0-8.946766-1.792832-12.227486-5.073552-4.194532-4.160763-5.969968-10.214642-4.684696-15.999392l32.945343-148.389632c1.370207-6.15621 5.987365-11.094686 12.05864-12.853749s12.616342-0.101307 17.081027 4.329609L293.375747 707.320501c4.482081 4.464685 6.172583 11.027148 4.414543 17.08205-1.759063 6.088672-6.680143 10.722202-12.853749 12.108782L136.479371 769.795391C135.227868 770.065544 133.958968 770.20062 132.691091 770.20062z"/>
    <path
        android:fillColor="#FF666666"
        android:pathData="M874.130667 958.814372 150.009526 958.814372c-28.700669 0-51.955302-23.271006-51.955302-51.955302 0-28.683273 23.254633-51.955302 51.955302-51.955302l724.121142 0c28.700669 0 51.955302 23.271006 51.955302 51.955302C926.08597 935.543366 902.831336 958.814372 874.130667 958.814372z"/>
</vector>
复制代码