简单的自定义BottomBar-仿微信底部导航栏

今天写一个简单的自定义的BottomBar。

图片文字都是比较随意的，具体实现中自己可以修改。下面是实现图：

首先我们现在布局中把想要显示的整个界面的基本布局搭建成功。（其实主要在于设置你的Tab。 如果项目中用到Bootmbar的地方比较多 或者是你想复用性高一点的话 其实底部的Tab 的view 完全可以自定义。好处就是可以灵活实现tab的增减，复用行比较好）。

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/ly1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/img1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/tv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ly2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/img2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ly3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/img3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/tv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ly4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/img4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/tv4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

在设置好布局之后，需要在Fragment中设置我们需要切换的Fragment：

 private void initFragment() {
    Fragment1 fragment1 = new Fragment1();
    Fragment2 fragment2 = new Fragment2();
    Fragment3 fragment3 = new Fragment3();
    Fragment4 fragment4 = new Fragment4();
    
    fragmentList.add(fragment1);
    fragmentList.add(fragment2);
    fragmentList.add(fragment3);
    fragmentList.add(fragment4);
    
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    transaction.add(R.id.my_content, fragment1).commit();
    index = 0; //tab最后一次点击的位置
  }

因为是Demo，故用的Fragment 的name 不够专业，Fragment1-Fragment4中可以实现自己的具体逻辑，这里这是让他显示背景和文字 故不再贴出代码。

然后给不同的tab设置点击事件，点击事件中可以实现Fragment的切换和Tab样式的变化（比如过文字颜色和图片的改变的等）。

Fragment切换的具体代码：

 private void switchFragment(int position) {
    if (position == index) {
      return;
    }
    
    if(null == fragmentList || 0 == fragmentList.size()) {
      return;
    }
    
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    transaction.hide(fragmentList.get(index));
    if (!fragmentList.get(position).isAdded()) {
      transaction.add(R.id.my_content, fragmentList.get(position)).show(fragmentList.get(position));
    }
    else {
      transaction.show(fragmentList.get(position));
    }
    transaction.commit();
    index = position;
  }

然后简单的BottomBar就实现了。因为是简易的Demo 故很多地方都没进行封装。我们完全可以把Fragment的切换 ，Fragment List的定义和tab的样式、数目的方法实现封装，子类继承Base类之后，实现Fragment List方法和Tab样式方法即可。时间原因，不再进行封装。

上面是我的微信公共号 每天都会给大家分享最新的知识点，欢迎大家的加入

最近一段时间对代码进行了封装  点击下载Demo