Android 底部导航栏 开源JPTabBar

先上图：

下面说下怎么使用：

1.引入Gradle依赖

 //底部菜单栏
    compile 'com.jpeng:JPTabBar:1.1.2'

2.在你的主页面XML,在适当位置添加下面代码

 <com.jpeng.jptabbar.JPTabBar
        android:id="@+id/main_jp_tabbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/backgroundColor"
        app:TabAnimate="Scale"
        app:TabNormalColor="@color/secondary_text"
        app:TabSelectColor="@color/thrid_text"
        app:TabTextSize="12sp" />

3.在你的Activity里面声明注解变量。(seleIcons和BadgeModes可以不声明,还有你要确保你全部数组的长度是一样的)  此处使用的是影射关系

    @Titles
    public static final int[] titles = {R.string.diary, R.string.find, R.string.mine};
    @SeleIcons
    public static final int[] selIcons = {R.drawable.ic_diary_sel, R.drawable.ic_find_sel, R.drawable.ic_setting_sel};
    @NorIcons
    public static final int[] icons = {R.drawable.ic_diary, R.drawable.ic_find, R.drawable.ic_setting};

经过上面的设置后,基本上就可以把一个底部的UI搭建了!
但还有一步,想达到Wechat那种渐变和自动切换ViewPager就使用这个方法。

经过上面的设置后,基本上就可以把一个底部的UI搭建了!
但还有一步,想达到Wechat那种渐变和自动切换ViewPager就使用这个方法。

  //调用TabBar的setContainer方法,传入 ? extends ViewPager
  mTabBar.setContainer(mViewpager);

下面展示一下详细的使用：

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">

    <FrameLayout
        android:id="@+id/main_fl_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@color/divider" />

    <com.jpeng.jptabbar.JPTabBar
        android:id="@+id/main_jp_tabbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/backgroundColor"
        app:TabAnimate="Scale"
        app:TabNormalColor="@color/secondary_text"
        app:TabSelectColor="@color/thrid_text"
        app:TabTextSize="12sp" />
</LinearLayout>

Activity:

package youli.com.example.administrator.doctor_demo.Activity;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;

import com.jpeng.jptabbar.JPTabBar;
import com.jpeng.jptabbar.OnTabSelectListener;
import com.jpeng.jptabbar.anno.NorIcons;
import com.jpeng.jptabbar.anno.SeleIcons;
import com.jpeng.jptabbar.anno.Titles;

import youli.com.example.administrator.doctor_demo.Fragment.Fragment_SY;
import youli.com.example.administrator.doctor_demo.Fragment.Fragment_WD;
import youli.com.example.administrator.doctor_demo.Fragment.Fragment_GT;
import youli.com.example.administrator.doctor_demo.R;

public class Homepage extends BaseActivity implements OnTabSelectListener {

    private FrameLayout mainFlContainer;
    private JPTabBar mainJpTabbar;


    private Fragment[] fragments;


    private int lastIndex = -1;


    @Titles
    public static final int[] titles = {R.string.diary, R.string.find, R.string.mine};
    @SeleIcons
    public static final int[] selIcons = {R.drawable.ic_diary_sel, R.drawable.ic_find_sel, R.drawable.ic_setting_sel};
    @NorIcons
    public static final int[] icons = {R.drawable.ic_diary, R.drawable.ic_find, R.drawable.ic_setting};



    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_homepage);

        setSwipeBackEnable(false); //主 activity 可以调用该方法，禁止滑动删除
//        getSwipeBackLayout().setEnableGesture(false);//禁止右滑退出
        initView();

    }

    private void initView(){

        mainFlContainer = (FrameLayout) findViewById(R.id.main_fl_container);
        mainJpTabbar = (JPTabBar) findViewById(R.id.main_jp_tabbar);

        mainJpTabbar.setTabListener(this);

        fragments = new Fragment[3];

        showFragment(0);


    }



    /**
     * 用于显示Fragment的方法
     *
     * @param
     */
    private void showFragment(int currentIndex) {

        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        if(currentIndex==lastIndex)
            return;

        if (lastIndex != -1) {
            ft.hide(fragments[lastIndex]);
        }

        if (fragments[currentIndex] == null) {
            switch (currentIndex){

                case 0:
                    fragments[currentIndex] = Fragment_SY.newInstance();
                    break;

                case 1:
                    fragments[currentIndex] = Fragment_GT.newInstance();
                    break;

                case 2:
                    fragments[currentIndex] = Fragment_WD.newInstance();
                    break;

            }

            //添加fragment 并显示
            ft.add(R.id.main_fl_container, fragments[currentIndex]);

        }else {
            //不等于空直接显示
            ft.show(fragments[currentIndex]);
        }

        ft.commit();
        lastIndex = currentIndex;

    }


    @Override
    public void onTabSelect(int index) {
        showFragment(index);
    }

    @Override
    public void onClickMiddle(View middleBtn) {

    }
}

Fragment:

package youli.com.example.administrator.doctor_demo.Fragment;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import youli.com.example.administrator.doctor_demo.R;


public class Fragment_SY extends Fragment {

    private static Fragment_SY fragment_sy = null;

    public static Fragment_SY newInstance() {
        if (fragment_sy == null)
            fragment_sy = new Fragment_SY();
        return fragment_sy;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_fragment__sy, container, false);
    }





}

好了 到此结束 ，代码很少  很简单就搭建了一个底部菜单栏

扫描二维码关注公众号，回复： 11146110 查看本文章