仿IOS底部彈框

蔣志碧發表於2018-05-13
iOS

自從工作以後，總是調整不好自己的時間，明顯感覺到時間沒有大學充裕，加上之前一直在準備找工作，現在到新公司了，很忙，忙到我快忘了怎麼學習，總算經過掙扎的一個月時間，我下定決心，以後每週都要堅持學習，一定要像以前一樣，每週至少要更新兩篇技術部落格，堅持看書，寫一篇讀書筆記。話雖說到此，總歸還是要靠自己動手做，永遠做個高執行力的程式媛。

到新公司的第一篇文章我選擇學習 Dialog，之前在做訂單的時候，需要實現一個底部彈框的 Dialog，我想了好多方法，其實我並不是想用 Dialog 來實現它，我總是在找有沒有其他方法，比如 Menu。在搜尋了大量部落格以後，我放棄了，索性對話方塊也沒有使用，直接用了以前自己在大學時候封裝的 PopuWindow 來實現的，我對我自己有些無語了，好在我總算是想通了，只好抽週末的時間將 Dialog，Menu，PopuWindow 全部再學習一遍了，以前也沒有仔細學過，總是在要用的時候才慌張的開啟 chrome，隨便搜尋一通，雖然功能全部實現，但是還是隻知道小部分，總之，還是應該系統學習，才能在以後的程式設計道路上越走越遠，另外還有一件很讓我心碎的事情，新公司沒有大神帶我，我得靠自己努力學習，才能突破自己的技術瓶頸（像我這種菜鳥，連技術瓶頸都還沒達到吧，該到小黑屋哭一會?）。

說了一堆廢話，開始說正經的。

作為一個初級工程師，我們還是應該先把基礎知識看一遍，這裡我已經看過了，後面Dialog的一些基本功能還請感興趣的讀者自己去看哦，推薦 Android Developers Dialog，Google 官方介紹，而且還是中文的，很好懂，看這個不需要你懂太多，但是你要知道 Dialog 它有哪些功能，哪些用法，當你在實際開發中遇到你可以想到是不是應該用 Dialog 去實現，這就夠了。在Google 官方介紹中，對話方塊主要的功能都在這個目錄裡，有詳細的 Demo，建議看兩遍就夠啦。

Dialog學習目錄

看完上面的文章以後，看看我實現的一個底部彈框，先看效果圖，這個效果不是我做的，我在網上找到的別的博主寫的，在文章末尾我會貼上參考，感謝博主的精美實現效果。

底部彈框

上圖中其實佈局檔案都差不多，一個普通的底部彈框，一個是圓角的底部彈框，區別就是一個佈局中 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 基本操作。

path 繪製的 button

<?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>
複製程式碼

參考：

我封裝的Dialog

Android 實現底部對話方塊

文章在微信公眾號連結：仿IOS底部彈框

歡迎關注我的公號，我會持續更新

碧之私塾

相關文章