Android底部菜單（Fragment控制切換多個頁面）

第一次寫博客，希望對大家有所幫助

關於Android底部菜單、側滑菜單現在用的都比較多，我有時間會給大家多整理這類似的資料，希望能夠幫助有需要的人！

首先講一下思路，就是在主頁面裏面用一個線性佈局把所有的類容都包住，然後分爲上下兩個部分，上面是FrameLayout，用來存放不同的Fragment，下面是一個線性佈局，線性佈局裏面有多個小的線性佈局，這些小的線性佈局就是所謂的“菜單”，點擊不同的“菜單”，上面切換不同的Fragment進行顯示。

好了，下面直接附上代碼

首先是菜單欄include_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/linear_h"
    android:padding="0dp">
    <LinearLayout
        android:id="@+id/include_main_first_linear"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_weight="1"
        android:onClick="onMainClick">
        <ImageView
            android:id="@+id/include_main_first_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/home"/>
        <TextView
            android:id="@+id/include_main_first_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="首頁"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/include_main_two_linear"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_weight="1"
        android:onClick="onMainClick">
        <ImageView
            android:id="@+id/include_main_two_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/home"/>
        <TextView
            android:id="@+id/include_main_two_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="首頁"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/include_main_three_linear"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_weight="1"
        android:onClick="onMainClick">
        <ImageView
            android:id="@+id/include_main_three_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/home"/>
        <TextView
            android:id="@+id/include_main_three_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="首頁"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/include_main_four_linear"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_weight="1"
        android:onClick="onMainClick">
        <ImageView
            android:id="@+id/include_main_four_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/home"/>
        <TextView
            android:id="@+id/include_main_four_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="首頁"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/include_main_five_linear"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_weight="1"
        android:onClick="onMainClick">
        <ImageView
            android:id="@+id/include_main_five_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/home"/>
        <TextView
            android:id="@+id/include_main_five_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="首頁"/>
    </LinearLayout>

</LinearLayout>

這裏用到的圖片（@drawable/home）大家隨便找一張代替就可以了，主要是看一下效果就好！

有了菜單欄之後便是我們需要的幾個Fragment了，因爲一個菜單對應了便是一個Fragment，所以你寫一個菜單選項就需要幾個Fragment了！名字可以隨便取，我取的名字分別是：FirstFrament、TwoFrament、ThreeFrament、FourFrament、FiveFrament；就是五個Fragment而已，自己寫的時候區別一下就好了，好吧，還是上源碼。

public class FirstFrament extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frament_first,null);
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

    }
}

public class TwoFrament extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frament_two,null);
    }
}

public class ThreeFrament extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frament_three,null);
    }
}

public class FourFrament extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frament_four,null);
    }
}

public class FiveFrament extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frament_five,null);
    }
}

當然每一個Fragment也對應這一個xml文件，分別是

frament_first、frament_two、frament_three、frament_four、frament_five,佈局文件就不貼出來了，自己想怎麼寫都行，裏面有一點區別方便自己區分確實是切換了頁面就行了。

然後這些輔助行了頁面和類寫好了之後，便是我們的首頁的佈局文件和Action了；

主頁的佈局文件是：activity_main

<?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:orientation="vertical">
    <FrameLayout
         android:id="@+id/main_frame"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1"/>
    <include
         layout="@layout/include_main"/>
</LinearLayout>

主方法是MainActivity.java，這裏的BaseActivity 裏面其實什麼都沒有隻是繼承了Activity而已。@InjectView是註解，Android Studio引用了

compile 'com.jakewharton:butterknife:6.1.0'

之後的。大家也可以自己手動findViewById進行導入！

public class MainActivity extends BaseActivity {

    @InjectView(R.id.include_main_first_image)
    ImageView includeMainFirstImage;
    @InjectView(R.id.include_main_first_text)
    TextView includeMainFirstText;
    @InjectView(R.id.include_main_first_linear)
    LinearLayout includeMainFirstLinear;
    @InjectView(R.id.include_main_two_image)
    ImageView includeMainTwoImage;
    @InjectView(R.id.include_main_two_text)
    TextView includeMainTwoText;
    @InjectView(R.id.include_main_two_linear)
    LinearLayout includeMainTwoLinear;
    @InjectView(R.id.include_main_three_image)
    ImageView includeMainThreeImage;
    @InjectView(R.id.include_main_three_text)
    TextView includeMainThreeText;
    @InjectView(R.id.include_main_three_linear)
    LinearLayout includeMainThreeLinear;
    @InjectView(R.id.include_main_four_image)
    ImageView includeMainFourImage;
    @InjectView(R.id.include_main_four_text)
    TextView includeMainFourText;
    @InjectView(R.id.include_main_four_linear)
    LinearLayout includeMainFourLinear;
    @InjectView(R.id.include_main_five_image)
    ImageView includeMainFiveImage;
    @InjectView(R.id.include_main_five_text)
    TextView includeMainFiveText;
    @InjectView(R.id.include_main_five_linear)
    LinearLayout includeMainFiveLinear;
    public FirstFrament firstFrament = new FirstFrament();
    public TwoFrament twoFrament = new TwoFrament();
    public ThreeFrament threeFrament = new ThreeFrament();
    public FourFrament fourFrament = new FourFrament();
    public FiveFrament fiveFrament = new FiveFrament();
    public Fragment fragment;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        if (savedInstanceState == null) {
            getFragmentManager().beginTransaction().add(R.id.main_frame, firstFrament).show(firstFrament).commit();
            fragment = firstFrament;
        }
        
    /**
     * 菜單欄的點擊事件
     *
     * @param v
     */
    public void onMainClick(View v) {
        switch (v.getId()) {
            case R.id.include_main_first_linear:
                if (fragment != firstFrament) {
                    if (firstFrament.isAdded()) {
                        getFragmentManager().beginTransaction().show(firstFrament).hide(fragment).commit();
                    } else {
                        getFragmentManager().beginTransaction().add(R.id.main_frame, firstFrament).show(firstFrament).hide(fragment).commit();
                    }
                    fragment = firstFrament;
                }
                break;
            case R.id.include_main_two_linear:
                if (fragment != twoFrament) {
                    if (twoFrament.isAdded()) {
                        getFragmentManager().beginTransaction().show(twoFrament).hide(fragment).commit();
                    } else {
                        getFragmentManager().beginTransaction().add(R.id.main_frame, twoFrament).show(twoFrament).hide(fragment).commit();
                    }
                    fragment = twoFrament;
                }
                break;
            case R.id.include_main_three_linear:
                if (fragment != threeFrament) {
                    if (threeFrament.isAdded()) {
                        getFragmentManager().beginTransaction().show(threeFrament).hide(fragment).commit();
                    } else {
                        getFragmentManager().beginTransaction().add(R.id.main_frame, threeFrament).show(threeFrament).hide(fragment).commit();
                    }
                    fragment = threeFrament;
                }
                break;
            case R.id.include_main_four_linear:
                if (fragment != fourFrament) {
                    if (fourFrament.isAdded()) {
                        getFragmentManager().beginTransaction().show(fourFrament).hide(fragment).commit();
                    } else {
                        getFragmentManager().beginTransaction().add(R.id.main_frame, fourFrament).show(fourFrament).hide(fragment).commit();
                    }
                    fragment = fourFrament;
                }
                break;
            case R.id.include_main_five_linear:
                if (fragment != fiveFrament) {
                    if (fiveFrament.isAdded()) {
                        getFragmentManager().beginTransaction().show(fiveFrament).hide(fragment).commit();
                    } else {
                        getFragmentManager().beginTransaction().add(R.id.main_frame, fiveFrament).show(fiveFrament).hide(fragment).commit();
                    }
                    fragment = fiveFrament;
                }
                break;
        }

    }
}

這樣就實現了菜單欄的頁面切換，大家還可以在點擊事件裏面添加自己需要的圖片切換和字體的顏色切換，我相信大家在認真看完之後，應該自己自己需要怎麼改了，如果大家寫的好，請點個贊，謝謝！