Android自定義View之導航欄(Fragment實現)

安卓輕量級底部導航欄

目前安卓開發中常常會用到底部導航欄這個控件，但是自己從零開始做一個又太麻煩。因此，我封裝了一個底部導航欄，同時，也做了一些修改，用於頂部也十分合適。下面是示例圖：

使用方法：

1.添加依賴

首先，在build.gradle文件下加入 maven {url ‘https://jitpack.io’}

allprojects {
	repositories {
		google()
		jcenter()
		maven {url "https://jitpack.io"}
	}
}

然後在dependencies下加入依賴

implementation 'com.github.EHENJOOM:BottomBar:1.0.0'

2.在佈局文件中添加frameLayout和導航欄

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_above="@+id/bottombar"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.example.bottombar.BottomBar
        android:id="@+id/bottombar"
        android:layout_width="match_parent"
        android:layout_height="46dp"
        android:layout_alignParentBottom="true" />
</RelativeLayout>

FrameLayout是用來顯示fragment內容的。

3.在java代碼中添加導航欄item,同時建立各個item對應的類

BottomBar bottomBar=findViewById(R.id.bottombar);
bottombar.setContainer(R.id.fragment_container)
    .addItem(Home.class,"首頁",homeicon_before,homeicon_after)
    .addItem(Message.class,"消息",messageicon_before,messageicon_after)
    .addItem(Me.class,"我",meicon_before,meicon_after)
    .create();

在java代碼裏首先要調用setContainer()方法設置farmeLayout，然後添加導航欄的item，然後調用設置屬性的各個api，最後一定要調用create()方法創建。

注意：此Activity要繼承AppCompatActivity才能運行，否則程序會崩潰。關於這點，後續會更新版本來支持其他Activity。

另：如果需要設置成沒有圖標的導航欄，只需把icon的寬高設置爲0即可。

4.在item對應的類文件裏設置佈局

由於使用的是frameLayout，因此item對應的類文件裏不能繼承Activity，要繼承Fragment才行。

public class Home extends Fragment {
    
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.homelayout_fragment,container,false);
        // 如果需要實例化控件，在這裏實例化。
        TextView textView=view.findViewById(R.id.textView);
        textView.setText("首頁");
        return view;
    }
    
    @Override
    public void onActivityCreated(Bundle savedInstanceState){
        super.onActivityCreated(savedInstanceState);
        // Fragment裏的控件監聽事件在這裏面實現
    }
}

5.設置BottomBar的屬性

在java代碼裏設置屬性

api名稱	api作用
setTitleBeforeAndAfterColor(int,int)	設置文字選中前後的顏色
setTitleSize(int)	設置文字大小(默認dp爲單位)
setIconWidth(int)	設置圖標的寬度
setIconHeight(int)	設置圖標的高
setTitleIconMargin(int)	設置文字與圖標的間隙
setFirstChecked(int)	設置默認選中的item(默認爲0)
isShowAboveBoundary(boolean)	設置是否顯示上方分界線(默認顯示)
isShowBottomBoundary(boolean)	設置是否顯示下方分界線(默認不顯示)
isShowAboveClue(boolean)	設置是否顯示上方選中提示線(默認不顯示)
isShowBottomClue(boolean)	設置是否顯示下方選中提示線(默認顯示)
setAboveClueHeight(int)	設置上方提示線的粗細
setBottomClueHeight(int)	設置下方提示線的粗細
setBoundaryColor(int)	設置分界線的顏色(默認黑色)

java代碼：

bottombar.setTitleSize(14)
    .setFirstChecked(2)
    .isShowAboveClue(true)

或者在xml標籤裏設置屬性

要使用這些屬性，首先要加入命名空間

xmlns:app="http://schemas.android.com/apk/res-auto"

標籤名	對應屬性
titleBeforeColor	文字選中前的顏色
titleAfterColor	文字選中後的顏色
titleSize	文字大小(默認dp爲單位)
iconWidth	圖標的寬度
iconHeight	設置圖標的高
titleIconMargin	文字與圖標的間隙
firstChecked	默認選中的item
isShowAboveBoundary	是否顯示上方分界線(默認顯示)
isShowBottomBoundary	是否顯示下方分界線(默認不顯示)
isShowAboveClue	是否顯示上方選中提示線(默認不顯示)
isShowBottomClue	是否顯示下方選中提示線(默認顯示)
aboveClueHeight	上方提示線的粗細
bottomClueHeight	下方提示線的粗細
boundaryColor	分界線的顏色(默認黑色)

佈局文件：

<com.example.bottombar.BottomBar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/bottombar"
       android:layout_width="match_parent"
       android:layout_height="45dp"
                               
       app:titleSize="14"
       app:isShowAboveClue="true"
       app:aboveClueHeight="6"/>

另：item選中時的提示線會根據文字長度自動適配。

附上github地址：點擊下載源碼
後續會更新版本，謝謝大家的支持。