首先：
給大家一個鴻蒙api檔案入口
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-ability- overview- 0000000000029852
前言：
在開發鴻蒙程序中我們會需要實作tab滑動來實作首頁,另或者我們需要視頻進行上下左右滑動都會需要PageSlider這個控制元件
開始：
在布局里面添加
<?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"
ohos:scrollbar_background_color="$color:black"
>
<PageSlider
ohos:id="$+id:hotpage"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:top_margin="10vp"
/>
</DirectionalLayout>
接下來創建PageSlider配接器
public class TestPagerProvider extends PageSliderProvider {
// 資料源，每個頁面對應list中的一項
private List<DataItem> list;
private Context context;
public TestPagerProvider(List<DataItem> list, Context context) {
this.list = list;
this.context = context;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object createPageInContainer(ComponentContainer componentContainer, int i) {
Component component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_layout_video_page_twos, null, false);
componentContainer.addComponent(component, ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
return component;
}
@Override
public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
componentContainer.removeComponent((Component) o);
}
@Override
public boolean isPageMatchToObject(Component component, Object o) {
return component == o;
}
@Override
public void onUpdateFinished(ComponentContainer componentContainer) {
super.onUpdateFinished(componentContainer);
}
//資料物體類
public static class DataItem{
String mText;
public DataItem(String txt) {
mText = txt;
}
}
}
PageSlider配接器的布局
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
>
<Text
ohos:id="$+id:comment_text"
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="15vp"
ohos:layout_alignment="center"
/>
</DependentLayout>
然后在MainAbility里面給是配器設定值
public class MainAbility extends BasePageAbility {
private VideoRecommendTask mDownloadTask;
private VideoInfoDownloadTask mDownloadTask1;
private PageSlider page_slider;
private int index=0;
private VideoHostListTask videoHostListTask;
private VideoFollowTask videoRecommendTask;
private VideoLikeTask c;
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
setUIContent(ResourceTable.Layout_ability_routingt_test);
initPageSlider();
}
private void initPageSlider() {
PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page);
pageSlider.setProvider(new TestPagerAdapter(getData(),this));
}
private ArrayList<TestPagerAdapter.DataItem> getData() {
ArrayList<TestPagerAdapter.DataItem> dataItems = new ArrayList<>();
dataItems.add(new TestPagerAdapter.DataItem("Page A"));
dataItems.add(new TestPagerAdapter.DataItem("Page B"));
dataItems.add(new TestPagerAdapter.DataItem("Page C"));
dataItems.add(new TestPagerAdapter.DataItem("Page D"));
return dataItems;
}
}
MainAbility的布局
<?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:id="$+id:page"
ohos:height="match_parent"
ohos:width="match_parent"
/>
</DirectionalLayout>
效果就是這樣的暫時用這個效果圖吧時間緊
這樣簡單的 PageSlider滑動就已經時間了
擴展：
但是有一種情況是在頁面很多的情況下我們是否要優化(布局復用)答案是肯定的上代碼
借鑒ListView item復用方法
public class VideoPagerProvider extends PageSliderProvider {
/**
* View快取池，從ViewPager中移除的item將會存到這里面，用來復用
*/
private List<Component> mViewPool = new ArrayList<>();
public HashMap<Integer, PageVideoViewBlack> mPlayViewMap = new HashMap<>();
private Context context;
/**
* 資料源
*/
private List<Status> mVideoBeans;
public VideoPagerProvider(List<Status> videoBeans, Context Context) {
this.mVideoBeans = videoBeans;
this.context = Context;
}
public void addList(List<Status> list) {
this.mVideoBeans.addAll(list);
notifyDataChanged();
}
@Override
public int getCount() {
return mVideoBeans == null || mVideoBeans.isEmpty() ? 0 : mVideoBeans.size();
}
@Override
public Object createPageInContainer(ComponentContainer container, int position) {
Component view = null;
if (mViewPool.size() > 0) {//取第一個進行復用
view = mViewPool.remove(0);
}
ViewHolderVideo viewHolder;
if (view == null) {
view = LayoutScatter.getInstance((Context) context).parse(ResourceTable.Layout_layout_video_Recommend, container, false);
viewHolder = new ViewHolderVideo(view);
} else {
viewHolder = (ViewHolderVideo) view.getTag();
}
container.addComponent(view, ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
return view;
}
@Override
public void destroyPageFromContainer(ComponentContainer componentContainer, int position, Object o) {
Component itemView = (Component) o;
componentContainer.removeComponent(itemView);
mViewPool.add(itemView);
}
@Override
public boolean isPageMatchToObject(Component component, Object o) {
return component == o;
}
@Override
public void onUpdateFinished(ComponentContainer componentContainer) {
super.onUpdateFinished(componentContainer);
}
public static class ViewHolderVideo {
ViewHolderVideo(Component itemView) {
itemView.setTag(this);
}
}
}
決議
PageSlider沒有復用機制但是為了性能考慮進行了復用創建ViewHolder為控制元件創建快取Component集合用來存盤view復用原理在創建view時將view放到ViewHolder里面在銷毀時將view放到Component集合然后再里面取view頁面
首先需要了解PageSlider的Adapter各個方法的回呼機制，
這里主要看兩個方法：instantiateItem()和 destroyItem()，
instantiateItem()方法，是在滑動到一個新的ViewItem的時候被呼叫的，而destroyItem()是在當用戶滑到第3個ViewItem的時候被呼叫，在這個時候會先呼叫這個方法來回收第一個ViewItem，然后在呼叫instantiateItem()方法來實體化第3個ViewItem，利用上面所說的機制，就可以在destroyItem()的時候將要被remove掉的view回收起來，然后在instantiateItme()的時候重復利用這個view，這樣，就只會有3個ViewHolder實體存在，即當前顯示的，還有上一個Item和下一個Item，
PageSlider存在的bug:
存在的問題因為業務需要在分頁加載的時候 notifyDataChanged();串列會回傳到頂部index回傳到0
public void addList(List<Status> list) {
this.mVideoBeans.addAll(list);
notifyDataChanged();
}
我的解決方法是 pageSlider.setCurrentPage(i, false);
在分頁的時候將頁面選擇到當前要分頁的頁面//false是因為將翻頁的效果屏蔽掉就可以了
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/286415.html
標籤：其他