BottomTabBar实现底部导航页

1.导依赖：

compile 'com.hjm:BottomTabBar:1.0.0'

2.在XML中定义一下该控件：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="liuhao.baway.com.liuhao_weekone_demo.MainActivity">        <com.hjm.bottomtabbar.BottomTabBar        android:id="@+id/bottomtabbar"        android:layout_width="match_parent"        android:layout_height="match_parent"></com.hjm.bottomtabbar.BottomTabBar>    </RelativeLayout>

3.定义每个Fragment：

public class OneFragment extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment1, container, false);        return view;    }}

4.MainActivity实现的代码：

public class MainActivity extends AppCompatActivity {private BottomTabBar mb;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);      mb=(BottomTabBar)findViewById(R.id.bottom_tab_bar);        mb.init(getSupportFragmentManager())                .setImgSize(50,50)                .setFontSize(8)                .setTabPadding(4,6,10)                .setChangeColor(Color.RED,Color.DKGRAY)                .addTabItem("月光茶人",R.drawable.tab_home, OneFragment.class)                .addTabItem("优惠",R.drawable.tab_topic, TwoFragment.class)                .addTabItem("购物车",R.drawable.main_index_cart_normal, ThreeFragment.class)                .addTabItem("我的",R.drawable.main_index_my_normal, FourFragment.class)                .isShowDivider(false)                .setOnTabChangeListener(new BottomTabBar.OnTabChangeListener() {                    @Override                    public void onTabChange(int position, String name) {                    }                });    }}

BottomTabBar的几种属性：

tab_bar_backgroundBottomTabBar的整体背景颜色tab_img_width图片宽度tab_img_height图片高度tab_font_size文字尺寸tab_padding_top上边距tab_img_font_padding图片文字间隔tab_padding_bottom下边距tab_isshow_divider是否显示分割线tab_divider_height分割线高度tab_divider_background分割线背景tab_selected_color选中的颜色tab_unselected_color未选中的颜色显示的效果：