今天寫一個簡單的自定義的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>
 

 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最後一次點選的位置
  }
 

然後給不同的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