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

安卓輕量級底部導航欄

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

使用方法：

1.添加依賴

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

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

然後在dependencies下加入依賴

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位址：點選下載下傳源碼

後續會更新版本，謝謝大家的支援。