Fragment的使用（Android實現底部導航欄）
一、佈局頁面新增
1.新增四個切換頁面的佈局
（1）四個切換頁面的佈局(四個頁面相同）：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/aquamarine" android:gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第一個頁面" android:textSize="22sp" /> </LinearLayout>
（2）相應Fragment的實現類：
public class FirstFragment extends Fragment { @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg1, container, false); return view; } }
（3）如圖：
2.新增主頁面的佈局（底部導航按鈕佈局和頂部標題佈局直接寫在該佈局）
（1）主佈局頁面
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@color/colorAccent" tools:context=".MainActivity"> <include android:id="@+id/show_main_title" layout="@layout/title_layout" /> <!-- 此處新增Fragment佈局 --> <FrameLayout android:id="@+id/fragment_buju" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/viewfinder_mask" > </FrameLayout> <!-- 關於試題邏輯的相關功能佈局暫時遮蔽 <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical" android:gravity="center" android:background="@color/whitesmoke"> <TextView android:id="@+id/question_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="24dp"> </TextView> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/true_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/true_button" android:textAllCaps="false"/> <Button android:id="@+id/false_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/false_button" android:textAllCaps="false"/> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageButton android:id="@+id/up_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/arrow_left" /> <ImageButton android:id="@+id/next_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/arrow_right" /> </LinearLayout> </LinearLayout> --> <!-- 底部四個導航選單欄 --> <!-- 暫時先將該段底部例項註釋掉，後期再新增 --> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="@color/white"> <RelativeLayout android:id="@+id/first_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/first_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@android:drawable/ic_menu_compass"/> <TextView android:id="@+id/first_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:textColor="#7597B3" android:text="訊息"/> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/second_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/second_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@android:drawable/ic_menu_agenda"/> <TextView android:id="@+id/second_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:textColor="#7597B3" android:text="發現"/> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/third_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/third_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@android:drawable/ic_menu_edit"/> <TextView android:id="@+id/third_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:textColor="#7597B3" android:text="記錄"/> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/fourth_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/fourth_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@android:drawable/ic_menu_myplaces"/> <TextView android:id="@+id/fourth_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:textColor="#7597B3" android:text="我的"/> </LinearLayout> </RelativeLayout> </LinearLayout> <!-- 替代按鈕導航 --> <!-- <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="#FFFFFF" android:orientation="horizontal"> <Button android:id="@+id/button_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="訊息"/> <Button android:id="@+id/button_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="發現"/> <Button android:id="@+id/button_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="記錄"/> <Button android:id="@+id/button_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我的"/> </LinearLayout> --> </LinearLayout>
頁面上添加了四個底部選單按鈕和一個通用頭部佈局，頭部引入程式碼如果沒有寫相關佈局可以先忽略去掉（刪除）
關鍵程式碼：
<FrameLayout
android:id="@+id/fragment_buju"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/viewfinder_mask"
>
</FrameLayout>這一塊是引入中間需要切換的介面的程式碼，導航和底部選單的佈局可以隨意新增；初次使用底部的導航佈局建議使用四個Button按鈕，且先新增兩個功能按鈕，方便理解。
(2)相應實現類
public class MainActivity extends Activity {
private TextView mFirstButton, mSecondFragment;
private ImageView mFirstImage, mSecondImage;
private RelativeLayout mFirstLayout, mSecondLayout;
private Fragment mFragment1;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
setview();
}
// 控制元件點選事件方法
private void setview() {
mFirstLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 獲取Fragment物件
android.app.FragmentManager fm = getFragmentManager();
// 開啟一個事物
android.app.FragmentTransaction MfragmentTransactions = fm.beginTransaction();
// 將自己建立的fragment通過物件引入
FirstFragment fff = new FirstFragment();
// 向容器內加入Fragment，一般使用add或者replace方法實現，需要傳入容器的id和Fragment的例項
MfragmentTransactions .replace(R.id.fragment_buju,fff);
MfragmentTransactions .commit();
}
});
mSecondLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentManager fm = getFragmentManager();
FragmentTransaction fragmentTransaction = fm.beginTransaction();
SecondFragment f2 = new SecondFragment();
fragmentTransaction.replace(R.id.fragment_buju,f2);
fragmentTransaction.commit();
}
});
}
// 初始化控制元件方法
private void initView(){
mFirstButton = (TextView)findViewById(R.id.first_text);
mSecondFragment = (TextView)findViewById(R.id.second_text);
mFirstImage = (ImageView)findViewById(R.id.first_image);
mSecondImage = (ImageView)findViewById(R.id.second_image);
mFirstLayout = (RelativeLayout)findViewById(R.id.first_layout);
mSecondLayout = (RelativeLayout)findViewById(R.id.second_layout);
}
}實現方法中主要分為四步：1.引入佈局（主佈局）；2.定義成員變數；3.初始化資料；4.定義按鈕點選事件；
定義點選事件中四個點選事件的程式碼重複，可以優化處理，這裡為了便於理解不做分開處理。
（3）如圖：
二、自己學習過程遇到的問題
（1）看不懂FrameLayout佈局如何引入四個頁面；
XXX：這個多看幾遍，自己照著寫寫就水到渠成的明白了；
（2）四個底部導航佈局包括ImageView、TextView和RelativeLayout，不知道初始化資料需要初始化哪些，按鈕點選事件寫在哪個元件上；
XXX：還是對元件佈局不熟悉；具體看點選事件要實現在那個地方；
（3）引入fragment時報錯：
錯誤：不相容的型別：FirstFragment無法轉換為Fragment，
XXX：這個是Fragment使用匯入包不一致導致的；匯入包有兩個，一個是系統內建的android.app.Fragment，一個是support-v4庫中的android.support.v4.app.Fragment，但是建議使用後者；
相關推薦
Fragment的使用（Android實現底部導航欄）
一、佈局頁面新增 1.新增四個切換頁面的佈局 （1）四個切換頁面的佈局(四個頁面相同）： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:
小程式自學系列（零基礎學小程式）---實現底部導航欄和頂部導航欄及微信開發工具常用快捷鍵
基本實現功能 1，底部3個tab實現選中時文字和圖片改變 2，實現頁面資料的初始化和點選button時改變資料的簡單互動 3，實現日子的列印 先看效果圖 今天是我自學微信小程式的第一天，這些程式
Flutter（一）：用BottomNavigationBar實現底部導航欄架構
效果圖（左ios右Android）： 主要涉及到5個檔案，main.dart是程式入口，MainPage.dart是主要介面（相當於Android中的MainActivity），HomePge.dart、FindPage.dart、MinePage.dart分別是首頁、
Android學習之BottomNavigationBar實現Android特色底部導航欄
Android底部導航欄的實現方式特別多，例如TabHost，TabLayout，或者TextView等，都可以實現底部導航欄的效果，但是卻沒有Google官方統一的導航欄樣式，今天講的就是Google最近新增到Material design中的底部導航欄Bot
Android開發之TabLayout真正實現底部導航欄(可實現點選文字顏色圖片切換)
前言：關於這個TabLayout實現底部導航，在我的上篇《Android開發之TabLayout實現底部導航欄》部落格中有提到，但是後面在仔細的接觸專案中，發現了裡面有很多沒有解決的事情，比如不能實現點選文字顏色和圖片的切換，不能做到禁止左右滑動，所以趁著今天有時間的情況下
三種方式實現Android頁面底部導航欄
我們在Android手機上使用新浪微博和QQ等一些軟體時，經常會遇到類似下面這種頁面底部導航欄的控制元件，使用這種導航欄可以在手機螢幕的一頁中顯示儘可能多的內容，如下圖所示： 下面我將實現這種導航欄的三種方法總結如下： 一、使用TabHost實現（TabHost在新版的A
Android用BottomNavigationBar實現底部導航欄
之前底部導航欄的基本上都是自己通過selector來實現的，今天換上了Google推出的BottomNavigationBar，感覺效果還不錯，寫了一個專案上要用到的功能的demo，先上一張效果圖，大家感受一下：這裡主要介紹BottomNavigationBar的使用，首先要
Android——BottomNavigationBar底部導航欄的快速實現
底部導航的快速實現，不用繁瑣的LinearLayout或者RadioGroup等的那麼多程式碼，簡單，粗暴。 1.基本使用 a.在Android Studio下新增依賴： compile 'com.ashokvarma.android:bottom
Android開發之TabLayout實現底部導航欄
前言：既然Tablayout可以做成選項卡的導航欄，也可以做成底部導航欄的樣子，其實也就是去掉底部的indicator，把TabLayout佈局放在下面！ ------------------------分割線--------------------------- 效果圖：
Android BottomNavigationBar 實現底部導航欄的快捷方式
Bottom navigation，為頂級檢視（top-level views）提供快速導航，可以快速的訪問和重新整理頂級檢視 本文提供很完善 底部導航 Frament 一步到位 首先就是新增依賴 //底部導航欄 compile 'com.ashokvarma.andr
Android 使用BottomNavigationView實現底部導航欄
今天我們來使用BottomNavigationView來實現android底部導航欄，在Android Support Library 25 中增加了 BottomNavigationView 控制元件，官方為我們提供了這樣這一個控制元件，就來試試吧！ 1.效
Android--BottomNavigationBar實現底部導航欄
package com.android.xiaobai; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.
BottomNavigationBar實現Android特色底部導航欄
Android底部導航欄的實現方式特別多，例如TabHost，TabLayout，或者TextView等，都可以實現底部導航欄的效果，但是卻沒有Google官方統一的導航欄樣式，今天講的就是Google最近新增到Material design中的底部導航欄BottomNa
React Native(簡單精緻的底部導航欄):使用react-native-tab-navigator實現底部導航欄
實現效果如下： 點選選項卡可以切換並且改變上面頁面的顏色、選中圖示的顏色、圖示 首先需要安裝： npm install react-native-tab-navigator --save
Android隱藏底部導航欄三大金剛按鈕
注：非uid.system專案不用看了。。。。避免看完嘗試不行，233333 定製化專案難免會用到這種需求，要就隱藏底部導航欄，讓使用者不能點選，底部導航欄的3大金剛分別就是我們看到的-返回鍵、home鍵、recent鍵。返回鍵對於我們來說很簡單，平時總是要監聽重
Android基礎-底部導航欄搭建方式二 (RadioGroup+FrameLayout)
程式碼如下: 1. xml檔案: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro
方便快捷地實現底部導航欄，包含顯示未讀數、提示小紅點、動畫等功能
輕量級底部導航欄 目前市場上的App，幾乎都有底部頁籤導航欄，所以我們在開發的時候經常需要用到這個，雖然 github 上有不少已經封裝好的底部導航欄的工具，例如 bottombar，alphaIndicator(仿微信滑動漸變底部控制元件)等，但是這些控制元件由於功能太多，而且也沒有給
關於用FragmentTabHost的實現底部導航欄的一些注意的地方~
參考程式碼出處：http://blog.csdn.net/yangyu20121224/article/details/9016223 其中有些地方用的不是太明白，自己在Demo中好好好折騰了下，算是弄白了一些沒看懂得東西，現在記下來，以便備忘~ 一：改進後的專案效果圖： 自
2 被稱為第5大元件的Fragment（Android校招復習）
1 Fragment為什麼被稱為“第五大元件”及使用場景？ 為什麼Fragment被稱為“第五大元件”？ 答：因為Fragment在使用頻率上不輸於其它四大元件，同時擁有自己的生命週期。 Fragment的使用場景？ 答：1.Fragment最初的目的就是為了在平
使用radiobutton實現底部導航欄
很多app中，都有底部導航欄。點選不同的選單，就會顯示不同的介面。 實現底部導航欄的方式有很多，最容易想到的就是是imageview+textview。當然還有一些別的方法，例如完全可以通過radiobutton來實現這個功能。 先來看佈局： <