電商式導航欄，多Fragment切換

• 介面構思示意圖
  

• 設計思路
  在底部的LinearLayout中新增相應的圖示，然後設定tag繫結相應的 Fragment陣列對應的下標值，再點選切換的時候，根據獲取到的tag值，取出陣列中對應下標的Fragment，在通過相關方法顯示。
  封裝目標：只需新增相應的按鈕物件和相應的檢視即可，然後在Activity中顯示即可。

• 先建立可切換的Fragment的基類BottomItemFragment（實現一個雙擊退出功能）

// 定義為抽象類即每個itemfragment的基類
public abstract class BottomItemFragment
 
 extends MyFragment implements View.OnKeyListener{
    // 當前按下返回按鈕的時間
    private long mExitTime = 0;
    // 雙擊返回鍵之間的延遲
    private static final int EXIT_TIME = 2000;

    @Override
    public void onResume(){
        super.onResume();
        View rootView = getView();
        // 防止雙擊退出失效
        if (rootView!=null
 
){
            rootView.setFocusableInTouchMode(true);
            rootView.requestFocus();
            rootView.setOnKeyListener(this);
        }
    }

    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event){
        if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN){
            if
 
 ((System.currentTimeMillis() - mExitTime) > EXIT_TIME) {
                Toast.makeText(getContext(), "雙擊退出", Toast.LENGTH_SHORT).show();
                mExitTime = System.currentTimeMillis();
            } else {
                _mActivity.finish();
                if (mExitTime != 0) {
                    mExitTime = 0;
                }
            }
            return true;
        }
    }
}

• 底部導航欄按鈕物件的封裝(這邊的icon用的是字型圖示，不明白的請移步我的部落格)

public final class BottomTabBean {
    private final CharSequence ICON;
    private final CharSequence TITLE;

    public BottomTabBean(CharSequence ICON, CharSequence TITLE){
        this.ICON = ICON;
        this.TITLE = TITLE;
    }

    public CharSequence getICON(){
        return ICON;
    }
    public CharSequence getTITLE(){
        return TITLE;
    }
}

• 新建一個ItemBuilder，目的是用來把每一個Fragment和底部的按鈕物件進行繫結組裝進一個LinkedHashMap的集合

public final class ItemBuilder{
    private final LinkedHashMap<BottomTabBean,BottomItemDelegate> ITEMS = new LinkedHashMap<>();

    static ItemBuilder builder(){
        return new ItemBuilder();
    }

    public final ItemBuilder addItem(BottomTabBean bean, BottomItemDelegate delegate){
        ITEMS.put(bean, delegate);
        return this;
    }

    public final ItemBuilder addItems(LinkedHashMap<BottomTabBean, BottomItemDelegate> items){
        ITEMS.putAll(items);
        return this;
    }

    public final LinkedHashMap<BottomTabBean, BottomItemDelegate> build(){
        return ITEMS;
    }
}

• 接下來貼兩個佈局檔案，一個是根Fragment的佈局，其實就是一個FrameLayout加上一個底部按鈕的LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.ContentFrameLayout
        android:id="@+id/bottom_bar_delegate_container"
        android:layout_above="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.v7.widget.LinearLayoutCompat
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_height="60dp"/>

</RelativeLayout>

• 然後是底部按鈕的item佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:paddingBottom="6dp"
    android:paddingTop="6dp">

    <com.joanzapata.iconify.widget.IconTextView
        android:id="@+id/icon_bottom_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:textSize="25sp" />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv_bottom_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center" />

</RelativeLayout>

• 萬事俱備，接下來就是新建一個BaseBottomFragment,將頁面進行組裝

public abstract class BaseBottomFragment extends MyFragment implements View.OnClickListener {
    // 將傳過來的LinkedHashMap集合裡面的鍵值對拆分之後，分別存入兩個ArrayList
    private final ArrayList<BottomTabBean> TAB_BEAN = new ArrayList<>();
    private final ArrayList<BottomItemFragment> ITEM_FRAGMENT = new ArrayList<>();

    // 定義一個LinkedHashMap接受傳過來的頁面資料
    private final LinkedHashMap<BottomTabBean, BottomItemFragment> ITEMS = new LinkedHashMap<>();

    // 當前顯示fragment的頁面標記
    private int mCurrentFragment = 0;
    // 首次載入頁面時顯示的主頁標記 = 0
    private int mIndexFragment = 0;

    // 點選之後按鈕顯示的顏色
    private int mClickColor = Color.RED;

    //對子類提供的設定的抽象方法
    // 讓子類傳入佈局所需要的按鈕和佈局
    public abstract LinkedHashMap<BottomTabBean, BottomItemDelegate> setItems(ItemBuilder itemBuilder);
    // 讓子類傳入設定首次載入的主頁
    public abstract int setIndexDelegate();
    // 讓子類傳入設定點選之後按鈕的顏色
    @ColorInt
    public abstract int setClickColor();

    @Override
    public Object setLayout() {
        return R.layout.delegate_bottom;
    }
    // ButterKnife繫結，自己去Github上看使用的方法，我這邊是在Android Library裡面使用的，所以是R2檔案
    @BindView(R2.id.bottom_bar)
    LinearLayoutCompat mBottomBar = null;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mIndexDelegate = setIndexDelegate();
        if (setClickColor()!=0){
            mClickColor = setClickColor();
        }

        final ItemBuilder builder = ItemBuilder.builder();
        final LinkedHashMap<BottomTabBean, BottomItemDelegate> items = setItems(builder);

        ITEMS.putAll(items);
        // for 迴圈取出ITEMS中的鍵值對的值
        for(Map.Entry<BottomTabBean, BottomItemDelegate> item:ITEMS.entrySet()){
            final BottomTabBean key = item.getKey();
            final BottomItemDelegate value = item.getValue();
            TAB_BEANS.add(key);
            ITEM_DELEGATES.add(value);
        }
    }

    @Override
    public void onBindView(@Nullable Bundle saveInstanceState, View rootView){
        final size = ITEMS.size();
        // for迴圈填充底部佈局,比較核心的內容
        for(int i = 0 ;i < size; i++){
            LayoutInflater.from(getContext()).inflate(R.layout.bottom_item_icon_text_layout, mBottomBar);
            final RelativeLayout item = mBottomBar.getChildAt(i);
            // 設定tag
            item.setTag(i);
            item.setOnClickListener(this);
            final IconTextView itemIcon = (IconTextView)item.getChildAt(0);
            final AppCompatTextView itemTitle = (AppCompatTextView)item.getChildAt(1);
            final BottomTabBean bean = TAB_BEAN.get(i);
            itemIcon.setText(bean.getICON());
            itemTitle.setText(bean.getTITLE());
            if (i == mIndexFragment){
                itemIcon.setTextColor(mClickColor);
                itemTitle.setTextColor(mClickColor);
            }
        }
        // 將fragments的ArrayList轉化為SupportFragment的陣列，框架需要
        final SupportFragment[] fragmentArray = ITEM_FRAGMENTS.toArray(new SupportFragment[size]);
        // Fragmentation提供的設定方法
        loadMultipleRootFragment(R.id.bottom_bar_delegate_container, mIndexFragment, fragmentArray);
    }

    // 重置按鈕的顏色
    private void resetColor() {
        final int count = mBottomBar.getChildCount();
        for (int i = 0; i < count; i++) {
            final RelativeLayout item = (RelativeLayout) mBottomBar.getChildAt(i);
            final IconTextView itemIcon = (IconTextView) item.getChildAt(0);
            itemIcon.setTextColor(Color.GRAY);
            final AppCompatTextView itemTitle = (AppCompatTextView) item.getChildAt(1);
            itemTitle.setTextColor(Color.GRAY);
        }
    }

    // 點選之後重新匯入delegate，設定按鈕的顏色
    @Override
    public void onClick(View view) {
        final int tag = (int) view.getTag();
        resetColor();
        final RelativeLayout item = (RelativeLayout) view;
        final IconTextView itemIcon = (IconTextView) item.getChildAt(0);
        itemIcon.setTextColor(mClickColor);
        final AppCompatTextView itemTitle = (AppCompatTextView) item.getChildAt(1);
        itemTitle.setTextColor(mClickColor);
        // Fragmentation提供的方法
        showHideFragment(ITEM_DELEGATES.get(tag), ITEM_DELEGATES.get(mCurrentDelegate));
        mCurrentDelegate = tag;
    }
}

• 至此，封裝完成，底部帶導航欄的多Fragment介面已經ok了，接下來就是新建一個底部導航欄的例項，將資料填充進去就OK了

public class MyBottomFragment extends BaseBottomFragment{
    @Override
    public LinkedHashMap<BottomTabBean, BottomItemFragment> setItems(ItemBuilder itemBuilder) {
        final LinkedHashMap<BottomTabBean, BottomItemFragment> items = new LinkedHashMap<>();
        items.put(new BottomTabBean("{fa-home}","主頁"),new IndexFragment());
        items.put(new BottomTabBean("{fa-sort}","分類"),new SortFragment());
        items.put(new BottomTabBean("{fa-compass}","發現"),new IndexFragment());
        items.put(new BottomTabBean("{fa-shopping-cart}","購物車"),new IndexFragment());
        items.put(new BottomTabBean("{fa-user}","我的"),new IndexFragment());

        return itemBuilder.addItems(items).build();
    }

    @Override
    public int setIndexDelegate() {
        return 0;
    }

    @Override
    public int setClickColor() {
        return Color.parseColor("#FF0000");
    }
}

• 最後在單一的Activity中的setRootFragment方法中設定MyBottomFragment頁面，顯示即可。