【Harmony OS】【JAVA UI】鴻蒙怎麼實現無限輪播功能
阿新 • • 發佈:2022-03-29
關於 HarmonyOS 開發中鴻蒙的無線輪播功能(效果圖如下)是一個很常見的功能,在鴻蒙中怎麼實現呢?今天寫一個demo來記錄一下該功能的實現,主要分為“準備工作”,“圖片輪播”,“無線輪播”,“執行效果”四個方面進行實
1. 準備工作
1.1 想要實現無線輪播功能需要檢視PageSlider和“執行緒管理”,“執行緒通訊”這個幾個知識的準備
1.2 圖片準備
我們從網上下載幾張圖片放在 resources/base/media 目錄下(如下如所示)
2. 圖片輪播
2.1 xml 佈局書寫
我們新建一個 AbilitySlice 的介面然後在他的 layout 佈局程式碼如下
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <PageSlider ohos:top_margin="10vp" ohos:id="$+id:page_slider" ohos:height="300vp" ohos:width="300vp" ohos:layout_alignment="horizontal_center"/> </DirectionalLayout>
2.2 書寫 TestPageProvider
這個可以參考 HarmonyOS 官網的 TestPageProvider (具體程式碼如下)
package com.harmony.alliance.mydemo.adapter; import com.harmony.alliance.mydemo.ResourceTable; import ohos.agp.colors.RgbColor; import ohos.agp.components.*; import ohos.agp.components.element.ShapeElement; import ohos.agp.utils.Color; import ohos.agp.utils.TextAlignment; import ohos.app.Context; import java.util.List; public class TestPageProvider extends PageSliderProvider { // 資料來源,每個頁面對應list中的一項 private List<Integer> list; private Context mContext; public TestPageProvider(List<Integer> list, Context context) { this.list = list; this.mContext = context; } @Override public int getCount() { return list.size(); } @Override public Object createPageInContainer(ComponentContainer componentContainer, int i) { Image image = new Image(mContext); image.setPixelMap(list.get(i)); image.setLayoutConfig ( new StackLayout.LayoutConfig ( ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT )); image.setScaleMode(Image.ScaleMode.STRETCH); componentContainer.addComponent(image); return image; } @Override public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) { componentContainer.removeComponent((Component) o); } @Override public boolean isPageMatchToObject(Component component, Object o) { return true; } }
2.3 寫 abilitySlice 檔案
在 abilitySlice的Onstart 的方中進行如下查詢元件和初始化 TestPageProvider 和設定 page 快取(具體程式碼如下)
protected void onStart(Intent intent) { super.onStart(intent); setUIContent(ResourceTable.Layout_ad_slot_pager); pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider); //查詢元件 //todo 初始化mTestPageProvider TestPageProvider mTestPageProvider= new TestPageProvider(getData(), this); pageSlider.setProvider(mTestPageProvider); //todo 設定快取page pageSlider.setPageCacheSize(4); eventRunner = EventRunner.create("TestRunner"); } //todo 設定資料來源 private ArrayList<Integer> getData() { ArrayList<Integer> dataItems = new ArrayList<>(); for(int i=0;i<1024*10;i++) { dataItems.add(images[i%4]); } return dataItems; }
效果圖如下