花里胡哨系列之-----------------------------点击带动画效果的底部导航，图片文字

最近看GitHub上面有一个开源的库，是一个带动画效果的底部导航，不点击的时候是一个图片，点击就会出现图片加文字的效果。

下面是GitHub地址：

https://github.com/gauravk95/bubble-navigation

 

本人自己写了一个小Demo：源码附上

1.导入依赖：

implementation 'com.gauravk.bubblenavigation:bubblenavigation:1.0.7'

2.首先是Activity部分：

public class MainActivity extends AppCompatActivity {
    public List<Fragment> fragmentList = new ArrayList<>();
    private FragmentA fragmentA;
    private FragmentB fragmentB;
    private FragmentC fragmentC;
    private FragmentD fragmentD;
    private BubbleToggleView itemA;
    private BubbleToggleView itemB;
    private BubbleToggleView itemC;
    private BubbleToggleView itemD;
    private List<BubbleToggleView>viewList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BubbleNavigationLinearView bubbleNavigationLinearView = (BubbleNavigationLinearView) findViewById(R.id.constrainView);
        //初始化BubbleToggleView
        initView();
        //初始化Fragment
        initFragment();

        //指定跳转Framgnet的方法
        showFragment(fragmentList.get(0));
        isActivity(0);
        bubbleNavigationLinearView.setNavigationChangeListener(new BubbleNavigationChangeListener() {
            @Override
            public void onNavigationChanged(View view, int position) {
                switch (position) {
                    case 0:
                        showFragment(fragmentList.get(0));
                        isActivity(position);
                        break;
                    case 1:
                        showFragment(fragmentList.get(1));
                        isActivity(position);
                        break;
                    case 2:
                        showFragment(fragmentList.get(2));
                        isActivity(position);
                        break;
                    case 3:
                        showFragment(fragmentList.get(3));
                        isActivity(position);
                        break;
                }
            }
        });

    }

    //是否选中
    private void isActivity(int position) {
        for(int i = 0 ; i < viewList.size() ; i++){
            if(i == position){
                viewList.get(i).setActivated(true);
            }else{
                viewList.get(i).setActivated(false);
            }
        }
    }

    private void initView() {
        itemA = (BubbleToggleView) findViewById(R.id.item1);
        itemB = (BubbleToggleView) findViewById(R.id.item2);
        itemC = (BubbleToggleView) findViewById(R.id.item3);
        itemD = (BubbleToggleView) findViewById(R.id.item4);
        viewList.add(itemA);
        viewList.add(itemB);
        viewList.add(itemC);
        viewList.add(itemD);
    }


    private void showFragment(Fragment fragment) {
        jumpFragment(fragment);
    }

    private void jumpFragment(Fragment fragment) {
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction action = manager.beginTransaction();
        // 如果不为空，就先隐藏起来
        hideFragment(action);
        if (!fragment.isAdded()) {
            action.add(R.id.re_layout, fragment);
        }
        action.show(fragment);
        action.commit();
    }

    private void hideFragment(FragmentTransaction ft) {
        if (fragmentA != null) {
            ft.hide(fragmentA);
        }
        if (fragmentB != null) {
            ft.hide(fragmentB);
        }

        if (fragmentC != null) {
            ft.hide(fragmentC);
        }

        if (fragmentD != null) {
            ft.hide(fragmentD);
        }

    }

    private void initFragment() {
        if (fragmentA == null) {
            fragmentA = new FragmentA();
        }
        if (fragmentB == null) {
            fragmentB = new FragmentB();
        }
        if (fragmentC == null) {
            fragmentC = new FragmentC();
        }
        if (fragmentD == null) {
            fragmentD = new FragmentD();
        }
        fragmentList.add(fragmentA);
        fragmentList.add(fragmentB);
        fragmentList.add(fragmentC);
        fragmentList.add(fragmentD);
    }
}

3.Activity的xml部分：这个分为两种布局一种是BubbleNavigationConstraintView继承ConstraintView的，我这里是使用BubbleNavigationLinearView看哪个顺手用哪个。

<RelativeLayout 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"
    tools:context="com.mdj.acer.motejiatest.MainActivity">

    <com.gauravk.bubblenavigation.BubbleNavigationLinearView
        android:id="@+id/constrainView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#fff"
        android:elevation="6dp"
        android:orientation="horizontal"
        android:padding="10dp">

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/item1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:bt_active="false"
            app:bt_colorActive="#0ad6ff"
            app:bt_colorInactive="#c0c0c0"
            app:bt_icon="@drawable/weixuanzhong_home"
            app:bt_padding="3dp"
            app:bt_title="首页"
            app:bt_titlePadding="3dp"
            app:bt_titleSize="36px"></com.gauravk.bubblenavigation.BubbleToggleView>

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/item2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:bt_active="false"
            app:bt_colorActive="#0ad6ff"
            app:bt_colorInactive="#c0c0c0"
            app:bt_icon="@drawable/weixuanzhong_gengduo"
            app:bt_padding="3dp"
            app:bt_title="首页"
            app:bt_titlePadding="3dp"
            app:bt_titleSize="36px"></com.gauravk.bubblenavigation.BubbleToggleView>

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/item3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:bt_active="false"
            app:bt_colorActive="#0ad6ff"
            app:bt_colorInactive="#c0c0c0"
            app:bt_icon="@drawable/weixuanzhong_faxian"
            app:bt_padding="3dp"
            app:bt_title="首页"
            app:bt_titlePadding="3dp"
            app:bt_titleSize="36px"></com.gauravk.bubblenavigation.BubbleToggleView>

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/item4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:bt_active="false"
            app:bt_colorActive="#0ad6ff"
            app:bt_colorInactive="#c0c0c0"
            app:bt_icon="@drawable/weixianzhong_wode"
            app:bt_padding="3dp"
            app:bt_title="首页"
            app:bt_titlePadding="3dp"
            app:bt_titleSize="36px"></com.gauravk.bubblenavigation.BubbleToggleView>


    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>

    <RelativeLayout
        android:id="@+id/re_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/constrainView"></RelativeLayout>

</RelativeLayout>

4.Fragment的部分，由于Fragment写的都一样，就贴出一个：

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

5.Fragment的xml部分：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="I am Fragment A"
        android:textSize="36dp"
        android:textColor="#000"
        />

</RelativeLayout>

6.贴出BubbleToggleView一些属性：

bt_active	设置为活动状态
Bt _ ColorActivity	处于活动状态时，将此颜色用于图标和标题
bt_colorInctive	处于非活动状态时，将此颜色用于图标和标题
bt _icon	设置图标可绘制
bt_iconWidth	更新图标宽度
bt _iconHight	更新图标高度
bt_title	设置标题文本
bt_titleSize	更新sp中的倾斜文本大小
bt_shape	设置可绘制的背景。使用transitiondrawinable切换时获得淡入淡出效果
bt _ showShapeAlways	如果为真，并使用正常绘制，背景形状始终可见
bt_shapeColor	更改形状的色调。当使用TransitionDrawable或showShapeAlways时，不适用始终为真。
bt _duration	设置切换动画以毫秒为单位完成的持续时间
bt_padding	设置dp中的内部填充
bt _titlePadding	在dp中设置标题填充
bt_badgeText	设置徽章的文本
bt_badgeTextSize	设置徽章文本的字体大小
bt_badgeTextColor	设置徽章的文本颜色
bt_badgeBackgroundColor	设置徽章的背景颜色