美文网首页
鸿蒙第7课滑动组件、tab组件、滑动页面和文字双向绑定(1)

鸿蒙第7课滑动组件、tab组件、滑动页面和文字双向绑定(1)

作者: 游私塾白书生 | 来源:发表于2022-05-25 17:01 被阅读0次

1.滑动组件Scrollview按钮之间的相互链接

2.tab组件Tab和页面联动的写法

代码

// 通过id获取到tab标签栏

        TabList tabList=(TabList) findComponentById(ResourceTable.Id_tablist);

//        获取tab组件栏 并添加一个组件

        TabList.Tab tab=tabList.new Tab(getContext());

//        设置tab的内容

        tab.setText("推荐");

        //        获取tab组件栏 并添加一个组件

        TabList.Tab tab1=tabList.new Tab(getContext());

//        设置tab的内容

        tab1.setText("关注");

        //        获取tab组件栏 并添加一个组件

        TabList.Tab tab2=tabList.new Tab(getContext());

//        设置tab的内容

        tab2.setText("要文");

        //        获取tab组件栏 并添加一个组件

        TabList.Tab tab3=tabList.new Tab(getContext());

//        设置tab的内容

        tab3.setText("视频");

//        把组件添加上去

        tabList.addTab(tab);

        tabList.addTab(tab1);

        tabList.addTab(tab2);

        tabList.addTab(tab3);

//  _____________________________________________________

        //        动态新增tab组件栏 并添加一个组件

        TabList.Tab tab4=tabList.new Tab(getContext());

//        设置tab的内容

        tab4.setText("排榜");

        tabList.addTab(tab4,2);

    //    ——————————————————————————————————————————————————————

      //  找到文本id

        Text text=(Text) findComponentById(ResourceTable.Id_tx1);

//        重写文本id

        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {

//            选中

            @Override

            public void onSelected(TabList.Tab tab) {

text.setText(tab.getText());  //选中后显示的文本信息

            }

//            从选中到未触发的方法

            @Override

            public void onUnselected(TabList.Tab tab) {

}

//        当前tab已经被选中,但再次被点击的时候触发

            @Override

            public void onReselected(TabList.Tab tab) {

text.setText(tab.getText()+"看过来,看过来!!");  //点击两次后显示的文本信息

            }

});

3.滑动页面PageSlide实现文字双向绑定

1.主界面写法

2.主界面的代码导入

//---------标签页代码

        //获取tablist组件id

        TabList tabList=(TabList) findComponentById(ResourceTable.Id_tab_list);

        //定义tablist数据

        String[] tabTags={"健康","运动","发现","我的"};

//        创建一个子标签

//        遍历数组

        for (int i=0;i

//        数组在本页面找

            TabList.Tab tab=tabList.new Tab(this);

//        数组的第i个标签

            tab.setText(tabTags[i]);

//        添加到标签栏

            tabList.addTab(tab);

        }

3.新建立要设定的页面

4.建立适配器。也就是封装类

代码

//页面工具类

public class PageProviderextends PageSliderProvider {

//  需要显示的数据

    private List list;

//    页面对象

private AbilitySliceslice;

//有参对象  给数据和页面对象赋值

    public PageProvider(List list, AbilitySlice slice) {

this.list = list;

        this.slice = slice;

    }

//  获取页面视图对象的个数

    @Override

    public int getCount() {

return list.size();

    }

//  在指定的位置创建页面视图

    @Override

    public ObjectcreatePageInContainer(ComponentContainer componentContainer, int i) {

//      获取每个数据

        Integer id=list.get(i);

//  获取容器对象  数据展示的位置

        Component component= LayoutScatter.getInstance(slice).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;

    }

}

5.滑动页面显示内容

// 主页面和其他页面滑动的代码------------

//        获取页面滑动组件id

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

//            引出滑动组件的方法

        List list=new ArrayList<>();

        list.add(ResourceTable.Layout_health);

        list.add(ResourceTable.Layout_sports);

        list.add(ResourceTable.Layout_find);

        list.add(ResourceTable.Layout_my);

//        把页面加载到适配器里里面

        PageProvider pageProvider=new PageProvider(list,this);

//        适配器和pagerlider滑动组件关联

    pageSlider.setProvider(pageProvider);

    }

6.双向联动效果展示(滑动页面和底部tab同步)

// 双向联动效果展示

        pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {

@Override

//            打开页面

            public void onPageSliding(int i, float v, int i1) {

}

@Override

            public void onPageSlideStateChanged(int i) {

}

@Override

            public void onPageChosen(int i) {

//                i当前的索引  角标

                if (tabList.getSelectedTabIndex()!=i){

tabList.selectTabAt(i);

                }

}

});

相关文章

网友评论

      本文标题:鸿蒙第7课滑动组件、tab组件、滑动页面和文字双向绑定(1)

      本文链接:https://www.haomeiwen.com/subject/gmbxprtx.html