容器类组件

---

1 列表组件(ListContainer)

<ListContainer
    ohos:id="$+id:lc"
    ohos:height="match_content"
    ohos:width="match_content"
    />

class ColouredTextProvider extends BaseItemProvider {
    @Override
    public int getCount() {
        ...
    }

    @Override
    public Object getItem(int i) {
        ...
    }

    @Override
    public long getItemId(int i) {
        ...
    }

    @Override
    public Component getComponent(int i, Component component,
        ComponentContainer componentContainer) {
        ...
    }
}

((ListContainer)findComponentById(ResourceTable.Id_lc))
    .setItemProvider(new ColouredTextProvider(...));

例程：ListContainer

...\ListContainer\entry\src\main\resources\base\layout\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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#000000">

    <ListContainer
        ohos:id="$+id:lc"
        ohos:height="match_content"
        ohos:width="match_content"
        />

</DirectionalLayout>

...\ListContainer\entry\src\main\java\com\minwei\listcontainer\slice\MainAbilitySlice.java

class ColouredText {
    private Color color;
    private String text;

    public ColouredText(Color color, String text) {
        this.color = color;
        this.text = text;
    }

    public Color color() {
        return color;
    }

    public String text() {
        return text;
    }
}

class ColouredTextProvider extends BaseItemProvider {
    private List<ColouredText> colouredTexts;

    public ColouredTextProvider(List<ColouredText> colouredTexts) {
        this.colouredTexts = colouredTexts;
    }

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

    @Override
    public Object getItem(int i) {
        return colouredTexts.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public Component getComponent(int i, Component component,
        ComponentContainer componentContainer) {
        Text text = (Text)component;

        if (text == null) {
            text = new Text(componentContainer.getContext());
            text.setWidth(LayoutConfig.MATCH_PARENT);
            text.setHeight(LayoutConfig.MATCH_CONTENT);
            text.setTextAlignment(TextAlignment.HORIZONTAL_CENTER);
            text.setTextSize(70);
        }

        text.setText(colouredTexts.get(i).text());
        text.setTextColor(colouredTexts.get(i).color());

        return text;
    }
}

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        List<ColouredText> colouredTexts = new ArrayList<>();
        colouredTexts.add(new ColouredText(Color.WHITE,   "WHITE"));
        colouredTexts.add(new ColouredText(Color.LTGRAY,  "LTGRAY"));
        colouredTexts.add(new ColouredText(Color.GRAY,    "GRAY"));
        colouredTexts.add(new ColouredText(Color.DKGRAY,  "DKGRAY"));
        colouredTexts.add(new ColouredText(Color.RED,     "RED"));
        colouredTexts.add(new ColouredText(Color.GREEN,   "GREEN"));
        colouredTexts.add(new ColouredText(Color.BLUE,    "BLUE"));
        colouredTexts.add(new ColouredText(Color.YELLOW,  "YELLOW"));
        colouredTexts.add(new ColouredText(Color.CYAN,    "CYAN"));
        colouredTexts.add(new ColouredText(Color.MAGENTA, "MAGENTA"));

        ((ListContainer)findComponentById(ResourceTable.Id_lc))
            .setItemProvider(new ColouredTextProvider(colouredTexts));
    }
    ...
}

运行效果如下图所示：

2 页表组件(TabList)

<TabList
    ohos:id="$+id:tl"
    ohos:height="56vp"
    ohos:width="match_parent"
    ohos:orientation="horizontal"
    ohos:selected_tab_indicator_height="4vp"
    ohos:selected_tab_indicator_color="#ff7f27"
    ohos:text_size="20fp"
    ohos:normal_text_color="#ffffff"
    ohos:selected_text_color="#ff7f27"
    ohos:text_alignment="center"
    />

TabList tabList = (TabList)findComponentById(ResourceTable.Id_tl);
String texts[] = {"第1页", "第2页", "第3页"};
for (String text : texts) {
    Tab tab = tabList.new Tab(this);
    tab.setText(text);
    tabList.addTab(tab);
}
tabList.setFixedMode(true);

tabList.addTabSelectedListener(new TabSelectedListener() {
    @Override
    public void onSelected(Tab tab) {
        // 页头tab被选中
        // 添加该页头对应的页
        ...
    }

    @Override
    public void onUnselected(Tab tab) {
        // 页头tab被撤选
        // 删除该页头对应的页
        ...
    }

    @Override
    public void onReselected(Tab tab) {
        // 页头tab被重选
        ...
    }
});

tabList.selectTabAt(0);

例程：TabList

...\TabList\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:dir"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#00a2e8">

    <TabList
        ohos:id="$+id:tl"
        ohos:height="56vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:selected_tab_indicator_height="4vp"
        ohos:selected_tab_indicator_color="#ff7f27"
        ohos:text_size="20fp"
        ohos:normal_text_color="#ffffff"
        ohos:selected_text_color="#ff7f27"
        ohos:text_alignment="center"
        />

</DirectionalLayout>

...\TabList\entry\src\main\resources\base\graphic\background_text.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <solid ohos:color="#ffffff"/>
    <stroke ohos:width="4vp" ohos:color="#00a2e8"/>
</shape>

...\TabList\entry\src\main\resources\base\layout\page_1.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#ffffff">

    <Text
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="$graphic:background_text"
        ohos:text="壹"
        ohos:text_size="80fp"
        ohos:text_color="#00a2e8"
        ohos:text_alignment="center"
        />

</DirectionalLayout>

...\TabList\entry\src\main\resources\base\layout\page_2.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#ffffff">

    <Text
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="$graphic:background_text"
        ohos:text="貳"
        ohos:text_size="80fp"
        ohos:text_color="#00a2e8"
        ohos:text_alignment="center"
        />

</DirectionalLayout>

...\TabList\entry\src\main\resources\base\layout\page_3.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#ffffff">

    <Text
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="$graphic:background_text"
        ohos:text="叁"
        ohos:text_size="80fp"
        ohos:text_color="#00a2e8"
        ohos:text_alignment="center"
        />

</DirectionalLayout>

...\TabList\entry\src\main\java\com\minwei\tablist\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    private List<Component> pages = new ArrayList<>();
    private DirectionalLayout directionalLayout;
    private TabList tabList;

    @Override
    public void onStart(Intent intent) {
        ...
        LayoutScatter layoutScatter = LayoutScatter.getInstance(this);
        pages.add(layoutScatter.parse(
            ResourceTable.Layout_page_1, null, false));
        pages.add(layoutScatter.parse(
            ResourceTable.Layout_page_2, null, false));
        pages.add(layoutScatter.parse(
            ResourceTable.Layout_page_3, null, false));

        directionalLayout = (DirectionalLayout)findComponentById(
            ResourceTable.Id_dir);

        tabList = (TabList)findComponentById(ResourceTable.Id_tl);
        String texts[] = {"第1页", "第2页", "第3页"};
        for (String text : texts) {
            Tab tab = tabList.new Tab(this);
            tab.setText(text);
            tabList.addTab(tab);
        }
        tabList.setFixedMode(true);

        tabList.addTabSelectedListener(new TabSelectedListener() {
            @Override
            public void onSelected(Tab tab) {
                directionalLayout.addComponent(
                    pages.get(tab.getPosition()));
            }

            @Override
            public void onUnselected(Tab tab) {
                directionalLayout.removeComponent(
                    pages.get(tab.getPosition()));
            }

            @Override
            public void onReselected(Tab tab) {
            }
        });

        tabList.selectTabAt(0);
    }
    ...
}

运行效果如下图所示：

3 滑页组件(PageSlider)

<PageSlider
    ohos:id="$+id:ps"
    ohos:height="match_parent"
    ohos:weight="1"
    ohos:width="match_parent"
    />

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

pageSlider.setProvider(new PageSliderProvider() {
    @Override
    public int getCount() {
        ...
    }

    @Override
    public Object createPageInContainer(
        ComponentContainer componentContainer, int i) {
        ...
    }

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

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

pageSlider.addPageChangedListener(new PageChangedListener() {
    @Override
    public void onPageSliding(int i, float v, int i1) {
        // 第i个单页正在滑动
        // v介于0~1之间，表示该页的滑动位置
        // i1表示该页位置的像素数
        ...
    }

    @Override
    public void onPageSlideStateChanged(int i) {
        ...
    }

    @Override
    public void onPageChosen(int i) {
        // 第i个单页被选择
        ...
    }
});

pageSlider.setCurrentPage(i);

例程：PageSlider

...\PageSlider\entry\src\main\resources\base\layout\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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#00a2e8">

    <PageSlider
        ohos:id="$+id:ps"
        ohos:height="match_parent"
        ohos:weight="1"
        ohos:width="match_parent"
        />

    <RadioContainer
        ohos:id="$+id:rc"
        ohos:height="56vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:alignment="horizontal_center">

        <RadioButton
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:marked="true"
            ohos:text_size="20fp"
            />

        <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>

...\PageSlider\entry\src\main\resources\base\graphic\background_text.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <solid ohos:color="#ffffff"/>
    <stroke ohos:width="4vp" ohos:color="#00a2e8"/>
</shape>

...\PageSlider\entry\src\main\resources\base\layout\page_1.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#ffffff">

    <Text
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="$graphic:background_text"
        ohos:text="壹"
        ohos:text_size="80fp"
        ohos:text_color="#00a2e8"
        ohos:text_alignment="center"
        />

</DirectionalLayout>

...\PageSlider\entry\src\main\resources\base\layout\page_2.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#ffffff">

    <Text
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="$graphic:background_text"
        ohos:text="貳"
        ohos:text_size="80fp"
        ohos:text_color="#00a2e8"
        ohos:text_alignment="center"
        />

</DirectionalLayout>

...\PageSlider\entry\src\main\resources\base\layout\page_3.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#ffffff">

    <Text
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="$graphic:background_text"
        ohos:text="叁"
        ohos:text_size="80fp"
        ohos:text_color="#00a2e8"
        ohos:text_alignment="center"
        />

</DirectionalLayout>

...\PageSlider\entry\src\main\java\com\minwei\pageslider\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    private List<Component> pages = new ArrayList<>();
    private PageSlider pageSlider;
    private RadioContainer radioContainer;

    @Override
    public void onStart(Intent intent) {
        ...
        LayoutScatter layoutScatter = LayoutScatter.getInstance(this);
        pages.add(layoutScatter.parse(
            ResourceTable.Layout_page_1, null, false));
        pages.add(layoutScatter.parse(
            ResourceTable.Layout_page_2, null, false));
        pages.add(layoutScatter.parse(
            ResourceTable.Layout_page_3, null, false));

        pageSlider = (PageSlider)findComponentById(ResourceTable.Id_ps);
        radioContainer = (RadioContainer)findComponentById(
            ResourceTable.Id_rc);

        pageSlider.setProvider(new PageSliderProvider() {
            @Override
            public int getCount() {
                return pages.size();
            }

            @Override
            public Object createPageInContainer(
                ComponentContainer componentContainer, int i) {
                componentContainer.addComponent(pages.get(i));
                return pages.get(i);
            }

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

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

        pageSlider.addPageChangedListener(new PageChangedListener() {
            @Override
            public void onPageSliding(int i, float v, int i1) {
            }

            @Override
            public void onPageSlideStateChanged(int i) {
            }

            @Override
            public void onPageChosen(int i) {
                ((RadioButton)radioContainer.getComponentAt(i))
                    .setChecked(true);
            }
        });

        radioContainer.setMarkChangedListener(
            (radioContainer, i) -> pageSlider.setCurrentPage(i));
    }
    ...
}

运行效果如下图所示：

更多精彩，敬请期待……

---