目錄:
1. 介紹
XPopup是一個彈窗庫,可能是Harmony平臺最好的彈窗庫。它從設計的時候就本著實用的原則,兼顧了美觀和優雅的互動。使用者都喜歡自然舒適的UI和互動,希望XPopup能帶給你一些幫助或者驚喜!
2. 效果一覽
內建彈窗(支援複用已有佈局) | 列表Center彈窗 |
---|---|
Bottom列表彈窗 | 自定義Bottom彈窗 |
---|---|
Attach彈窗(動畫優雅,智慧定位,長按支援) | 自定義Attach彈窗(任意方向支援,靈活易用) |
---|---|
Drawer彈窗 | 全屏彈窗(可作為Ability替代品,搭配十幾個動畫使用更佳) |
---|---|
Position自由定位彈窗(放在螢幕任意地方) | 自定義底部彈窗 |
---|---|
自定義彈窗和自定義動畫 | 內建優雅美觀的動畫器,可搭配彈窗結合使用 |
---|---|
ImageViewer大圖瀏覽彈窗 | 聯想搜尋實現,輕而易舉 |
---|---|
3. 依賴
4. 如何使用
4.1 內建彈窗的使用
4.1.1 顯示確認和取消對話方塊
4.1.2 顯示待輸入框的確認和取消對話方塊
4.1.3 顯示中間彈出的列表彈窗
4.1.4 顯示中間彈出的載入框
4.1.5 顯示從底部彈出的列表彈窗
4.1.6 顯示依附於某個Component或者某個點的彈窗
如果是想依附於某個Component的觸控點,則需要先watch
該Component,然後當單擊或長按觸發的時候去顯示:
asAttachList
方法內部是對AttachPopupView的封裝,如果你的佈局不是列表,可以繼承AttachPopupView實現自己想要的佈局。AttachPopupView會出現在目標的上方或者下方,如果你想要出現在目標的左邊或者右邊(像微信朋友圈那樣點讚的彈窗),可以繼承HorizontalAttachPopupView,然後編寫你的佈局即可。
最簡單的示例如下:
4.1.7 顯示大圖瀏覽彈窗
如果你用的不是Glide,請參考去實現即可。
4.1.8 關閉彈窗
先拿到彈窗物件,以Loading彈窗為例,其他也是一樣:
執行消失:
我們在專案中經常會點選某個按鈕然後關閉彈窗,接著去做一些事。比如:點選一個按鈕,關閉彈窗,然後開啟一個介面,要知道彈窗的關閉是有一個動畫過程的,上面的寫法會出現彈窗還沒有完全關閉,就立即跳頁面,介面有一種頓挫感;而且在裝置資源不足的時候,還可能造成丟幀。所以很多時候不推薦直接使用dismiss()方法,除非你關閉完彈窗後面沒有任何邏輯執行。
為了得到最佳體驗,您可以等dismiss動畫完全結束去執行一些東西,而不是立即就執行。可以這樣做:
每個彈窗本身也有onShow()和onDismiss()的生命週期回撥,可以根據需要使用。
還有這樣一種場景:彈窗show()完之後,你的邏輯執行完畢,然後呼叫dismiss()。但是你的邏輯執行過快,可能導致彈窗的show動畫還沒有執行完就直接dismiss了,介面上的感覺並不好。這個時候推薦使用smartDismiss()方法,這個方法能保證彈窗的show動畫執行完再關閉彈窗。
4.1.9 複用專案已有佈局
如果你專案中已經有寫好的彈窗佈局,而想用XPopup提供的動畫和互動能力,也是完全沒有問題的。目前支援設定自定義佈局的彈窗有:
- Confirm彈窗,就是確認和取消彈窗
- 帶輸入框的Confirm彈窗
- Loading彈窗
- 帶列表的Attach彈窗,Center彈窗和Bottom彈窗
假設,你想使用XPopup的Confirm彈窗,但佈局想用自己的,只需要這樣設定一下,其他不用動即可:
這樣佈局就是您自己的了,動畫和互動XPopup會幫你完成。但是需要注意的是,你自己提供的佈局必須包含一些id,否則XPopup無法找到控制元件;id必須有,控制元件你可以隨意組合與擺放。具體如下:
- Confirm彈窗必須包含的Text以及id有:tv_title,tv_content,tv_cancel,tv_confirm
- 帶輸入框的Confirm彈窗在Confirm彈窗基礎上需要增加一個id為et_input的TextField
- Loading彈窗,如果你想顯示一個Loading文字說明,則必須有一個id為tv_title的Text;如果不需要文字說明,則沒要求
- 帶列表的彈窗會多一個bindItemLayout()方法用來繫結item佈局
- 其他不在多說,看bindLayout方法說明,會說明要求哪些id
每種內建彈窗的bindLayout和bindItemLayout的要求都在方法說明上,無需記憶,用的時候檢視下方法的說明即可。
4.2 自定義彈窗
當你自定義彈窗的時候,需要根據需求選擇繼承CenterPopupView
,BottomPopupView
,AttachPopupView/HorizontalAttachPopupView
,DrawerPopupView
,PartShadowPopupView
,FullScreenPopupView
,PositionPopupView
其中之一。
每種彈窗的功能和使用場景如下:
- CenterPopupView:中間彈窗的彈窗,比如:確認取消對話方塊,Loading彈窗等,如果不滿意預設的動畫效果,可以設定不同的動畫器
- BottomPopupView:從底部彈出的彈窗,比如:從底部彈出的分享彈窗,知乎的從底部彈出的評論彈窗,抖音從底部彈出的評論彈窗。這種彈窗帶有智慧的巢狀滾動和手勢拖動
- AttachPopupView/HorizontalAttachPopupView:Attach彈窗是需要依附於某個點或者某個Component來顯示的彈窗;其中AttachPopupView會出現在目標的上方或者下方。如果希望想要微信朋友圈點贊彈窗那樣的效果,出現在目標的左邊或者右邊,則需要繼承 HorizontalAttachPopupView來做
- DrawerPopupView:從介面的左邊或者右邊彈出的像DrawerLayout那樣的彈窗,Drawer彈窗本身是橫向滑動的,但對PageSlider和ScrollView等橫向滑動控制元件做了相容,在彈窗內部可以放心使用它們
- FullScreenPopupView:全屏彈窗,看起來和Ability 一樣。該彈窗其實是繼承Center彈窗進行的一種實現,可以設定任意的動畫器
- ImageViewerPopupView:大圖瀏覽彈窗
- PositionPopupView:自由定位彈窗,如果你想讓彈窗顯示在左上角,或者右上角,或者任意位置,並且不需要依附任何Component,此時你需要它
自定義彈窗只有2個步驟:
一:根據自己的需求編寫一個類繼承對應的彈窗
二:重寫getImplLayoutId()返回彈窗的佈局,在onCreate中像Ability那樣編寫你的邏輯即可
注意:自定義彈窗本質是一個自定義控制元件,但是隻需重寫一個引數的構造,其他的不要重寫,所有的自定義彈窗都是這樣。
4.2.1 自定義Center彈窗
注意:Center彈窗的最大寬度預設是螢幕寬度的0.8,如果你自定義佈局的寬度是寫死的,有可能超出螢幕寬度的0.8,如果你不想被最大寬度限制,只需要重寫方法:
使用自定義彈窗:
4.2.2 自定義Attach彈窗
4.2.3 自定義DrawerLayout型別彈窗
使用自定義的DrawerLayout彈窗:
4.2.4 自定義Bottom型別的彈窗
自定義Bottom型別的彈窗會比較常見,預設Bottom彈窗帶有手勢互動和巢狀滾動;如果您不想要手勢互動可以呼叫enableDrag(false)
方法關閉。
請注意:彈窗的寬高是自適應的,大部分情況下都應該將彈窗佈局的高設定為match_content
;除非你希望得到一個高度撐滿的彈窗。
Demo中有一個模仿知乎評論的實現,程式碼如下:
4.2.5 自定義全屏彈窗
4.2.6 自定義ImageViewer彈窗
目前大圖瀏覽彈窗支援在上面新增任意自定義佈局和背景顏色,做法是寫一個類繼承ImageViewerPopupView
彈窗,然後重寫佈局即可。
程式碼如下:
由於是自定義的大圖瀏覽彈窗,就要用自定義彈窗的方式來開啟了:
4.2.7 自定義Position彈窗
自由定位彈窗,預設是顯示在螢幕的左上角,你可以通過offsetX()
和offsetY()
來控制顯示位置,如果你希望水平居中,可以用isCenterHorizontal(true)
選項來做到。
4.3 自定義動畫
自定義動畫已經被設計得非常簡單,動畫和彈窗是無關的;這意味著你可以將動畫設定給內建彈窗或者自定義彈窗。繼承PopupAnimator
,實現3個方法:
-
如何初始化動畫
-
動畫如何開始
-
動畫如何結束
比如:自定義一個旋轉的動畫:
使用自定義動畫:
不想要動畫:
4.4 常用設定
4.4.1 全域性設定
-
設定主色調 預設情況下,XPopup的主色為灰色,主色作用於Button文字,TextField邊框和游標,Check文字的顏色上。 主色調只需要設定一次即可,可以放在啟動頁中。
4.4.2 常用設定
所有的設定如下,根據需要使用:
5. 下載連結
5.1 IDE下載連結
https://developer.harmonyos.com/cn/develop/deveco-studio#download
5.2 原始碼連結
https://gitee.com/openharmony-tpc/XPopup
設定全域性的動畫時長 預設情況下,彈窗的動畫時長為360毫秒。你可以通過下面的方法進行修改: