专栏首页C++核心准则原文翻译自学鸿蒙应用开发(37)- PageSlider组件

自学鸿蒙应用开发(37)- PageSlider组件

PageSlider是用于页面之间切换的组件,它通过响应滑动事件完成页面间的切换。

效果展示

首先是本文所示代码的动作视频: http://mpvideo.qpic.cn/0b78eyaakaaaeyapga3k7nqfajwdautaabia.f10003.mp4?dis_k=2f0fd368b9f1d417051633a1ef530023&dis_t=1619063338&spec_id=MzI2MDYyNDgzMQ%3D%3D1619063421&vid=wxv_1812446965637414914&format_id=10003

准备布局文件

一共用到三个布局,第一布局是控制画面全体的page_slider_owner.xml,其内部定义了一个PageSlider组件:

<?xml version="1.0" encoding="utf-8"?>
<PageSlider
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:page_slider"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:layout_alignment="center"/>

接下来是用于控制第1页,第3页的布局文件1:

<?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:layout_alignment="center"
    ohos:background_element="#7FFF7F">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_parent"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:text_color="#0000FF"
        ohos:text_size="80"
        />
</DirectionalLayout>

用于控制第2页,第4页的布局文件2:

<?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:background_element="#FFFF7F">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text_color="#FF0000"
        ohos:text_size="200"
        />
</DirectionalLayout>

布局结构基本相同,区别仅仅在于背景颜色,字体大小和字体颜色。

定制PageSliderProvider

PageSliderProvider继承了PageSliderProcer类,为PageSlider定义了页面生成/销毁功能。

public class TestPagerProvider extends PageSliderProvider {
    private List<DataItem> list;
    private AbilitySlice slice;
    public TestPagerProvider(List<DataItem> list, AbilitySlice slice){
        this.list = list;
        this.slice = slice;
    }
    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        final DataItem data = list.get(i);

        Component cpt = LayoutScatter.getInstance(slice).parse(data.mLayout, null, true);
        Text label = (Text)cpt.findComponentById(ResourceTable.Id_text_helloworld);
        label.setText(data.mText);
        componentContainer.addComponent(cpt);
        return cpt;
    }

    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
        componentContainer.removeComponent((Component) o);
    }

    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        return true;
    }

    //数据实体类
    public static class DataItem{
        String mText;
        int mLayout;
        public DataItem(String txt, int id) {
            mText = txt;
            mLayout = id;
        }
    }
}

内嵌的数据类DataItem,为页面提供布局id和文字信息。实际开发时PageSliderProvider 的派生类和DataItem应该是设计重点。

导入PageSlider

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_page_slider_owner);
        initPageSlider();
    }
    private void initPageSlider() {
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TestPagerProvider(getData(), this));
    }
    private ArrayList<TestPagerProvider.DataItem> getData() {
        ArrayList<TestPagerProvider.DataItem> dataItems = new ArrayList<>();
        dataItems.add(new TestPagerProvider.DataItem("Page A", ResourceTable.Layout_ability_main1));
        dataItems.add(new TestPagerProvider.DataItem("Page B", ResourceTable.Layout_ability_main2));
        dataItems.add(new TestPagerProvider.DataItem("Page C", ResourceTable.Layout_ability_main1));
        dataItems.add(new TestPagerProvider.DataItem("Page D", ResourceTable.Layout_ability_main2));
        return dataItems;
    }
}

initPageSlider用于导入自定义的TestPagerProvier类,getData用于生成每个页面的DataItem数据。

参考代码

完整代码可以从以下链接下载:

https://github.com/xueweiguo/Harmony/tree/master/PageSlider

本文分享自微信公众号 - 面向对象思考(OOThinkingDalian),作者:面向对象思考

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 自学鸿蒙应用开发(9)- TimePicker组件

    如下面代码中21行~49行所示,在获取TimePicker组件后,一方面在button的动作响应中计算所选时刻和当前时刻的秒数差之后用小窗口表示出来;另一方面在...

    面向对象思考
  • 自学鸿蒙应用开发(10)- Switch组件

    如下面代码中20行和42行~49行所示,在获取Switch组件后,在Switch响应处理中根据Switch的当前状态为TimePicker设定是否像是为24小时...

    面向对象思考
  • 自学鸿蒙应用开发(5)- button组件

    代码中按钮id被指定为hello_button,这个信息会在下面的响应代码中用到。

    面向对象思考
  • 自学鸿蒙应用开发(6)- TextField组件

    如下面代码中20行和22行所示,在按钮组件的响应代码中获取TextField组件后,获取输入的文字信息并弹窗显示。

    面向对象思考
  • 自学鸿蒙应用开发(7)- Picker组件

    如下面代码中30行和36行所示,在获取PIcker组件后,设定表示信息并在动作响应代码将最新表示信息设定到TextField组件上。

    面向对象思考
  • 自学鸿蒙应用开发(8)- DatePicker组件

    如下面代码中21行和50行所示,在获取DatePicker组件后,一方面在button的动作响应中计算所选日期和当前日期的差值之后用小窗口表示出来;另一方面在用...

    面向对象思考
  • 自学鸿蒙应用开发(30)- 自定义UI组件(1)

    任何一种开发工具也不可能为开发者提供所有的组件,根据现有组件定义自己的组件也就成为必需。接下来的几篇文章我们定义一个多层圆弧形进度条。本文是第一篇。

    面向对象思考
  • 自学鸿蒙应用开发(12)- Checkbox

    下面代码中的第20行获取RadioContainer组件后,在第24行根据Checkbox的状态更新TimePicker的形式,然后在第42行~45行为Chec...

    面向对象思考
  • 自学鸿蒙应用开发(13)- ProgressBar

    下面代码中的第18行获取ProgressBar组件后,在第19行根据TimePicker的状态更新Progress的形式,然后在第26行TimerPicker的...

    面向对象思考
  • 自学鸿蒙应用开发(14)- RoundProgressBar

    如下代码中35行~44行所示,在布局中增加RoundProgressBar组件。

    面向对象思考
  • 自学鸿蒙应用开发(15)- ScrollView

    如下代码中第2行~第10行和第137行所示,可以很简单地在布局中增加ScrollView组件。

    面向对象思考
  • 自学鸿蒙应用开发(16)- ListContainer

    在layout目录下的xml文件中创建ListContainer布局,将其命名为page_listcontainer.xml。

    面向对象思考
  • 自学鸿蒙应用开发(32)- 为UI组件定义接口

    前一篇文章为自定义组件实现了描画功能,但是代码中的描画动作都是硬编码,无法由开发者控制。本文对之前的代码进行重构,以对外提供控制接口。

    面向对象思考
  • 自学鸿蒙应用开发(44)- 秒表应用开发(2)

    在本应用的布局中,我们使用了指针式秒表组件、两个操作按钮和一个表示计时结果的Text组件:

    面向对象思考
  • 自学鸿蒙应用开发(43)- 秒表应用开发(1)

    从本篇文章开始,边学边练开发一个秒表应用,本文是本系列的第一篇:绘制表盘。先看演示视频:

    面向对象思考
  • 自学鸿蒙应用开发(26)- 自定义CommonDialog

    上一篇文章中说过,直接使用鸿蒙系统中的CommonDialog大致是下面的效果:

    面向对象思考
  • 自学鸿蒙应用开发(27)- 自定义ListDialog

    这个效果过于简陋,无法用于实际的产品开发。本文介绍如何定制自己的ListDialog。还是先看演示视频:

    面向对象思考
  • 自学鸿蒙应用开发(33)- 在布局中使用自定义UI组件

    组建容器类ArcProgressBarContainer负责协调每个ArcProgressBar的描画动作。

    面向对象思考
  • 自学鸿蒙应用开发(11)- RadioButton和RadioContainer

    本文介绍在鸿蒙应用中RadioButton和RadioContainer组件的基本用法。

    面向对象思考

扫码关注云+社区

领取腾讯云代金券