先來頁面效果

匯入依賴

implementation 'devlight.io:navigationtabbar:1.2.5'

先建立三個Fragment ,貼出其中一個Fragment 的程式碼 

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#AAdd"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></android.support.constraint.ConstraintLayout>

HomeFragment.java 

public class HomeFragment extends Fragment {    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);        return view;
    }    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);

    }
}

新建一個Activity TabActivity

xml檔案程式碼

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TabAcitvity">

    <FrameLayout
        android:id="@+id/act_all_fragment_fl"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
    </FrameLayout>
    <!--分割線-->
    <LinearLayout
        android:layout_width="match_parent"
        android:background="#dddddd"
        android:layout_height="1dp">
    </LinearLayout>
    <devlight.io.library.ntb.NavigationTabBar
        android:id="@+id/ntb_horizontal"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:ntb_bg_color="#fff"
        app:ntb_icon_size_fraction="0.5"
        app:ntb_active_color="#25dbe7"
        app:ntb_inactive_color="#8e8e8e"
        app:ntb_animation_duration="0"
        app:ntb_badged="false"
        app:ntb_scaled="true"
        app:ntb_tinted="true"
        app:ntb_title_mode="all"
        app:ntb_badge_bg_color="#fff"
        app:ntb_titled="true"
        app:ntb_swiped="false"/></LinearLayout>

java程式碼 

public class TabAcitvity extends AppCompatActivity {    private HomeFragment homeFragment;    private MeFragment meFragment;    private settingFragment settingFragment;//    private ViewPager viewPager;
    private NavigationTabBar navigationTabBar;    @Override
    protected void onCreate(final Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_acitvity);
        initUI();
    }    private void initUI() {//        viewPager = findViewById(R.id.vp_horizontal_ntb);

        //例項化fragment
        homeFragment = new HomeFragment();
        meFragment = new MeFragment();
        settingFragment = new settingFragment();
        getSupportFragmentManager().beginTransaction().add(R.id.act_all_fragment_fl, homeFragment)
                .add(R.id.act_all_fragment_fl, meFragment)
                .add(R.id.act_all_fragment_fl,settingFragment).commitAllowingStateLoss();
        getSupportFragmentManager().beginTransaction().show(homeFragment)
                .hide(meFragment)
                .hide(settingFragment).commitAllowingStateLoss();


        navigationTabBar = findViewById(R.id.ntb_horizontal);        //設定底部Tab 圖示的標題
        String[] titles = new String[]{"主頁", "工具", "我的"};
        ArrayList<View> views = new ArrayList<>();        //設定每個View的不同背景
        int[] viewBgs = new int[]{Color.RED, Color.GRAY, Color.BLUE};        //設定底部Tab的各個圖示
        int[] icons = new int[]{R.drawable.icon_home, R.drawable.icon_setting, R.drawable.icon_me};        //用來生成各個不同選項的
        ArrayList<NavigationTabBar.Model> models = new ArrayList<>();        for (int i = 0; i < titles.length; i++) {
            models.add(                    new NavigationTabBar.Model.Builder(
                            getResources().getDrawable(icons[i]),
                            Color.parseColor("#00000000"))//                        .selectedIcon(getResources().getDrawable(R.drawable.ic_sixth))
                            .title(titles[i])//                            .badgeTitle("NTB")    //角標
                            .build()
            );
            View view = new View(this);//            view.setBackgroundColor(viewBgs[i]);//            views.add(view);
        }//        viewPager.setAdapter(new TabAdapter(this, views));

        navigationTabBar.setModels(models);
        navigationTabBar.setModelIndex(0);
        navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {            @Override
            public void onStartTabSelected(NavigationTabBar.Model model, int index) {                switch (index) {                    case 0:
                        getSupportFragmentManager().beginTransaction().show(homeFragment)
                                .hide(meFragment)
                                .hide(settingFragment).commitAllowingStateLoss();                        break;                    case 1:
                        getSupportFragmentManager().beginTransaction().show(settingFragment)
                                .hide(meFragment)
                                .hide(homeFragment).commitAllowingStateLoss();                        break;                    case 2:
                        getSupportFragmentManager().beginTransaction().show(meFragment)
                                .hide(homeFragment)
                                .hide(settingFragment).commitAllowingStateLoss();                        break;
                }

            }            @Override
            public void onEndTabSelected(NavigationTabBar.Model model, int index) {

            }
        });

    }

}