HarmoneyOS2.0 ButtomNavigation+PageSlider实现底部导航

第一步看效果是不是需要的：

第二部：添加依赖

在entry目录下的gradle文件中添加如下了依赖

//底部导航栏
implementation "io.openharmony.tpc.thirdlib:BottomNavigationViewEx:1.0.1"

第三部：新建blility_index.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
        ohos:id="$+id:bnve"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"/>


    <PageSlider
        ohos:id="$+id:vp"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:above="$id:bnve"/>

</DependentLayout>

第三部承载容器：IndexAbilitySlice

public class IndexAbilitySlice extends AbilitySlice {

    private BottomNavigationViewEx bottomNavigationViewEx;
    private PageSlider pageSlider;

    private VpAdapter adapter;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_index);

        bottomNavigationViewEx = (BottomNavigationViewEx) findComponentById(ResourceTable.Id_bnve);
        pageSlider = (PageSlider) findComponentById(ResourceTable.Id_vp);

        adapter = new VpAdapter(getData(),IndexAbilitySlice.this);

        pageSlider.setProvider(adapter);
        bottomNavigationViewEx.addItem(new BottomNavigationItem(ResourceTable.Media_ic_location_on_white_24dp, "音乐", getContext()))
                .addItem(new BottomNavigationItem(ResourceTable.Media_ic_find_replace_white_24dp, "云端", getContext()))
                .addItem(new BottomNavigationItem(ResourceTable.Media_ic_favorite_white_24dp, "朋友圈", getContext()))
                .setCurrentItem(0)
                .setShowAllText(false)
                .setBackgroundColor(Color.BLUE.getValue())
                .initialise();

        bottomNavigationViewEx.setTabSelectedListener(new BottomNavigationViewEx.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int i) {
                switch (i) {
                    case 0:
                        pageSlider.setCurrentPage(0);
                        break;

                    case 1:
                        pageSlider.setCurrentPage(1);
                        break;

                    case 2:
                        pageSlider.setCurrentPage(2);
                        break;

                    default:
                        break;
                }
            }

            @Override
            public void onTabUnselected(int i) {

            }

            @Override
            public void onTabReselected(int i) {

            }
        });

        bottomNavigationViewEx.setupWithViewPager(pageSlider);
    }

    private ArrayList<DataItem> getData() {
        ArrayList<DataItem> dataItems = new ArrayList<>();
        dataItems.add(new DataItem("音乐"));
        dataItems.add(new DataItem("云端"));
        dataItems.add(new DataItem("朋友圈"));

        return dataItems;
    }


    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

最外层的Ability也贴一下代码好了： IndexAbility

public class IndexAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(IndexAbilitySlice.class.getName());
    }
}

第四步新建适配器：VpAdapter

public class VpAdapter extends PageSliderProvider {
    private List<DataItem> list;
    private AbilitySlice context;

    public VpAdapter(List<DataItem> list, AbilitySlice context) {
        this.list = list;
        this.context = context;
    }

    @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(context).parse(ResourceTable.Layout_item_vp_per,null,true);

        Text label = (Text) cpt.findComponentById(ResourceTable.Id_tv);
        label.setTextAlignment(TextAlignment.CENTER);
        label.setText(data.getmText());
        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;
    }

    // 数据实体类

}

提供一下几个资源文件

1.item_vp_per.xml

<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:tv"
        ohos:height="match_content"
        ohos:width="match_content"/>

</DependentLayout>

模拟的数据实体DataItem

public class DataItem {
    String mText;

    public DataItem(String txt) {
        mText = txt;
    }

    public String getmText() {
        return mText;
    }

    public void setmText(String mText) {
        this.mText = mText;
    }
}

顺便提一下如何将一个Ability设置为默认启动 config.json中