美文网首页
鸿蒙第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