Preface:

Hi, everyone. I haven’t updated the article for a while. I remember exactly how long. Recently also in learning hongmeng development, learned that PageSlider sliding component similar to Android inside viewpager can achieve the screen sliding around the effect, so no more nonsense to say we officially began

The preparatory work

Installation of the Hongmeng development environment you can see my previous article

Huawei HongMeng system development experience in the early: [https://www.jianshu.com/p/f94c847c7fdc]

rendering

The specific implementation

MainAbility layout file

<? The 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:background_element="blue" ohos:orientation="vertical"> <PageSlider ohos:id="$+id:pager_slider" ohos:height="0vp" ohos:width="match_parent" ohos:background_element="#ffffff" ohos:weight="1"/> <RadioContainer ohos:id="$+id:radio_container" ohos:height="60vp" ohos:width="match_parent" ohos:alignment="horizontal_center" ohos:orientation="horizontal"> <RadioButton ohos:height="match_parent" ohos:width="match_content" ohos:text_size="20fp" /> <RadioButton ohos:height="match_parent" ohos:width="match_content" ohos:text_size="20fp" /> </RadioContainer> </DirectionalLayout>Copy the code

So on this side of the layout we have a RadioContainer at the bottom to handle that little circle at the bottom to show the shadow effect and on top of that we have a PageSlider component

Concrete logic code

  • #### Initialization controller
radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container); ((RadioButton) radioContainer.getComponentAt(0)).setChecked(true); pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pager_slider); LayoutScatter layoutScatter = LayoutScatter.getInstance(getContext()); DependentLayout dependentLayout1 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider1, null, false);  DependentLayout dependentLayout2 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider2, null, false);Copy the code

  • Load the View into the array

  pageviews = new ArrayList<Component>();
  pageviews.add(dependentLayout1);
 pageviews.add(dependentLayout2);
Copy the code

  • Binding adapter

SetProvider (new PageSliderProvider() {@override public int getCount() {hilog.info (LOG_LABEL, "--------getCount"); return pageviews.size(); } // Return an object, Override Public Object createPageInContainer(ComponentContainer) This Object indicates which Object the PagerAdapter chooses to place in the current PageViews componentContainer, int i) { componentContainer.addComponent(pageviews.get(i)); HiLog.info(LOG_LABEL, "--------createPageInContainer"); return pageviews.get(i); } // Override public void destroyPageFromContainer(ComponentContainer, int I, ComponentContainer) Object o) { ((PageSlider) componentContainer).removeComponent(pageviews.get(i)); HiLog.info(LOG_LABEL, "--------destroyPageFromContainer"); } @override public Boolean isPageMatchToObject(Component Component, Object o) {hilog.info (LOG_LABEL, "--------isPageMatchToObject"); return component == o; }});Copy the code

  • PageSlider slides listening events

pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() { @Override public void onPageSliding(int i, Float v, int i1) {//v: indicates the position offset of the page. The value ranges from 0 to 1. // 0 indicates that the target page is being displayed. //i1: indicates the number of pixels offset from the position of the display page. } @Override public void onPageSlideStateChanged(int i) { HiLog.info(LOG_LABEL, "--------onPageSlideStateChanged"); } @Override public void onPageChosen(int i) { ((RadioButton) radioContainer.getComponentAt(i)).setChecked(true); }});Copy the code

  • The complete code

package com.example.pagesliderdemo.slice; import com.example.pagesliderdemo.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import ohos.hiviewdfx.HiLog; import ohos.hiviewdfx.HiLogLabel; import java.util.ArrayList; import java.util.List; public class MainAbilitySlice extends AbilitySlice { static final HiLogLabel LOG_LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00002, "MainAbilitySlice"); private RadioContainer radioContainer; private PageSlider pageSlider; private List<Component> pageviews; @Override public void onStart(Intent intent) { HiLog.info(LOG_LABEL, "--------onStart2"); super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container); ((RadioButton) radioContainer.getComponentAt(0)).setChecked(true); pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pager_slider); LayoutScatter layoutScatter = LayoutScatter.getInstance(getContext()); DependentLayout dependentLayout1 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider1, null, false);  DependentLayout dependentLayout2 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider2, null, false);  Pageviews = new ArrayList<Component>(); pageviews.add(dependentLayout1); pageviews.add(dependentLayout2); Pageslider.setprovider (new PageSliderProvider() {@override public int getCount() { HiLog.info(LOG_LABEL, "--------getCount"); return pageviews.size(); } // Return an object, Override Public Object createPageInContainer(ComponentContainer) This Object indicates which Object the PagerAdapter chooses to place in the current PageViews componentContainer, int i) { componentContainer.addComponent(pageviews.get(i)); HiLog.info(LOG_LABEL, "--------createPageInContainer"); return pageviews.get(i); } // Override public void destroyPageFromContainer(ComponentContainer, int I, ComponentContainer) Object o) { ((PageSlider) componentContainer).removeComponent(pageviews.get(i)); HiLog.info(LOG_LABEL, "--------destroyPageFromContainer"); } @override public Boolean isPageMatchToObject(Component Component, Object o) {hilog.info (LOG_LABEL, "--------isPageMatchToObject"); return component == o; }}); pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() { @Override public void onPageSliding(int i, Float v, int i1) {//v: indicates the position offset of the page. The value ranges from 0 to 1. // 0 indicates that the target page is being displayed. //i1: indicates the number of pixels offset from the position of the display page. } @Override public void onPageSlideStateChanged(int i) { HiLog.info(LOG_LABEL, "--------onPageSlideStateChanged"); } @Override public void onPageChosen(int i) { ((RadioButton) radioContainer.getComponentAt(i)).setChecked(true); }}); radioContainer.setMarkChangedListener((radioContainer, i) -> pageSlider.setCurrentPage(i)); }}Copy the code

Also attached are Layout_pageSlider1 and Layout_pageSlider2 layout files

  • pageSlider1.xml

<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent">  <Text ohos:height="match_content" ohos:width="match_content" ohos:center_in_parent="true" ohos:text="PageSlider1" ohos:text_size="25fp"/> </DependentLayout>Copy the code

  • pageSlider2.xml

<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent">  <Text ohos:height="match_content" ohos:width="match_content" ohos:center_in_parent="true" ohos:text="PageSlider2" ohos:text_size="25fp"/> </DependentLayout>Copy the code

To this hongmeng PageSlider sliding component is basically done.

Conclusion:

Hongmon inside PageSlider component is the target of Android viewPager did android development students should be more familiar with it is easy to understand PageSlider’s various usage package to add view sliding listening binding adapter and so on. PageSlider is primarily used to deal with an effect that swipes across the screen to achieve the effect of scrolling. I will not expand on the rote graph because of the limited space. I will update it later. Finally, I hope my article can help you solve the problem, and I will contribute more useful codes to share with you. If you think the article is good, please pay attention and star. Thank you