NavigationTabBar 自定义底部导航栏

先来页面效果

导入依赖

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) {

            }
        });

    }

}