知識分享—利用Tab搭建頁面切換框架

作者：木棉花小藍 2022-04-02 20:51:19

在本期的知識分享中，筆者將展示如何利用Tab搭建一個頁面切換的框架，希望能為讀者們帶來幫助與啟發。

??https://ost.51cto.com??

前言

Tab，即多頁簽，是我們在前端開發中常用的一種組件。當前市面上的大多數應用軟件的基礎UI界面，都會利用Tab組件構建一個頁面切換框架，而最經典的就是微信的用戶界面。Tab組件所搭建的頁面切換框架，能夠實現一個非常實用的功能——當用戶左右滑動屏幕或點擊Tab時可以自由切換包含不同業務功能的界面。在本期的知識分享中，筆者將展示如何利用Tab搭建一個頁面切換的框架，希望能為讀者們帶來幫助與啟發。

正文

創建工程

打開DevEco Studio，選擇Empty Ability模板，創建一個新工程(相關選項的勾選如圖);

完成xml布局

在項目的目錄中，打開entry>src>main>resource>base>layout>ability_main_xml，刪除系統自帶的Text組件，在DirectionLayout中加入如下代碼：

    <PageSlider
        ohos:height="0"
        ohos:width="match_parent"
        ohos:id="$+id:Slider"
        ohos:weight="1"
        ohos:background_element="#ffffff"
        />
    <TabList
        ohos:height="80vp"
        ohos:width="match_parent"
        ohos:id="$+id:List"
        ohos:background_element="gray"
        ohos:orientation="horizontal"/>

此處加入了兩個組件——PageSlider與TabList。

加入代碼后的示例圖：

在AbilitySlice中配置PageSlider并承載三個用戶界面

在項目的目錄中，打開entry>src>main>java>com.example.demo>slice>MainAbilitySlice，先在onStart函數的上方加入如下代碼：

public class MainAbilitySlice extends AbilitySlice {
    private PageSlider mPageSlider;    //創建PageSlider類的對象
    private ArrayList<Component>mPageview;    //創建需要PageSlider對象管理的用戶界面列表
    private TabList mTabList;    //創建TabList類的對象
    @Override
    public void onStart(Intent intent) {
      ...
   }

之后，在onStart函數的{ }內中加入如下代碼：

//獲取PageSlider對象
        mPageSlider=(PageSlider) findComponentById(ResourceTable.Id_Slider);
        //創建PageSlider所需要承載界面的列表
        mPageview=new ArrayList<Component>();
        mPageview.add(generateTextComponent("第一個界面"));
        mPageview.add(generateTextComponent("第二個界面"));
        mPageview.add(generateTextComponent("第三個界面"));

        //實例化PageSliderProvider，為PageSlider提供界面
        mPageSlider.setProvider(new PageSliderProvider() {
            @Override
            public int getCount() {
              //界面數量
                return mPageview.size();
            }
            @Override
            public Object createPageInContainer(ComponentContainer componentContainer, int i) {
               //添加用戶界面
                componentContainer.addComponent(mPageview.get(i));
                return mPageview.get(i);
            }
            @Override
            public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
              //添加用戶界面
                componentContainer.removeComponent(mPageview.get(i));
            }
            @Override
            public boolean isPageMatchToObject(Component component, Object o) {
                return component == o;
            }
        });

最后，在onStart函數的下方加入如下代碼：

 @Override
    public void onStart(Intent intent) {
     ...
   }
    private Text generateTextComponent(String content) {
        Text text = new Text(this);
        text.setLayoutConfig(new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT));
        text.setTextAlignment(TextAlignment.CENTER);
        text.setText(content);
        text.setTextSize(80);
        return text;
    }

加入代碼后的示例圖：

在AbilitySlice中為TabList添加Tab

仍然是在MainAbilitySlice中的onStart函數的{ }內加入代碼：

  mTabList =(TabList) findComponentById(ResourceTable.Id_List);  //獲取mTabList對象
        mTabList.setTabLength(getResourceManager().getDeviceCapability().width);  //設置TabList的Tab總寬度
//利用for循環定義Tab對象，并將其加入mTabList中
        for(int i=0;i<3;i++) {
            TabList.Tab tab = mTabList.new Tab(this);
            tab.setText("界面" + (i + 1));
            tab.setMarginsLeftAndRight(10,10);
            tab.setTag(i);
            mTabList.addTab(tab);
        }
//設置監聽器
        mTabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                mPageSlider.setCurrentPage((int) tab.getTag());
            }
            @Override
            public void onUnselected(TabList.Tab tab) {
            }
            @Override
            public void onReselected(TabList.Tab tab) {
            }
        });