电商式导航栏，多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;@Overridepublic void onResume(){super.onResume();View rootView = getView();// 防止双击退出失效if (rootView!=null){rootView.setFocusableInTouchMode(true);rootView.requestFocus();rootView.setOnKeyListener(this);}}@Overridepublic 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="/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="/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集合里面的键值对拆分之后，分别存入两个ArrayListprivate 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;// 首次加载页面时显示的主页标记 = 0private int mIndexFragment = 0;// 点击之后按钮显示的颜色private int mClickColor = Color.RED;//对子类提供的设置的抽象方法// 让子类传入布局所需要的按钮和布局public abstract LinkedHashMap<BottomTabBean, BottomItemDelegate> setItems(ItemBuilder itemBuilder);// 让子类传入设置首次加载的主页public abstract int setIndexDelegate();// 让子类传入设置点击之后按钮的颜色@ColorIntpublic abstract int setClickColor();@Overridepublic Object setLayout() {return R.layout.delegate_bottom;}// ButterKnife绑定，自己去Github上看使用的方法，我这边是在Android Library里面使用的，所以是R2文件@BindView(R2.id.bottom_bar)LinearLayoutCompat mBottomBar = null;@Overridepublic 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);}}@Overridepublic 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);// 设置tagitem.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，设置按钮的颜色@Overridepublic 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{@Overridepublic 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();}@Overridepublic int setIndexDelegate() {return 0;}@Overridepublic int setClickColor() {return Color.parseColor("#FF0000");}}

最后在单一的Activity中的setRootFragment方法中设置MyBottomFragment页面，显示即可。