如何在HarmonyOS中实现页面滑动及Java环境下GridView项的页面滑动功能

1. How to implement page scrolling in HarmonyOS? #

The most straightforward way to achieve page-to-page scrolling in HarmonyOS is using the official PageSlider component—it's designed specifically for swipeable multi-page interfaces. Here's how to set it up:

• Add PageSlider to your layout
  First, include the PageSlider in your XML layout file:

  <PageSlider
      ohos:id="$+id:page_slider"
      ohos:height="match_parent"
      ohos:width="match_parent"/>
  

• Create a PageSlider adapter
  You'll need a custom adapter extending PageSliderProvider to manage your pages:

  public class MyPageSliderAdapter extends PageSliderProvider {
      private List<Component> pageList;
  
      public MyPageSliderAdapter(List<Component> pageList) {
          this.pageList = pageList;
      }
  
      @Override
      public int getCount() {
          return pageList.size();
      }
  
      @Override
      public Object createPageInContainer(ComponentContainer container, int position) {
          Component page = pageList.get(position);
          container.addComponent(page);
          return page;
      }
  
      @Override
      public void destroyPageFromContainer(ComponentContainer container, int position, Object page) {
          container.removeComponent((Component) page);
      }
  
      @Override
      public boolean isPageMatchToObject(Component page, Object obj) {
          return page == obj;
      }
  }
  

• Configure PageSlider in your AbilitySlice
  Initialize your pages, attach the adapter, and you're good to go:

  @Override
  public void onStart(Intent intent) {
      super.onStart(intent);
      setUIContent(ResourceTable.Layout_ability_main);
  
      PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
      List<Component> pages = new ArrayList<>();
  
      // Example: Inflate two test pages
      DirectionalLayout page1 = (DirectionalLayout) LayoutScatter.getInstance(this)
              .parse(ResourceTable.Layout_page_one, null, false);
      DirectionalLayout page2 = (DirectionalLayout) LayoutScatter.getInstance(this)
              .parse(ResourceTable.Layout_page_two, null, false);
  
      pages.add(page1);
      pages.add(page2);
  
      MyPageSliderAdapter adapter = new MyPageSliderAdapter(pages);
      pageSlider.setProvider(adapter);
  }
  

For local scrolling within a single page (e.g., when content exceeds screen size), just wrap your content in a ScrollView (vertical scroll) or HorizontalScrollView (horizontal scroll)—no extra code needed beyond nesting.

2. How to implement page scrolling for a custom GridView (Java) #

Looking at your custom GridView that extends TableLayout, the key issue is that TableLayout doesn't support scrolling out of the box. We have two easy fixes for this:

Option 1: Nest in a scroll container (quickest solution) #

Simply wrap your custom GridView in a ScrollView or HorizontalScrollView in your layout file:

<!-- Vertical scroll -->
<ScrollView
    ohos:height="match_parent"
    ohos:width="match_parent">
    <com.yourpackage.GridView
        ohos:id="$+id:grid_view"
        ohos:height="wrap_content"
        ohos:width="match_parent"/>
</ScrollView>

<!-- For horizontal scroll, use this instead -->
<!--
<HorizontalScrollView
    ohos:height="match_parent"
    ohos:width="match_parent">
    <com.yourpackage.GridView
        ohos:id="$+id:grid_view"
        ohos:height="match_parent"
        ohos:width="wrap_content"/>
</HorizontalScrollView>
-->

This will automatically enable scrolling when the GridView's content exceeds the screen bounds.

Option 2: Modify your custom GridView to inherit from ScrollView #

If you want your GridView to handle scrolling on its own without an extra container, adjust its parent class to ScrollView and embed the TableLayout inside it. Here's the updated code:

public class GridView extends ScrollView {
    private TableLayout tableLayout;

    public GridView(Context context) {
        super(context);
        initInnerTableLayout(context);
    }

    public GridView(Context context, AttrSet attrSet) {
        super(context, attrSet);
        initInnerTableLayout(context);
    }

    public GridView(Context context, AttrSet attrSet, String styleName) {
        super(context, attrSet, styleName);
        initInnerTableLayout(context);
    }

    private void initInnerTableLayout(Context context) {
        tableLayout = new TableLayout(context);
        tableLayout.setLayoutConfig(new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.WRAP_CONTENT));
        this.addComponent(tableLayout);
    }

    void setAdapter(GridAdapter adapter, LongClickedListener longClickedListener) {
        tableLayout.removeAllComponents();
        for (int i = 0; i < adapter.getComponentList().size(); i++) {
            Component item = adapter.getComponentList().get(i);
            item.setLongClickedListener(longClickedListener);
            tableLayout.addComponent(item);
        }
    }
}

Now your GridView has built-in scrolling capabilities, so you can use it directly in your layout without extra containers.

内容的提问来源于stack exchange，提问作者Jamil