Android 基于自定义View实现的超好看底部导航栏

Android应用开发中，底部导航栏是常见需求之一，谷歌官方提供的AndroidX也包含了这一套件。但千篇一律使用下来未免觉几分单调。
带着这个需求，我从View出发，实现了一个好看且易于使用的底部导航栏。

  既然说好看，那么总不能光说不给看。先放张效果图。

慢速动画：

  GIF图片有所失真，不过基本效果还是看得到。那么这样一个底部导航栏要如何使用呢？
  很简单！

---

开始使用

导入

1. 在应用级别的build.gradle添加jitpack仓库

maven { url "https://jitpack.io" }

2. 在模块级别的build.gradle引入依赖

implementation 'com.gitee.funnysaltyfish:FunnyBottomNavigation:v1.1.0'

（最新版本请前往对于github/gitee页面查看)

3. 同步

XML使用

最简单的使用如下：

<com.funny.bottomnavigation.FunnyBottomNavigation
            android:id="@+id/funny_buttom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

Java代码配置

int[] ids = new int[]{//底部图标资源id
       R.drawable.ic_favorites,
       R.drawable.ic_bin,
       R.drawable.ic_run,
       R.drawable.ic_favorites
};
funnyButtomNavigation.initIconButtons(ids);
funnyButtomNavigation.setOnItemClickListener(position -> {
	   //设置点击事件，回调的参数即为当前点击的底部按钮位置
       Log.i("TAG","number "+position+" is clicked");
});

从v1.1.0版本开始，此库完整支持kotlin使用，具体参见对应代码仓库

仅需上述设置，就可以愉悦的运行了！很简单不是吗？

---

自定义配置

  除了上述简单的使用外，此库还支持额外的配置，以帮助您实现更为复杂和自定义的效果。

外观

  支持配置的属性如下：

		<!--        按钮被点击时渲染的颜色-->
        <attr name="highlightColor" format="color|reference" />
        <!--        按钮图片的宽度-->
        <attr name="imageWidth" format="dimension" />
        <!--        按钮图片的高度-->
        <attr name="imageHeight" format="dimension" />
        <!--        默认的起始页，值应当介于[0,页数-1]    -->
        <attr name="startPage" format="integer" />
        <!--        导航栏的背景颜色-->
        <attr name="backgroundColor" format="color|reference" />
        <!--        转移动画的持续时长-->
        <attr name="animationDuration" format="integer" />

  使用的例子如下：

<com.funny.bottomnavigation.FunnyBottomNavigation
            android:id="@+id/funny_buttom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:animationDuration="500"
            app:backgroundColor="#FFFFFF"
            app:imageWidth="24dp"
            app:imageHeight="24dp"
            app:highlightColor="@color/design_default_color_primary"
            app:startPage="1"
            >

上述属性同时有对应set和get方法。

回调

  本View目前可以设置两种监听，它们均位于FunnyBottomNavigation类下。

	/*
     当点击到底部按钮时会回调此接口
     参数 position 为当前点击的按钮位置，取值为[0,总数-1]
     注意，当动画仍在进行时点击无效，此时不会触发此回调
    */
    public interface OnItemClickListener{
        void onClick(int position);
    }

	//当动画进行时会回调此接口
    //参数 progress 值为[0,100]整数，代表当前动画进行的百分比
    public interface OnAnimationUpdateListener{
        void onUpdate(int progress);
    }

请注意，点击事件会在抬起手指后立刻回调！

---

更多

  本库的动画效果参考自这个视频
  如果在使用过程中遇到问题，或对本库有任何功能性建议的，欢迎在Github或Gitee上提出对应issue。您的支持就是我们持续进步的最大动力。

地址

  如需查看Sample和源代码，请访问：

• Github(由于最近Github访问不太稳定，上面的更新可能缓于Gitee)
• Gitee