自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

鴻蒙開源三方組件--強(qiáng)大的彈窗庫(kù)XPopup組件

作者：HarmonyOS技術(shù)社區(qū)
開源
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com

[[396595]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

1. 介紹

​XPopup是一個(gè)彈窗庫(kù)，可能是Harmony平臺(tái)最好的彈窗庫(kù)。它從設(shè)計(jì)的時(shí)候就本著實(shí)用的原則，兼顧了美觀和優(yōu)雅的交互。用戶都喜歡自然舒適的UI和交互，希望XPopup能帶給你一些幫助或者驚喜!

2. 效果一覽

相關(guān)效果演示可以點(diǎn)擊鏈接前往原文章進(jìn)行觀看：

https://harmonyos.51cto.com/posts/4198

3. 依賴

  1. allprojects{ 
  2.     repositories{ 
  3.         mavenCentral() 
  4.     } 
  5. } 
  6. implementation 'io.openharmony.tpc.thirdlib:XPopup:1.0.3' 

4. 如何使用

4.1 內(nèi)置彈窗的使用

4.1.1 顯示確認(rèn)和取消對(duì)話框

  1. new XPopup.Builder(getContext()).asConfirm("我是標(biāo)題", "我是內(nèi)容", 
  2.         new OnConfirmListener() { 
  3.             @Override 
  4.             public void onConfirm() { 
  5.                 toast("click confirm"); 
  6.             } 
  7.         }) 
  8.         .show(); 

4.1.2 顯示待輸入框的確認(rèn)和取消對(duì)話框

  1. new XPopup.Builder(getContext()).asInputConfirm("我是標(biāo)題", "請(qǐng)輸入內(nèi)容。", 
  2.                             new OnInputConfirmListener() { 
  3.                                 @Override 
  4.                                 public void onConfirm(String text) { 
  5.                                     toast("input text: " + text); 
  6.                                 } 
  7.                             }) 
  8.                             .show(); 

4.1.3 顯示中間彈出的列表彈窗

  1. new XPopup.Builder(getContext()) 
  2.                             //.maxWidth(600) 
  3.                             .asCenterList("請(qǐng)選擇一項(xiàng)", new String[]{"條目1", "條目2", "條目3", "條目4"}, 
  4.                             new OnSelectListener() { 
  5.                                 @Override 
  6.                                 public void onSelect(int position, String text) { 
  7.                                     toast("click " + text); 
  8.                                 } 
  9.                             }) 
  10.                             .show(); 

4.1.4 顯示中間彈出的加載框

  1. new XPopup.Builder(getContext()) 
  2.                             .asLoading("正在加載中") 
  3.                             .show(); 

4.1.5 顯示從底部彈出的列表彈窗

  1. new XPopup.Builder(getContext()) 
  2.         .asBottomList("請(qǐng)選擇一項(xiàng)", new String[]{"條目1", "條目2", "條目3", "條目4", "條目5"}, 
  3.                 new OnSelectListener() { 
  4.                     @Override 
  5.                     public void onSelect(int position, String text) { 
  6.                         toast("click " + text); 
  7.                     } 
  8.                 }) 
  9.         .show(); 

4.1.6 顯示依附于某個(gè)Component或者某個(gè)點(diǎn)的彈窗

  1. new XPopup.Builder(getContext()) 
  2.         .atView(component)  // 依附于所點(diǎn)擊的Component，內(nèi)部會(huì)自動(dòng)判斷在上方或者下方顯示 
  3.         .asAttachList(new String[]{"分享", "編輯", "不帶icon"}, 
  4.                 new int[]{ResourceTable.Media_icon, ResourceTable.Media_icon}, 
  5.                 new OnSelectListener() { 
  6.                     @Override 
  7.                     public void onSelect(int position, String text) { 
  8.                         toast("click " + text); 
  9.                     } 
  10.                 }) 
  11.         .show(); 

如果是想依附于某個(gè)Component的觸摸點(diǎn)，則需要先watch該Component，然后當(dāng)單擊或長(zhǎng)按觸發(fā)的時(shí)候去顯示：

  1. Component component = findComponentById(ResourceTable.Id_btnShowAttachPoint); 
  2. // 必須在事件發(fā)生前，調(diào)用這個(gè)方法來(lái)監(jiān)視View的觸摸 
  3. final XPopup.Builder builder = new XPopup.Builder(getContext()).watchView(component); 
  4. component.setLongClickedListener(new LongClickedListener() { 
  5.     @Override 
  6.     public void onLongClicked(Component component) { 
  7.         builder.asAttachList(new String[]{"置頂", "復(fù)制", "刪除"}, null, 
  8.                 new OnSelectListener() { 
  9.                     @Override 
  10.                     public void onSelect(int position, String text) { 
  11.                         toast("click " + text); 
  12.                     } 
  13.                 }) 
  14.                 .show(); 
  15.     } 
  16. }); 

asAttachList方法內(nèi)部是對(duì)AttachPopupView的封裝，如果你的布局不是列表，可以繼承AttachPopupView實(shí)現(xiàn)自己想要的布局。AttachPopupView會(huì)出現(xiàn)在目標(biāo)的上方或者下方，如果你想要出現(xiàn)在目標(biāo)的左邊或者右邊(像微信朋友圈那樣點(diǎn)贊的彈窗)，可以繼承HorizontalAttachPopupView，然后編寫你的布局即可。

最簡(jiǎn)單的示例如下：

  1. public class CustomAttachPopup extends HorizontalAttachPopupView { 
  2.     public CustomAttachPopup(Context context) { 
  3.         super(context, null); 
  4.     } 
  5.     @Override 
  6.     protected int getImplLayoutId() { 
  7.         return ResourceTable.Layout_custom_attach_popup; 
  8.     } 
  9.     @Override 
  10.     protected void onCreate() { 
  11.         super.onCreate(); 
  12.         findComponentById(ResourceTable.Id_tv_zan).setClickedListener(new ClickedListener() { 
  13.             @Override 
  14.             public void onClick(Component component) { 
  15.                 ToastUtil.showToast(getContext(), "贊"); 
  16.                 dismiss(); 
  17.             } 
  18.         }); 
  19.         findComponentById(ResourceTable.Id_tv_comment).setClickedListener(new ClickedListener() { 
  20.             @Override 
  21.             public void onClick(Component component) { 
  22.                 ToastUtil.showToast(getContext(), "評(píng)論"); 
  23.                 dismiss(); 
  24.             } 
  25.         }); 
  26.     }    // 設(shè)置狀態(tài)欄的高度，用以修正自定義位置彈窗的高度 
  27.     @Override 
  28.     protected int setStatusBarHeight() { 
  29.         return 130; 
  30.     }} 

4.1.7 顯示大圖瀏覽彈窗

  1. // 當(dāng)你點(diǎn)擊圖片的時(shí)候執(zhí)行以下代碼： 
  2. // 多圖片場(chǎng)景（你有多張圖片需要瀏覽） 
  3. new XPopup.Builder(getContext()).asImageViewer(image, position, list, 
  4.                             new OnSrcViewUpdateListener() { 
  5.                                 @Override 
  6.                                 public void onSrcViewUpdate(ImageViewerPopupView popupView, int position) { 
  7.                                     // pager更新當(dāng)前顯示的圖片 
  8.                                     // 當(dāng)啟用isInfinite時(shí)，position會(huì)無(wú)限增大，需要映射為當(dāng)前ViewPager中的頁(yè) 
  9.                                     int realPosi = position % list.size(); 
  10.                                     pager.setCurrentPage(realPosi, false); 
  11.                                 } 
  12.                             }, new ImageLoader()).show(); 
  13. // 單張圖片場(chǎng)景 
  14. new XPopup.Builder(getContext()) 
  15.                 .asImageViewer(image, url, new ImageLoader()) 
  16.                 .show();// 圖片加載器，XPopup不負(fù)責(zé)加載圖片，需要你實(shí)現(xiàn)一個(gè)圖片加載器傳給我，這里以Glide和OkGo為例（可直接復(fù)制到項(xiàng)目中）: 
  17. class ImageLoader implements XPopupImageLoader { 
  18.         @Override 
  19.         public void loadImage(int position, String url, Image imageView) { 
  20.             // 一進(jìn)入頁(yè)面就加載圖片的話，需要加點(diǎn)延遲 
  21.             context.getUITaskDispatcher().delayDispatch(new Runnable() { 
  22.                 @Override 
  23.                 public void run() { 
  24.                     Glide.with(context) 
  25.                             .load(url) 
  26.                             .diskCacheStrategy(DiskCacheStrategy.ALL) 
  27.                             .into(image); 
  28.                 } 
  29.             }, 50); 
  30.         } 
  31.         // 必須實(shí)現(xiàn)這個(gè)方法，用來(lái)下載圖片?？蓞⒄障旅娴膶?shí)現(xiàn)，內(nèi)部保存圖片會(huì)用到。如果你不需要保存圖片這個(gè)功能，可以返回null。 
  32.         @Override 
  33.         public File getImageFile(Context context, String url) { 
  34.             try { 
  35.                 return OkGo.<File>get(url).tag(this).converter(new FileConvert()).adapt().execute().body(); 
  36.             } catch (Exception e) { 
  37.                 LogUtil.error(TAG, e.getMessage()); 
  38.             } 
  39.             return null; 
  40.         } 
  41.     } 

如果你用的不是Glide，請(qǐng)參考去實(shí)現(xiàn)即可。

4.1.8 關(guān)閉彈窗

先拿到彈窗對(duì)象，以Loading彈窗為例，其他也是一樣：

  1. BasePopupView popupView = new XPopup.Builder(getContext()) 
  2.         .asLoading("正在加載中") 
  3.         .show(); 

執(zhí)行消失：

  1. //有四個(gè)消失方法可供選擇： 
  2. popupView.dismiss(); 
  3.  //立即消失 
  4. popupView.delayDismiss(300); 
  5.  //延時(shí)消失，有時(shí)候消失過(guò)快體驗(yàn)可能不好，可以延時(shí)一下 
  6. popupView.smartDismiss();  
  7. //會(huì)等待彈窗的開始動(dòng)畫執(zhí)行完畢再進(jìn)行消失，可以防止接口調(diào)用過(guò)快導(dǎo)致的動(dòng)畫不完整。 
  8. popupView.dismissWith({});  
  9. //消失動(dòng)畫執(zhí)行完之后執(zhí)行某些邏輯 

我們?cè)陧?xiàng)目中經(jīng)常會(huì)點(diǎn)擊某個(gè)按鈕然后關(guān)閉彈窗，接著去做一些事。比如：點(diǎn)擊一個(gè)按鈕，關(guān)閉彈窗，然后開啟一個(gè)界面，要知道彈窗的關(guān)閉是有一個(gè)動(dòng)畫過(guò)程的，上面的寫法會(huì)出現(xiàn)彈窗還沒有完全關(guān)閉，就立即跳頁(yè)面，界面有一種頓挫感;而且在設(shè)備資源不足的時(shí)候，還可能造成丟幀。所以很多時(shí)候不推薦直接使用dismiss()方法，除非你關(guān)閉完彈窗后面沒有任何邏輯執(zhí)行。

為了得到最佳體驗(yàn)，您可以等dismiss動(dòng)畫完全結(jié)束去執(zhí)行一些東西，而不是立即就執(zhí)行?？梢赃@樣做：

  1. popupView.dismissWith(new Runnable() { 
  2.     @Override 
  3.     public void run() { 
  4.         // 跳轉(zhuǎn)到新頁(yè)面 
  5.     }}); 

每個(gè)彈窗本身也有onShow()和onDismiss()的生命周期回調(diào)，可以根據(jù)需要使用。

還有這樣一種場(chǎng)景：彈窗show()完之后，你的邏輯執(zhí)行完畢，然后調(diào)用dismiss()。但是你的邏輯執(zhí)行過(guò)快，可能導(dǎo)致彈窗的show動(dòng)畫還沒有執(zhí)行完就直接dismiss了，界面上的感覺并不好。這個(gè)時(shí)候推薦使用smartDismiss()方法，這個(gè)方法能保證彈窗的show動(dòng)畫執(zhí)行完再關(guān)閉彈窗。

4.1.9 復(fù)用項(xiàng)目已有布局

如果你項(xiàng)目中已經(jīng)有寫好的彈窗布局，而想用XPopup提供的動(dòng)畫和交互能力，也是完全沒有問題的。目前支持設(shè)置自定義布局的彈窗有：

Confirm彈窗，就是確認(rèn)和取消彈窗

  • 帶輸入框的Confirm彈窗
  • Loading彈窗
  • 帶列表的Attach彈窗，Center彈窗和Bottom彈窗

假設(shè)，你想使用XPopup的Confirm彈窗，但布局想用自己的，只需要這樣設(shè)置一下，其他不用動(dòng)即可：

  1. new XPopup.Builder(getContext()) 
  2.         .asConfirm(null, "您可以復(fù)用項(xiàng)目已有布局，來(lái)使用XPopup強(qiáng)大的交互能力和邏輯封裝，彈窗的布局完全由你自己控制。\n" + 
  3.                         "需要注意的是：你自己的布局必須提供一些控件Id，否則XPopup找不到控件。", 
  4.                 "關(guān)閉", "XPopup牛逼", 
  5.                 new OnConfirmListener() { 
  6.                     @Override 
  7.                     public void onConfirm() { 
  8.                         toast("click confirm"); 
  9.                     } 
  10.                 }, null, false, ResourceTable.Layout_my_confim_popup)//綁定已有布局 
  11.         .show(); 

這樣布局就是您自己的了，動(dòng)畫和交互XPopup會(huì)幫你完成。但是需要注意的是，你自己提供的布局必須包含一些id，否則XPopup無(wú)法找到控件;id必須有，控件你可以隨意組合與擺放。具體如下：

  • Confirm彈窗必須包含的Text以及id有：tv_title，tv_content，tv_cancel，tv_confirm
  • 帶輸入框的Confirm彈窗在Confirm彈窗基礎(chǔ)上需要增加一個(gè)id為et_input的TextField
  • Loading彈窗，如果你想顯示一個(gè)Loading文字說(shuō)明，則必須有一個(gè)id為tv_title的Text;如果不需要文字說(shuō)明，則沒要求
  • 帶列表的彈窗會(huì)多一個(gè)bindItemLayout()方法用來(lái)綁定item布局
  • 其他不在多說(shuō)，看bindLayout方法說(shuō)明，會(huì)說(shuō)明要求哪些id

每種內(nèi)置彈窗的bindLayout和bindItemLayout的要求都在方法說(shuō)明上，無(wú)需記憶，用的時(shí)候查看下方法的說(shuō)明即可。

4.2 自定義彈窗

當(dāng)你自定義彈窗的時(shí)候，需要根據(jù)需求選擇繼承CenterPopupView，BottomPopupView，AttachPopupView/HorizontalAttachPopupView，DrawerPopupView，PartShadowPopupView，F(xiàn)ullScreenPopupView，PositionPopupView其中之一。

每種彈窗的功能和使用場(chǎng)景如下：

  • CenterPopupView：中間彈窗的彈窗，比如：確認(rèn)取消對(duì)話框，Loading彈窗等，如果不滿意默認(rèn)的動(dòng)畫效果，可以設(shè)置不同的動(dòng)畫器
  • BottomPopupView：從底部彈出的彈窗，比如：從底部彈出的分享彈窗，知乎的從底部彈出的評(píng)論彈窗，抖音從底部彈出的評(píng)論彈窗。這種彈窗帶有智能的嵌套滾動(dòng)和手勢(shì)拖動(dòng)
  • AttachPopupView/HorizontalAttachPopupView：Attach彈窗是需要依附于某個(gè)點(diǎn)或者某個(gè)Component來(lái)顯示的彈窗;其中AttachPopupView會(huì)出現(xiàn)在目標(biāo)的上方或者下方。如果希望想要微信朋友圈點(diǎn)贊彈窗那樣的效果，出現(xiàn)在目標(biāo)的左邊或者右邊，則需要繼承 HorizontalAttachPopupView來(lái)做
  • DrawerPopupView：從界面的左邊或者右邊彈出的像DrawerLayout那樣的彈窗，Drawer彈窗本身是橫向滑動(dòng)的，但對(duì)PageSlider和ScrollView等橫向滑動(dòng)控件做了兼容，在彈窗內(nèi)部可以放心使用它們
  • FullScreenPopupView：全屏彈窗，看起來(lái)和Ability 一樣。該彈窗其實(shí)是繼承Center彈窗進(jìn)行的一種實(shí)現(xiàn)，可以設(shè)置任意的動(dòng)畫器
  • ImageViewerPopupView：大圖瀏覽彈窗
  • PositionPopupView：自由定位彈窗，如果你想讓彈窗顯示在左上角，或者右上角，或者任意位置，并且不需要依附任何Component，此時(shí)你需要它

自定義彈窗只有2個(gè)步驟:

一：根據(jù)自己的需求編寫一個(gè)類繼承對(duì)應(yīng)的彈窗

二：重寫getImplLayoutId()返回彈窗的布局，在onCreate中像Ability那樣編寫你的邏輯即可

注意：自定義彈窗本質(zhì)是一個(gè)自定義控件，但是只需重寫一個(gè)參數(shù)的構(gòu)造，其他的不要重寫，所有的自定義彈窗都是這樣。

4.2.1 自定義Center彈窗

  1. class CustomPopup extends CenterPopupView { 
  2.     //注意：自定義彈窗本質(zhì)是一個(gè)自定義控件，但是只需重寫一個(gè)參數(shù)的構(gòu)造，其他的不要重寫，所有的自定義彈窗都是這樣 
  3.     public CustomPopup(Context context) { 
  4.         super(context, null); 
  5.     } 
  6.     // 返回自定義彈窗的布局 
  7.     @Override 
  8.     protected int getImplLayoutId() { 
  9.         return ResourceTable.Layout_custom_popup; 
  10.     } 
  11.     // 執(zhí)行初始化操作，比如：findComponentById，設(shè)置點(diǎn)擊，或者任何你彈窗內(nèi)的業(yè)務(wù)邏輯 
  12.     @Override 
  13.     protected void onCreate() { 
  14.         super.onCreate(); 
  15.         findComponentById(ResourceTable.Id_tv_close).setClickedListener(new ClickedListener() { 
  16.             @Override 
  17.             public void onClick(Component component) { 
  18.                 dismiss(); // 關(guān)閉彈窗 
  19.             } 
  20.         }); 
  21.     } 
  22.     // 設(shè)置最大寬度，看需要而定 
  23.     @Override 
  24.     protected int getMaxWidth() { 
  25.         return super.getMaxWidth(); 
  26.     } 
  27.     // 設(shè)置最大高度，看需要而定 
  28.     @Override 
  29.     protected int getMaxHeight() { 
  30.         return super.getMaxHeight(); 
  31.     } 
  32.     // 設(shè)置自定義動(dòng)畫器，看需要而定 
  33.     @Override 
  34.     protected PopupAnimator getPopupAnimator() { 
  35.         return super.getPopupAnimator(); 
  36.     } 
  37.     // 彈窗的寬度，用來(lái)動(dòng)態(tài)設(shè)定當(dāng)前彈窗的寬度，受getMaxWidth()限制 
  38.     protected int getPopupWidth() { 
  39.         return 0; 
  40.     } 
  41.     // 彈窗的高度，用來(lái)動(dòng)態(tài)設(shè)定當(dāng)前彈窗的高度，受getMaxHeight()限制 
  42.     protected int getPopupHeight() { 
  43.         return 0; 
  44.     }} 

注意：Center彈窗的最大寬度默認(rèn)是屏幕寬度的0.8，如果你自定義布局的寬度是寫死的，有可能超出屏幕寬度的0.8，如果你不想被最大寬度限制，只需要重寫方法：

  1. @Overrideprotected int getMaxWidth() { 
  2.     return 0; 
  3.    //返回0表示不限制最大寬度 
  4. } 

使用自定義彈窗：

  1. new XPopup.Builder(getContext()) 
  2.         .asCustom(new CustomPopup(getContext())) 
  3.         .show(); 

4.2.2 自定義Attach彈窗

  1. public class CustomAttachPopup2 extends AttachPopupView { 
  2.     public CustomAttachPopup2(Context context) { 
  3.         super(context, null); 
  4.     } 
  5.     @Override 
  6.     protected int getImplLayoutId() { 
  7.         return ResourceTable.Layout_custom_attach_popup2; 
  8.     } 
  9.     // 設(shè)置狀態(tài)欄的高度，用以修正自定義位置彈窗的高度 
  10.     @Override 
  11.     protected int setStatusBarHeight() { 
  12.         return 130; 
  13.     }} 

4.2.3 自定義DrawerLayout類型彈窗

  1. public class CustomDrawerPopupView extends DrawerPopupView { 
  2.     public CustomDrawerPopupView(Context context) { 
  3.         super(context, null); 
  4.     } 
  5.     @Override 
  6.     protected int getImplLayoutId() { 
  7.         return ResourceTable.Layout_custom_list_drawer; 
  8.     } 
  9.     @Override 
  10.     protected void onCreate() { 
  11.         super.onCreate(); 
  12.         findComponentById(ResourceTable.Id_btn).setClickedListener(new ClickedListener() { 
  13.             @Override 
  14.             public void onClick(Component component) { 
  15.                 toast("nothing!!!"); 
  16.             } 
  17.         }); 
  18.     }} 

使用自定義的DrawerLayout彈窗：

  1. new XPopup.Builder(getContext()) 
  2.         .popupPosition(PopupPosition.Right)//右邊 
  3.         .asCustom(new CustomDrawerPopupView(getContext())) 
  4.         .show(); 

4.2.4 自定義Bottom類型的彈窗

自定義Bottom類型的彈窗會(huì)比較常見，默認(rèn)Bottom彈窗帶有手勢(shì)交互和嵌套滾動(dòng);如果您不想要手勢(shì)交互可以調(diào)用enableDrag(false)方法關(guān)閉。

請(qǐng)注意：彈窗的寬高是自適應(yīng)的，大部分情況下都應(yīng)該將彈窗布局的高設(shè)置為match_content;除非你希望得到一個(gè)高度撐滿的彈窗。

Demo中有一個(gè)模仿知乎評(píng)論的實(shí)現(xiàn)，代碼如下：

  1. public class ZhihuCommentPopup extends BottomPopupView { 
  2.     ListContainer listContainer; 
  3.     public ZhihuCommentPopup(Context context) { 
  4.         super(context, null); 
  5.     } 
  6.     @Override 
  7.     protected int getImplLayoutId() { 
  8.         return ResourceTable.Layout_custom_bottom_popup; 
  9.     } 
  10.     @Override 
  11.     protected void onCreate() { 
  12.         super.onCreate(); 
  13.         listContainer = (ListContainer) findComponentById(ResourceTable.Id_listContainer); 
  14.         ArrayList<String> strings = new ArrayList<>(); 
  15.         for (int i = 0; i < 30; i++) { 
  16.             strings.add(""); 
  17.         } 
  18.         EasyProvider commonAdapter = new EasyProvider<String>(getContext(), strings, ResourceTable.Layout_adapter_zhihu_comment) { 
  19.             @Override 
  20.             protected void bind(ViewHolder holder, String itemData, final int position) {} 
  21.         }; 
  22.         listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() { 
  23.             @Override 
  24.             public void onItemClicked(ListContainer listContainer, Component component, int position, long id) { 
  25.                 dismiss(); 
  26.             } 
  27.         }); 
  28.         listContainer.setItemProvider(commonAdapter); 
  29.     } 
  30.     // 最大高度為Window的0.7 
  31.     @Override 
  32.     protected int getMaxHeight() { 
  33.         return (int) (XPopupUtils.getScreenHeight(getContext()) * .7f); 
  34.     }} 

4.2.5 自定義全屏彈窗

  1. public class CustomFullScreenPopup extends FullScreenPopupView { 
  2.     public CustomFullScreenPopup(Context context) { 
  3.         super(context, null); 
  4.     } 
  5.     @Override 
  6.     protected int getImplLayoutId() { 
  7.         return ResourceTable.Layout_custom_fullscreen_popup; 
  8.     } 
  9.     @Override 
  10.     protected void onCreate() { 
  11.         super.onCreate(); 
  12.         // 初始化 
  13.     }} 

4.2.6 自定義ImageViewer彈窗

目前大圖瀏覽彈窗支持在上面添加任意自定義布局和背景顏色，做法是寫一個(gè)類繼承ImageViewerPopupView彈窗，然后重寫布局即可。

代碼如下：

  1. public class CustomImagePopup extends ImageViewerPopupView { 
  2.     public CustomImagePopup(Context context) { 
  3.         super(context, null); 
  4.     } 
  5.     @Override 
  6.     protected int getImplLayoutId() { 
  7.         return ResourceTable.Layout_custom_image_viewer_popup; 
  8.     }} 

由于是自定義的大圖瀏覽彈窗，就要用自定義彈窗的方式來(lái)開啟了：

  1. // 自定義的彈窗需要用asCustom來(lái)顯示，之前的asImageViewer這些方法當(dāng)然不能用了。 
  2. CustomImagePopup viewerPopup = new CustomImagePopup(getContext()); 
  3. // 自定義的ImageViewer彈窗需要自己手動(dòng)設(shè)置相應(yīng)的屬性，必須設(shè)置的有srcView，url和imageLoader。 
  4. viewerPopup.setSingleSrcView(image2, url2); 
  5. viewerPopup.setXPopupImageLoader(new ImageLoader()); 
  6. new XPopup.Builder(getContext()) 
  7.         .asCustom(viewerPopup) 
  8.         .show(); 

4.2.7 自定義Position彈窗

  1. public class QQMsgPopup extends PositionPopupView { 
  2.     public QQMsgPopup(Context context) { 
  3.         super(context, null); 
  4.     } 
  5.     @Override 
  6.     protected int getImplLayoutId() { 
  7.         return ResourceTable.Layout_popup_qq_msg; 
  8.     }} 

自由定位彈窗，默認(rèn)是顯示在屏幕的左上角，你可以通過(guò)offsetX()和offsetY()來(lái)控制顯示位置，如果你希望水平居中，可以用isCenterHorizontal(true)選項(xiàng)來(lái)做到。

  1. new XPopup.Builder(getContext()) 
  2.         .popupAnimation(PopupAnimation.ScaleAlphaFromCenter) 
  3.         .isCenterHorizontal(true) 
  4.         .offsetY(200) 
  5.         .asCustom(new QQMsgPopup(getContext())) 
  6.         .show(); 

4.3 自定義動(dòng)畫

自定義動(dòng)畫已經(jīng)被設(shè)計(jì)得非常簡(jiǎn)單，動(dòng)畫和彈窗是無(wú)關(guān)的;這意味著你可以將動(dòng)畫設(shè)置給內(nèi)置彈窗或者自定義彈窗。繼承PopupAnimator，實(shí)現(xiàn)3個(gè)方法：

  • 如何初始化動(dòng)畫
  • 動(dòng)畫如何開始
  • 動(dòng)畫如何結(jié)束

比如：自定義一個(gè)旋轉(zhuǎn)的動(dòng)畫：

  1. class RotateAnimator extends PopupAnimator { 
  2.   @Override 
  3.   public void initAnimator() { 
  4.       targetView.setScaleX(0.0f); 
  5.       targetView.setScaleY(0.0f); 
  6.       targetView.setAlpha(0.0f); 
  7.       targetView.setRotation(360.0f); 
  8.   } 
  9.   @Override 
  10.   public void animateShow() { 
  11.       targetView.createAnimatorProperty().rotate(0.0f).scaleX(1.0f).scaleY(1.0f).alpha(1.0f).setDuration(getDuration()).start(); 
  12.   } 
  13.   @Override 
  14.   public void animateDismiss() { 
  15.       targetView.createAnimatorProperty().rotate(720.0f).scaleX(0.0f).scaleY(0.0f).alpha(0.0f).setDuration(getDuration()).start(); 
  16.   }} 

使用自定義動(dòng)畫：

  1. new XPopup.Builder(getContext()) 
  2.         .customAnimator(new RotateAnimator()) 
  3.         .asConfirm("演示自定義動(dòng)畫", "當(dāng)前的動(dòng)畫是一個(gè)自定義的旋轉(zhuǎn)動(dòng)畫，無(wú)論是自定義彈窗還是自定義動(dòng)畫，已經(jīng)被設(shè)計(jì)得非常簡(jiǎn)單；這個(gè)動(dòng)畫代碼只有6行即可完成！", null) 
  4.         .show(); 

不想要?jiǎng)赢嫞?/p> 

  1. new XPopup.Builder(getContext()) 
  2.         .customAnimator(new EmptyAnimator(null)) 
  3.         .asConfirm("演示自定義動(dòng)畫", "當(dāng)前的動(dòng)畫是一個(gè)自定義的旋轉(zhuǎn)動(dòng)畫，無(wú)論是自定義彈窗還是自定義動(dòng)畫，已經(jīng)被設(shè)計(jì)得非常簡(jiǎn)單；這個(gè)動(dòng)畫代碼只有6行即可完成！", null) 
  4.         .show(); 

4.4 常用設(shè)置

4.4.1 全局設(shè)置

1.設(shè)置主色調(diào) 默認(rèn)情況下，XPopup的主色為灰色，主色作用于Button文字，TextField邊框和光標(biāo)，Check文字的顏色上。 主色調(diào)只需要設(shè)置一次即可，可以放在啟動(dòng)頁(yè)中。

  1. XPopup.setPrimaryColor(getColor(ResourceTable.Color_colorPrimary)); 

2.設(shè)置全局的動(dòng)畫時(shí)長(zhǎng) 默認(rèn)情況下，彈窗的動(dòng)畫時(shí)長(zhǎng)為360毫秒。你可以通過(guò)下面的方法進(jìn)行修改：

  1. XPopup.setAnimationDuration(200); // 傳入的時(shí)長(zhǎng)最小為0，動(dòng)畫的時(shí)長(zhǎng)會(huì)影響除Drawer彈窗外的所有彈窗 

4.4.2 常用設(shè)置

所有的設(shè)置如下，根據(jù)需要使用：

  1. new XPopup.Builder(getContext()) 
  2.         .isDestroyOnDismiss(true) //是否在消失的時(shí)候銷毀資源，默認(rèn)false。如果你的彈窗對(duì)象只使用一次，非常推薦設(shè)置這個(gè)，可以杜絕內(nèi)存泄漏。如果會(huì)使用多次，千萬(wàn)不要設(shè)置 
  3.         .dismissOnBackPressed(true) //按返回鍵是否關(guān)閉彈窗，默認(rèn)為true 
  4.         .dismissOnTouchOutside(true) //點(diǎn)擊外部是否關(guān)閉彈窗，默認(rèn)為true 
  5.         .autoOpenSoftInput(true) //是否彈窗顯示的同時(shí)打開輸入法，只在包含輸入框的彈窗內(nèi)才有效，默認(rèn)為false 
  6.         .popupAnimation(PopupAnimation.ScaleAlphaFromCenter) //設(shè)置內(nèi)置的動(dòng)畫 
  7.         .customAnimator(null) //設(shè)置自定義的動(dòng)畫器 
  8.         .popupPosition(PopupPosition.Right) //手動(dòng)指定彈窗出現(xiàn)在目標(biāo)的什么位置，對(duì)Attach和Drawer類型彈窗生效 
  9.         .positionByWindowCenter(false) //默認(rèn)是false，是否以屏幕中心進(jìn)行定位，默認(rèn)是false，為false時(shí)根據(jù)Material范式進(jìn)行定位，主要影響Attach系列彈窗 
  10.         .offsetX(-10) //彈窗在x方向的偏移量        .offsetY(-10) //彈窗在y方向的偏移量 
  11.         .maxWidth(10) //設(shè)置彈窗的最大寬度，如果重寫彈窗的getMaxWidth()，以重寫的為準(zhǔn) 
  12.         .maxHeight(10) //設(shè)置彈窗的最大高度，如果重寫彈窗的getMaxHeight()，以重寫的為準(zhǔn) 
  13.         .isCenterHorizontal(true) //是否和目標(biāo)水平居中，比如：默認(rèn)情況下Attach彈窗依靠著目標(biāo)的左邊或者右邊，如果isCenterHorizontal為true，則與目標(biāo)水平居中對(duì)齊 
  14.         .isRequestFocus(false) //默認(rèn)為true，默認(rèn)情況下彈窗會(huì)搶占焦點(diǎn)，目的是為了響應(yīng)返回按鍵按下事件；如果為false，則不搶焦點(diǎn) 
  15.         .enableDrag(true) //是否啟用拖拽，默認(rèn)為true，目前對(duì)Bottom和Drawer彈窗有用 
  16.         .isDarkTheme(true)  //是否啟用暗色主題        .borderRadius(10)  //為彈窗設(shè)置圓角，默認(rèn)是15，對(duì)內(nèi)置彈窗生效 
  17.         .autoDismiss(false) //操作完畢后是否自動(dòng)關(guān)閉彈窗，默認(rèn)為true；比如點(diǎn)擊ConfirmPopup的確認(rèn)按鈕，默認(rèn)自動(dòng)關(guān)閉；如果為false，則不會(huì)關(guān)閉 
  18.         .setPopupCallback(new SimpleCallback() { //設(shè)置顯示和隱藏的回調(diào) 
  19.             @Override            public void onCreated(BasePopupView basePopupView) { 
  20.                 // 彈窗內(nèi)部onCreate執(zhí)行完調(diào)用 
  21.             } 
  22.             @Override 
  23.             public void beforeShow(BasePopupView basePopupView) { 
  24.                 // 每次show之前都會(huì)執(zhí)行 
  25.             } 
  26.             @Override 
  27.             public void onShow(BasePopupView basePopupView) { 
  28.                 // 完全顯示的時(shí)候執(zhí)行 
  29.             } 
  30.             @Override 
  31.             public void onDismiss(BasePopupView basePopupView) { 
  32.                 // 完全隱藏的時(shí)候執(zhí)行 
  33.             } 
  34.             // 如果你自己想攔截返回按鍵事件，則重寫這個(gè)方法，返回true即可 
  35.             @Override 
  36.             public boolean onBackPressed(BasePopupView basePopupView) { 
  37.                 new ToastDialog(getContext()).setText("我攔截的返回按鍵，按返回鍵XPopup不會(huì)關(guān)閉了").show(); 
  38.                 return true; //默認(rèn)返回false 
  39.             } 
  40.             //監(jiān)聽彈窗拖拽，適用于能拖拽的彈窗 
  41.             @Override 
  42.             public void onDrag(BasePopupView popupView, int value, float percent,boolean upOrLeft) { 
  43.             } 
  44.         }) 
  45.         .asXXX() //所有的設(shè)置項(xiàng)都要寫在asXXX()方法調(diào)用之前 

5. 下載鏈接

5.1 IDE下載鏈接

https://developer.harmonyos.com/cn/develop/deveco-studio#download

5.2 源碼鏈接

https://gitee.com/openharmony-tpc/XPopup

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

[[396596]]

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2021-08-09 10:24:49

鴻蒙HarmonyOS應(yīng)用

2021-08-02 14:54:50

鴻蒙HarmonyOS應(yīng)用

2021-08-03 12:47:58

鴻蒙HarmonyOS應(yīng)用

2021-03-10 15:03:40

鴻蒙HarmonyOS應(yīng)用

2021-04-29 14:32:24

鴻蒙HarmonyOS應(yīng)用

2021-03-24 09:30:49

鴻蒙HarmonyOS應(yīng)用

2021-01-27 10:04:46

鴻蒙HarmonyOS動(dòng)畫

2021-04-28 09:56:44

鴻蒙HarmonyOS應(yīng)用

2021-08-04 14:16:41

鴻蒙HarmonyOS應(yīng)用

2021-08-26 16:07:46

鴻蒙HarmonyOS應(yīng)用

2021-03-03 09:42:26

鴻蒙HarmonyOS圖片裁剪

2021-04-08 14:57:52

鴻蒙HarmonyOS應(yīng)用

2021-04-20 15:06:42

鴻蒙HarmonyOS應(yīng)用

2021-07-06 18:21:31

鴻蒙HarmonyOS應(yīng)用

2021-08-05 15:06:30

鴻蒙HarmonyOS應(yīng)用

2021-08-30 17:55:58

鴻蒙HarmonyOS應(yīng)用

2021-08-03 10:07:41

鴻蒙HarmonyOS應(yīng)用

2021-03-01 14:00:11

鴻蒙HarmonyOS應(yīng)用

2021-03-05 09:58:50

鴻蒙HarmonyOS開源

2021-03-04 08:46:32

鴻蒙HarmonyOS應(yīng)用
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)