鸿蒙组件 PageSlider 界面滑动效果的应用

注意：标题中的界面指的是布局文件，也就是把布局文件加载到PageSlider当中。

简单的说有三个步骤：

1. 准备PageSlider和要加载的布局文件。
2. 通过适配器将布局文件渲染到PageSlider容器当中。
3. PageSlider与适配器连接。

一.准备PageSlider和要加载的布局文件

简单项目结构如下：

ability_main.xml代码如下（注意宽高占了整个界面）：

<?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:pageSlider"
        ohos:height="match_parent"
        ohos:width="match_parent"/>


</DirectionalLayout>

item1_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"
    ohos:alignment="center"
    ohos:background_element="#FFD7BF27">


    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="item1"
        ohos:text_size="25fp"/>
</DirectionalLayout>

效果如下：

二. 通过适配器将布局文件渲染到PageSlider容器当中

package com.jiakejian.myapplication.provider;

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.LayoutScatter;

import java.util.List;


public class PageProvider extends PageSliderProvider {
    
    //要加载的数据
    private List<Integer> dataList;
    private AbilitySlice mSlice;

    public PageProvider(List<Integer> dataList, AbilitySlice mSlice) {
        this.dataList = dataList;
        this.mSlice = mSlice;
    }

    @Override
    public int getCount() {
        return dataList.size();
    }


    //将数据渲染到PageSlider容器当中
    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        Integer id = dataList.get(i);
        
        Component component = LayoutScatter.getInstance(mSlice).parse(id,null,false);
        componentContainer.addComponent(component);
        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 true;
    }
}

三.PageSlider与适配器连接

package com.jiakejian.myapplication.slice;

import com.jiakejian.myapplication.ResourceTable;
import com.jiakejian.myapplication.provider.PageProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.PageSlider;

import java.util.ArrayList;
import java.util.List;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pageSlider);

        //将数据加载到适配器
        PageProvider pageProvider = new PageProvider(saveData(),this);
        
        //适配器与pageSlider连接
        pageSlider.setProvider(pageProvider);


    }

    //填充数据（也就是布局文件）
    public List<Integer> saveData(){
        List<Integer> list = new ArrayList<>();
        list.add(ResourceTable.Layout_item1_layout);
        list.add(ResourceTable.Layout_item2_layout);
        list.add(ResourceTable.Layout_item3_layout);
        return list;
    }


    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

效果如下：