【愛迪的懂】本期來學一學一個底部導航欄的基本實現~
效果圖:點擊三個按鈕任意一個,切換頁面上文字。
步驟:
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 道友們可以自行添加