# NavigationTabBar

**Repository Path**: licq_workspace/NavigationTabBar

## Basic Information

- **Project Name**: NavigationTabBar
- **Description**: Navigation tab bar for openharmony with colorful interactions.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-05-29
- **Last Updated**: 2024-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## NavigationTabBar

## Introduction
NavigationTabBar : Navigation tab bar for openharmony with colorful interactions.

### Features

- Allows you to set NTB models, where you set icon and color. Can be set up only via code.
- Allows you to connect NTB with ViewPager. If you want your can also set OnPageChangeListener.
- Allows you to set background to NTB which automatically set with offset relative to badge gravity and corners radius.
- Allows you to set selected icon when current model is active.
- Allows you to enable title in you model.
- Allows you to enable badge in you model.
- Allows you to handle mode of the model title show. Can show all or only active.
- Allows you to set titles size.
- Allows you to enable badge in you model.
- Allows you to handle set of custom typeface in your badge.
- Allows you to handle mode of the model title show. Can show all or only active.
- Allows you to set titles size.
- Allows you to handle mode of the model icon and title scale.
- Allows you to enable or disable icon tinting.
- Allows you to set badges size.
- Allows you to set the badge position in you model. Can be: left(25%), center(50%) and right(75%).
- Allows you to set the badge gravity in NTB. Can be top or bottom.
- Allows you to set the badge bg and title colors.
- Allows you to set custom typeface to your title.
- Allows you to set corners radius of pointer.
- Allows you to set icon size fraction relative to smaller model side.
- Allows you to set animation duration.
- Allows you to set inactive icon color.
- Allows you to set active icon color.
- Allows you to set listener which triggering on start or on end when you set model index.
- Allows you to set preview colors, which generate count of models equals to count of colors.

## Usage Instructions

```XML

final NavigationTabBar mNavigationTabBar = (NavigationTabBar) rootLayout.findComponentById(ResourceTable.Id_ntb_horizontal);
final ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
            models.add(
                    new NavigationTabBar.Model.Builder(
                            new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_first, "image/png")),
                            Color.getIntColor(colors[0]))
                            .selectedIcon(new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_sixth, "image/png")))
                            .title("Heart")
                            .badgeTitle("NTB")
                            .build()
            );
            models.add(
                    new NavigationTabBar.Model.Builder(
                            new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_second, "image/png")),
                            Color.getIntColor(colors[1]))
                            .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                            .title("Cup")
                            .badgeTitle("with")
                            .build()
            );
            models.add(
                    new NavigationTabBar.Model.Builder(
                            new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_third, "image/png")),
                            Color.getIntColor(colors[2]))
                            .selectedIcon(new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_seventh, "image/png")))
                            .title("Dips")
                            .badgeTitle("state")
                            .build()
            );
            models.add(
                    new NavigationTabBar.Model.Builder(
                            new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_fourth, "image/png")),
                            Color.getIntColor(colors[3]))
                            .selectedIcon(getResources().getDrawable(R.drawable.ic_eighth))
                            .title("Flag")
                            .badgeTitle("icon")
                            .build()
            );
            models.add(
                    new NavigationTabBar.Model.Builder(
                            new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_fifth, "image/png")),
                            Color.getIntColor(colors[4]))
                            .selectedIcon(new PixelMapElement(createByResourceId(this, ResourceTable.Media_ic_eighth, "image/png")))
                            .title("Medal")
                            .badgeTitle("777")
                            .build()
            );

            mNavigationTabBar.setModels(models);
            mNavigationTabBar.setViewPager(viewPager, 2);

            mNavigationTabBar.setTitleMode(NavigationTabBar.TitleMode.ACTIVE);
            mNavigationTabBar.setBadgeGravity(NavigationTabBar.BadgeGravity.BOTTOM);
            mNavigationTabBar.setBadgePosition(NavigationTabBar.BadgePosition.CENTER);
            mNavigationTabBar.setTypeface("fonts/custom_font.ttf");
            mNavigationTabBar.setIsBadged(true);
            mNavigationTabBar.setIsTitled(true);
            mNavigationTabBar.setIsTinted(true);
            mNavigationTabBar.setIsBadgeUseTypeface(true);
            mNavigationTabBar.setBadgeBgColor(Color.RED);
            mNavigationTabBar.setBadgeTitleColor(Color.WHITE);
            mNavigationTabBar.setIsSwiped(true);
            mNavigationTabBar.setBgColor(Color.BLACK);
            mNavigationTabBar.setBadgeSize(10);
            mNavigationTabBar.setTitleSize(10);
            mNavigationTabBar.setIconSizeFraction(0.5);

<devlight.io.library.ntb.NavigationTabBar
   ohos:id="@+id/ntb"
   ohos:layout_width="match_parent"
   ohos:layout_height="50dp"
   ohos:ntb_animation_duration="400"
   ohos:ntb_preview_colors="@array/colors"
   ohos:ntb_corners_radius="10dp"
   ohos:ntb_active_color="#fff"
   ohos:ntb_inactive_color="#000"
   ohos:ntb_badged="true"
   ohos:ntb_titled="true"
   ohos:ntb_scaled="true"
   ohos:ntb_tinted="true"
   ohos:ntb_title_mode="all"
   ohos:ntb_badge_position="right"
   ohos:ntb_badge_gravity="top"
   ohos:ntb_badge_bg_color="#ffff0000"
   ohos:ntb_badge_title_color="#ffffffff"
   ohos:ntb_typeface="fonts/custom_typeface.ttf"
   ohos:ntb_badge_use_typeface="true"
   ohos:ntb_swiped="true"
   ohos:ntb_bg_color="#000"
   ohos:ntb_icon_size_fraction="0.5"
   ohos:ntb_badge_size="10sp"
   ohos:ntb_title_size="10sp"/>
   
```


## Installation Instructions

```

Method 1: Generate har package from library and add it to lib folder.
       add following code to gradle of entry
       implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
Method 2:
    allprojects{
        repositories{
            mavenCentral()
        }
    }
    implementation io.openharmony.tpc.thirdlib:navigationtabbar:1.0.0'
```