前言

大家好，我是 Vic，今天給大家帶來AndroidStudio制作底部導航欄以及用Fragment實現切換功能的概述，希望你們喜歡

學習目標

AndroidStudio制作底部導航欄以及用Fragment實現切換功能，用戶點擊底部導航欄可以實現三個模塊的跳轉。

圖片資源

需要底部導航欄三個點擊按鈕的圖片資源

main_button_1.png,main_button_2.png,main_button_3.png

以及點擊變換的圖片資源

main_button_1_selected.png,

main_button_2_selected.png,

main_button_3_selected.png.

以上圖片資源都放進drawable文件夾中

activity_main 布局

在 MainActivity 頁面中主要有兩個區域：

一個是放 Fragment 的 main_body

一個是放底部導航欄的 main_bottom_bar

主要的Fragment代碼塊：

android:orientation="vertical"

android:background="@android:color/white"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/main_body"

android:background="@android:color/white"

android:layout_width="match_parent"

android:layout_height="match_parent">

主要的底部導航欄的代碼塊：

android:id="@+id/main_bottom_bar"

android:layout_alignParentBottom="true"

android:background="#F2F2F2"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="55dp">

android:layout_weight="1"

android:id="@+id/bottom_bar_1_btn"

android:layout_width="0dp"

android:layout_height="match_parent">

android:id="@+id/bottom_bar_text_1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="3dp"

android:gravity="center"

android:singleLine="true"

android:text="button_1"

android:textColor="#666666"

android:textSize="14sp"/>

android:layout_width="27dp"

android:layout_height="27dp"

android:layout_above="@+id/bottom_bar_text_1"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="3dp"

android:id="@+id/bottom_bar_image_1"

android:src="@drawable/main_button_1"/>

....

實例化控件

實例化控件一些瑣碎的代碼：

//先實例化控件，那我給出自己打的實例化代碼

//來自main_title_bar.xml

private TextView tv_main_title;//標題

private TextView tv_back;//返回按鈕

private RelativeLayout title_bar;

//來自activity_main.xml

private RelativeLayout main_body;

private TextView bottom_bar_text_1;

private ImageView bottom_bar_image_1;

...

private LinearLayout main_bottom_bar;

private RelativeLayout bottom_bar_1_btn;

private RelativeLayout ...;

然后

initView();

//實例化

private void initView(){

//標題顯示

tv_back=findViewById(R.id.tv_back);

tv_main_title=findViewById(R.id.tv_main_title);

title_bar=findViewById(R.id.title_bar);

//底部導航欄

main_body=findViewById(R.id.main_body);

bottom_bar_text_1=findViewById(R.id.bottom_bar_text_1);

bottom_bar_image_1=findViewById(R.id.bottom_bar_image_1);

...

//包含底部 android:id="@+id/main_bottom_bar"

main_bottom_bar=findViewById(R.id.main_bottom_bar);

//private RelativeLayout bottom_bar_1_btn;

bottom_bar_1_btn=findViewById(R.id.bottom_bar_1_btn);

//添加點擊事件

bottom_bar_1_btn.setOnClickListener(this);

...

//技巧

//tv_back.setVisibility(View.GONE);

tv_main_title.setText("課程");

title_bar.setBackgroundColor(Color.parseColor("#30B4FF"));

}

底部導航欄狀態的切換方法

給MainActivity加一個setSelectStatus() 方法，方法里用參數index來判斷當前選的按鈕

示例代碼

private void setSelectStatus(int index) {

switch (index){

case 0:

//圖片點擊選擇變換圖片，顏色的改變，其他變為原來的顏色，并保持原有的圖片

bottom_bar_image_1.setImageResource(R.drawable.main_button_1_selected);

bottom_bar_text_1.setTextColor(Color.parseColor("#0097F7"));

//其他的文本顏色不變

bottom_bar_text_2.setTextColor(Color.parseColor("#666666"));

bottom_bar_text_3.setTextColor(Color.parseColor("#666666"));

//圖片也不變

bottom_bar_image_2.setImageResource(R.drawable.main_button_2);

bottom_bar_image_3.setImageResource(R.drawable.main_button_3);

break;

case 1://同理如上

...

break;

case 2://同理如上

...

break;

}

}

實現底部導航欄的響應

導航欄文本顏色和圖片切換效果的方法寫好了，接下來是點擊響應的方法

給MainActivity加上View.OnClickListener接口

在生成的 onClick() 方法中加上導航欄區域的響應

@Override

public void onClick(View v) {

switch (v.getId()){

case R.id.bottom_bar_1_btn:

setSelectStatus(0);

break;

case R.id.bottom_bar_2_btn:

setSelectStatus(1);

break;

case R.id.bottom_bar_3_btn:

setSelectStatus(2);

break;

}

}

別忘了在initView() 中添加監聽器

bottom_bar_1_btn.setOnClickListener(this);

三個 fragment 的創建

就是簡單的創建三個布局，展現Fragment_1/2/3 即可

示例代碼塊

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/white">

android:text="Fragment_1"

android:textColor="@android:color/black"

android:textSize="50sp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

然后通過我之前寫的插件自動生成三個Fragemnt ，就可以了不用管生成的Fragement_1/2/3.java文件了，

插件文章

《 Android開發的插件Code Generator與LayoutCreator的安裝與使用，提升你的開發效率 》

三個fragment的顯示和切換

在MainActivity里把AppCompatActivity改為FragmentActivity

把Fragment加到Activity里的代碼

通常用這個來展示，但是代碼過長，我們來簡化一下

/*

* FragmentManager manager = getSupportFragmentManager();

* FragmentTransaction transaction = manager.beginTransaction();

* transaction.add(R.id.main_body,new CourseFragment()).commit();

* */

我們先來添加一個setMain() 方法，來顯示打開界面時，顯示的初始頁面

/用于打開初始頁面

private void setMain() {

//getSupportFragmentManager() -> beginTransaction() -> add -> (R.id.main_boy,顯示課程 new CourseFragment()

this.getSupportFragmentManager().beginTransaction().add(R.id.main_body,new CourseFragment()).commit();

}

上面的代碼中可以看到相對來說比較少，那我們就用這個，然后我們來實現點擊底部導航欄來切換響應的fragment,我們在onClick()中添加即可。

case R.id.bottom_bar_1_btn:

//添加

getSupportFragmentManager().beginTransaction().replace(R.id.main_body,new Button_1Fragment()).commit();

setSelectStatus(0);

break;

如果覺得不錯，那就點個贊吧！??

總結

本文講了AndroidStudio制作底部導航欄以及用Fragment實現切換功能，界面的布局介紹，如果您還有更好地理解，歡迎溝通

定位：分享 Android&Java知識點，有興趣可以繼續關注

總結

以上是生活随笔為你收集整理的Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。