Xamarin Xamarin.Android SweetAlert

Xamarin.Android 元件分享 SweetAlert Xamarin版(Binding方式)

張阿鬼 2018/12/31 15:43:11

0 966

Xamarin.Android 元件分享 SweetAlert Xamarin版(Binding方式)

簡介	使用SweetAlert Xamarin版
作者	張朝銘

主題：	Xamarin.Android 元件分享 SweetAlert Xamarin版(Binding方式)
作者：	Steven
版本/產出日期：	V1.0/2018.12.12

前言

SweetAlert是一個網頁使用的Javascript函式庫，用以取代原來的Alert，
也因它的使用方式簡單，畫面美觀，有撰寫網頁的人應該都不陌生。
對網頁版有興趣的人可以到這裡玩看看。
(網頁版圖片)

在Android中，也有神人將SweetAlert完整的重現出來了，But，找了半天就是沒看到
Xamarin.Android版本，所以只好自己動手做..。

原本的計畫是直接將Java的程式碼翻譯成C#，以利之後方便自己客製化，但翻譯到吐血後
發現雖然能跑，但動畫效果都不見了..所以決定改成Binding的方式。

首先到Android版本的網站將Source Code下載...

https://github.com/pedant/sweet-alert-dialog

並且使用Android Studio將程式碼打開。順便測試可否正常執行它附上的範例。

成功的執行範例程式

在編譯的同時，發現他有相依到另外一個套件上，打開build.gradle，果然發現

為了避免Binding上的困難與複雜度，因此決定將該套件的Source Code也搬進來，

還好該套件只有一支.java需要處理。
套件位置:
https://github.com/pnikosis/materialish-progress

直接在套件的目錄cn.pedant.SweetAlert下新增一支ProgressWheel.java，
並將其Source貼上，然後移除原本參考該套件的import以及build.gradle內的dependencies。
同時要記得移動Resources中的Style、String等資源。

接著重新編譯一次，然後就爆炸了..

從錯誤訊息看來是在alert_dialog.xml中，有東西找不到資源。

這個Wheel開頭的宣告屬於自訂Tag，應該會放在attr.xml中做定義，
推測也許是原本參考的套件並沒有更新到最新，而新版的名稱換掉了，
開啟attr.xml一看，果然都多了matProg_在前面。

另外ProgressWheel已將Source Code放到專案內，
所以在xml上引用的時候也要修改一下，完成如下，並再試著執行範例程式:

        <cn.pedant.SweetAlert.ProgressWheel
            android:id="@+id/progressWheel"
            android:layout_width="80dp"
            android:layout_height="80dp"
            wheel:matProg_progressIndeterminate="true"
            android:layout_gravity="center" />

成功執行範例後，接著就是將其封裝成可供別人使用的函式庫，一般情況下是封裝成.jar檔。
但.jar中只有封裝class的部分，resource的部分並不會一起封裝進去，
因此我們必須要改成封裝為.aar檔才能連同resource內的資源一起封裝。

在Android Studio中的左方選擇Gradle>library>Tasks>build>點assembleRelease兩下，就會開始封裝.aar檔案。
封裝完成的aar檔會出現在專案目錄>library>build>outputs>aar之目錄中

接著使用VS2017開啟兩個專案分別為Android與Android Binding專案:

接著將.aar檔放到Binding專案內的Jars資料目錄下，並將該檔案的建置動作更改為LibraryProjectZip。

建置成功後，發現沒有建出class的相關類別，但是Resource內的資源倒是有進來..

試著改變Binding專案的Android類別剖析器的選項為class-parse才出現類別。

(這裡有一個工具的BUG，如果Binding專案建置完成後沒有看到任何東西出現，

可以重開VS2017再試試)

最後照著原生的範例撰寫測試以下的程式碼:

                new SweetAlertDialog(this, SweetAlertDialog.WarningType)
                             .SetTitleText("確認視窗")
                             .SetContentText("是否要刪除檔案?")
                             .SetConfirmText("刪除")
                             .SetCancelText("取消")
                             .SetConfirmClickListener(new MyClick())
                            .Show();

        public class MyClick :Java.Lang.Object, IOnSweetClickListener
        {
            public void OnClick(SweetAlertDialog sweetAlertDialog)
            {
                sweetAlertDialog.SetTitleText("已刪除")
                        .SetContentText("你的資料已經刪除")
                        .ShowCancelButton(false)
                        .SetConfirmText("完成")
                        .SetConfirmClickListener(null)
                        .ChangeAlertType(SweetAlertDialog.SuccessType);
            }
        }

執行結果: