【Android】 Android studio 底部導航欄的基本實現(一)


【愛迪的懂】本期來學一學一個底部導航欄的基本實現~

 

 效果圖:點擊三個按鈕任意一個,切換頁面上文字。

 

步驟:

1.准備

開始前需要准備導航欄底部的圖片,以及點擊后變換的圖片,這里共6張。放在 drawable 下

2.新建一個Activity ,修改他對應的布局文件

FrameLayout: 相當於一個碎片的容器
  1 <LinearLayout
  2     xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:id="@+id/main_body_bar"
  4     android:orientation="vertical"
  5     android:layout_width="match_parent"
  6     android:layout_height="match_parent">
  7 
  8     <include layout="@layout/bottom_title_bar"/>
  9 
 10     <RelativeLayout
 11         android:id="@+id/main_body"
 12         android:layout_width="match_parent"
 13         android:layout_height="match_parent">
 14 
 15         <FrameLayout 
 16             android:id="@+id/fl_container"
 17             android:layout_width="match_parent"
 18             android:layout_height="match_parent"
 19             android:layout_above="@+id/bottom_bar"/>
 20 
 21         <LinearLayout
 22             android:id="@+id/bottom_bar"
 23             android:layout_alignParentBottom="true"
 24             android:orientation="horizontal"
 25             android:background="#F2F2F8"
 26             android:layout_width="match_parent"
 27             android:layout_height="50dp">
 28             <RelativeLayout
 29                 android:id="@+id/bottom_bar_1_btn"
 30                 android:layout_weight="1"
 31                 android:layout_width="0dp"
 32                 android:layout_height="match_parent">
 33                 <TextView
 34                     android:id="@+id/bottom_bar_text_1"
 35                     android:layout_width="match_parent"
 36                     android:layout_height="wrap_content"
 37                     android:layout_alignParentBottom="true"
 38                     android:layout_centerHorizontal="true"
 39                     android:layout_marginBottom="2dp"
 40                     android:gravity="center"
 41                     android:text="botton_1"
 42                     android:textColor="#000000"
 43                     android:textSize="14sp"/>
 44                 <ImageView
 45                     android:id="@+id/bottom_bar_image_1"
 46                     android:layout_width="30dp"
 47                     android:layout_height="30dp"
 48                     android:layout_above="@+id/bottom_bar_text_1"
 49                     android:layout_alignParentTop="true"
 50                     android:layout_centerHorizontal="true"
 51                     android:layout_marginTop="2dp"
 52                     android:src="@drawable/main_button_1"/>
 53             </RelativeLayout>
 54 
 55             <RelativeLayout
 56                 android:id="@+id/bottom_bar_2_btn"
 57                 android:layout_weight="1"
 58                 android:layout_width="0dp"
 59                 android:layout_height="match_parent">
 60                 <TextView
 61                     android:id="@+id/bottom_bar_text_2"
 62                     android:layout_width="match_parent"
 63                     android:layout_height="wrap_content"
 64                     android:layout_alignParentBottom="true"
 65                     android:layout_centerHorizontal="true"
 66                     android:layout_marginBottom="2dp"
 67                     android:gravity="center"
 68                     android:text="botton_1"
 69                     android:textColor="#000000"
 70                     android:textSize="14sp"/>
 71                 <ImageView
 72                     android:id="@+id/bottom_bar_image_2"
 73                     android:layout_width="30dp"
 74                     android:layout_height="30dp"
 75                     android:layout_above="@+id/bottom_bar_text_2"
 76                     android:layout_alignParentTop="true"
 77                     android:layout_centerHorizontal="true"
 78                     android:layout_marginTop="2dp"
 79                     android:src="@drawable/main_button_2"/>
 80             </RelativeLayout>
 81             <RelativeLayout
 82                 android:id="@+id/bottom_bar_3_btn"
 83                 android:layout_weight="1"
 84                 android:layout_width="0dp"
 85                 android:layout_height="match_parent">
 86                 <TextView
 87                     android:id="@+id/bottom_bar_text_3"
 88                     android:layout_width="match_parent"
 89                     android:layout_height="wrap_content"
 90                     android:layout_alignParentBottom="true"
 91                     android:layout_centerHorizontal="true"
 92                     android:layout_marginBottom="2dp"
 93                     android:gravity="center"
 94                     android:text="botton_1"
 95                     android:textColor="#000000"
 96                     android:textSize="14sp"/>
 97                 <ImageView
 98                     android:id="@+id/bottom_bar_image_3"
 99                     android:layout_width="30dp"
100                     android:layout_height="30dp"
101                     android:layout_above="@+id/bottom_bar_text_3"
102                     android:layout_alignParentTop="true"
103                     android:layout_centerHorizontal="true"
104                     android:layout_marginTop="2dp"
105                     android:src="@drawable/main_button_3"/>
106             </RelativeLayout>
107         </LinearLayout>

 

3. 返回該活動中 ,初始化布局文件中的控件

 

 4. 新建三個Fragment (這里后兩個我復制的第一個),后面只針對一 個說明,其余效果相同

 5.打開其中一個布局文件,設置一個TextView (其余兩個修改一下 text 就行)

 6.返回對應的 Activity 修改代碼(其他兩個對應修改成各自的)

 

onCreateView()參考 : https://blog.csdn.net/weixin_44618862/article/details/98209943

onViewCreated()參考:https://www.jianshu.com/p/20b1f11b72b8

inflater.inflate()參數詳解:https://blog.csdn.net/weixin_41213648/article/details/98453845

 

7. 再次打開 ,將三個 Fragment 創建

 

 8. 寫一個底部導航欄狀態的切換方法

 

 

 9. 實現底部導航欄的響應

添加監聽方方式:通過當前類實現OnClickListener接口並在其必須實現的onClick方法中添加事件

 

 

9.1 點擊事件

這里我設置了一個 TAG,目的是:如果一直都是 ADD ,會造成 fragment 重疊的效果,所以 TAG判斷是否為第一次點擊,如果不是則執行 replace 方法

 

 

getSupportFragmentManager().beginTransaction(): https://www.jianshu.com/p/5761ee2d3ea1

 10. 總結

到這里就差不多可以運行啦~ 可實現點擊按鈕切換碎片容器內的內容啦~

學習期間也出現過許多困難,比如在尋找學習教程的時找了很久,說到這不得不感覺 B站的up主和博主們,B站也是一個神仙app,安利。

還有遇到的就是方法過時等一些問題,不過這都不是事,一點一點解決,加油,奧里給!

 

我這里還添加了一個 title bar  道友們可以自行添加

 

 

 

 

參考博客: https://cloud.tencent.com/developer/article/1455581


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM