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

最近看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 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 ListviewList = 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看哪个顺手用哪个。

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部分：

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	设置徽章的背景颜色