BottomTab - xiaobailong24/JitPack GitHub Wiki

Usage

MainLayout (XML)

<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=".MainActivity">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tab"/>

    <me.xiaobailong24.library.View.BottomTab
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:elevation="8dp"/>

</RelativeLayout>

FragmentLayout

fragment_camera.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txt_camera"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="9dp"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:text="Camera"
            android:textSize="16sp"/>
    </FrameLayout>

</LinearLayout>

fragment_compass.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txt_compass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="9dp"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:text="Compass"
            android:textSize="16sp"/>
    </FrameLayout>

</LinearLayout>

fragment_search.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txt_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="9dp"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:text="Search"
            android:textSize="16sp"/>
    </FrameLayout>

</LinearLayout>

fragment_help.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txt_help"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="9dp"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:text="Search"
            android:textSize="16sp"/>
    </FrameLayout>

</LinearLayout>

Fragment (Java)

BaseFragment


public abstract class BaseFragment extends Fragment {
    private static final String TAG = BaseFragment.class.getName();

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

        View view = createView(inflater,container,savedInstanceState);
        ButterKnife.bind(this, view);

        initToolBar();
        init();
        return view;
    }

    public void  initToolBar(){

    }

    public abstract View createView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState);

    public abstract void init();
}

CameraFragment


public class CameraFragment extends BaseFragment{
    private static final String TAG = CameraFragment.class.getName();

    @Override
    public View createView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_camera,container,false);
    }

    @Override
    public void init() {

    }
}

CompassFragment


public class CompassFragment extends BaseFragment {
    private static final String TAG = CompassFragment.class.getName();

    @Override
    public View createView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_compass,container,false);
    }

    @Override
    public void init() {

    }
}

SearchFragment


public class SearchFragment extends BaseFragment {
    private static final String TAG = SearchFragment.class.getName();

    @Override
    public View createView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_search,container,false);
    }

    @Override
    public void init() {

    }
}

HelpFragment


public class HelpFragment extends BaseFragment {
    private static final String TAG = HelpFragment.class.getName();

    @Override
    public View createView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_help,container,false);
    }

    @Override
    public void init() {

    }
}

MainActivity

public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();

    int[] testColors = {0xFF00796B, 0xFF5B4947, 0xFF607D8B, 0xFFF57C00, 0xFFF57C00};

    @BindView(R.id.tab)
    BottomTab mBottomTab;
    Controller controller;
    List<BaseFragment> mFragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Logger.e(TAG, "onCreate: ");

        ButterKnife.bind(this);

        initFragment();
        initBottomTab();

    }

    private void initBottomTab() {
        mBottomTab = (BottomTab) findViewById(R.id.tab);
        controller = mBottomTab.builder()
                .addTabItem(android.R.drawable.ic_menu_camera, "Camera", testColors[0])
                .addTabItem(android.R.drawable.ic_menu_compass, "Compass", testColors[1])
                .addTabItem(android.R.drawable.ic_menu_search, "Search", testColors[2])
                .addTabItem(android.R.drawable.ic_menu_help, "Help", testColors[3])
                .setMode(TabLayoutMode.HIDE_TEXT | TabLayoutMode.CHANGE_BACKGROUND_COLOR)
                .build();
        controller.addTabItemClickListener(listener);

    }

    private void initFragment() {
        mFragments = new ArrayList<>();

        mFragments.add(new CameraFragment());
        mFragments.add(new CompassFragment());
        mFragments.add(new SearchFragment());
        mFragments.add(new HelpFragment());

        FragmentTransaction transaction =
                getSupportFragmentManager().beginTransaction();
        transaction.add(R.id.frame_layout, mFragments.get(0));
        transaction.commit();

    }


    OnTabItemSelectListener listener = new OnTabItemSelectListener() {
        @Override
        public void onSelected(int index, Object tag) {
            Logger.d(TAG, "onSelected: " + index + "    TAG:    " + tag.toString());

            FragmentTransaction transaction =
                    getSupportFragmentManager().beginTransaction();
            transaction.replace(R.id.frame_layout, mFragments.get(index));
            transaction.commit();
        }

        @Override
        public void onRepeatClick(int index, Object tag) {
            Logger.d(TAG, "onRepeatClick: " + index + "    TAG:    " + tag.toString());

        }
    };

}

导航栏构建属性

调用BottomTab的builder()方法之后就进入导航栏的构建了。

可控制的属性如下：

setMessageBackgroundColor

设置圆形消息图案的背景颜色

setMessageNumberColor

设置圆形消息图案的数字颜色

setDefaultColor

设置所有导航按钮的默认（未选中）颜色

setMode

设置导航栏显示模式，目前有两个可选TabLayoutMode.HIDE_TEXT:隐藏未选中按钮的文字；TabLayoutMode.CHANGE_BACKGROUND_COLOR:点击按钮之后背景变色。如果两个效果都想使用就这样写

setMode(TabLayoutMode.HIDE_TEXT | TabLayoutMode.CHANGE_BACKGROUND_COLOR)

addTabItem

添加一个导航按钮，有很多重载的addTabItem方法,主要是为了方便创建导航按钮。

它有1~4个参数不等，可以传入按钮的未选中图标、选中后的图标、文字、选中后的颜色

还有一个特殊的需要一个TabItemBuilder类实例，这个类也是用于创建导航按钮的，可以像下面一样创建

TabItemBuilder tabItemBuilder = new TabItemBuilder(this).create()
                .setDefaultColor(0xFFACACAC)
                .setSelectedColor(0xFF00796B)
                .setDefaultIcon(android.R.drawable.ic_menu_help)
                .setText("标题")
                .setTag("这是一个TAG")
                .build();

build

最后不要忘记调用build完成构建，它会返回一个Controller实例，用于后续的控制操作。

控制导航栏

完成导航栏构建获得Controller实例后就可以进行对导航栏的后续控制

addTabItemClickListener

最常用的方法，添加导航栏选中监听，回掉的监听分解成了2个，一个是选中，另一个在已经选中的状态下重复选中。

setMessageNumber

设置某个导航按钮的消息数字，需要传入2个参数，一个索引（顺数数字、Tag）和消息数字。

setDisplayOval

设置是否显示一个无数字的消息小红点，true显示

setSelect

手动设置选中项

getSelected

获得当前的选中项的索引数字

getSelectedTag

获取当前选中项的TAG

setBackgroundColor、setBackground、setBackgroundResource

都是设置导航栏背景的