Android微信支付宝的底部导航栏是怎么做的？简单的导航栏蕴藏着大智慧！

常见做法1：

套框架

常见做法2：

在底部写一个水平的LinearLayout作为导航栏，每个Item又是一个垂直的LinearLayout。

。。。

不是说上述做法不好。

做法1不能满足个性定制的需求

做法2嵌套层级太多，拖慢了性能；MainActivity中做事太多，负荷太大

正确做法：



为了维护，我们的模块化原子化是前期开发时必不可少的工作。这里体现的原子性是：

1.底部用碎片取代LinerLayout

2.每个item都作为一个自定义控件，都维护（缓存）了主界面布局碎片的实例。

3.切换碎片的形式采用attach和detach，而不是hide和show，无形中减小了负担，增加了容错率。

4.切换碎片不再是在MainActivity中一个一个地去实例化碎片，而是交给自定义的item控件去维护

先看一下自定义Item控件的代码

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="50dp">

<ImageView
android:id="@+id/nav_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center_horizontal"
tools:background="@mipmap/ic_launcher" />

<TextView
android:id="@+id/nav_title"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="15dp"
tools:text="微信"/>

</LinearLayout>

java

维护的变量

private Fragment mFragment = null;//这个是你维护的主界面的碎片实例

private ImageView mIcon;
private TextView mTitle;

private Class<?> mClx;
private String mTag;

取得xml并加载的形式，this代表这个xml的父布局就是这个自定义view，再用getChildAt的形式取得碎片中的控件，体现了开闭原则

LayoutInflater inflater = LayoutInflater.from(getContext());
inflater.inflate(itemLayoutId, this, true);

ViewGroup vg = (ViewGroup) this.getChildAt(0);
mIcon = (ImageView) vg.getChildAt(0);
mTitle = (TextView) vg.getChildAt(1);

全部代码（完全符合开闭原则，使用的时候不需要修改这个自定义控件任何的代码）

public class NavButton extends FrameLayout {

private Fragment mFragment = null;//这个是你维护的主界面的碎片实例

private ImageView mIcon;
private TextView mTitle;

private Class<?> mClx;
private String mTag;

public NavButton(@NonNull Context context) {
super(context);
}

public NavButton(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}

public NavButton(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

public NavButton(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr, @StyleRes int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}

private int uncheckedTitle;
private int checkedTitle;
private int uncheckedIcon;
private int checkedIcon;

public void init(@DrawableRes int uncheckedIcon, @DrawableRes int checkedIcon, @ColorInt int uncheckedTitle, @ColorInt int checkedTitle,  String s, Class<?> clx, int itemLayoutId) {
LayoutInflater inflater = LayoutInflater.from(getContext());
inflater.inflate(itemLayoutId, this, true);

ViewGroup vg = (ViewGroup) this.getChildAt(0);
mIcon = (ImageView) vg.getChildAt(0);
mTitle = (TextView) vg.getChildAt(1);

mTitle.setText(s);

if (uncheckedTitle == 0) {
this.uncheckedTitle = mTitle.getCurrentTextColor();
} else {
this.uncheckedTitle = uncheckedTitle;
mTitle.setTextColor(uncheckedTitle);
}

this.checkedTitle = checkedTitle;
this.uncheckedIcon = uncheckedIcon;
this.checkedIcon = checkedIcon;

mIcon.setImageDrawable(getResources().getDrawable(uncheckedIcon));
mClx = clx;
mTag = mClx.getName();
}

public Fragment getFragment() {
return mFragment;
}

public Class<?> getClx() {
return mClx;
}

public String getTag() {
return mTag;
}

public void setFragment(Fragment mFragment) {
this.mFragment = mFragment;
}

@Override
public void setSelected(boolean selected) {
super.setSelected(selected);

if (selected) {
mTitle.setTextColor(checkedTitle);
mIcon.setImageDrawable(getResources().getDrawable(checkedIcon));
} else {
mTitle.setTextColor(uncheckedTitle);
mIcon.setImageDrawable(getResources().getDrawable(uncheckedIcon));
}
}

}

底部导航栏碎片代码

xml，想修改布局直接去改item的布局即可

<?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">

<com.example.wechat.nav.NavButton
android:id="@+id/nav_chat"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"/>

<com.example.wechat.nav.NavButton
android:id="@+id/nav_friends"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"/>

<com.example.wechat.nav.NavButton
android:id="@+id/nav_find"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"/>

<com.example.wechat.nav.NavButton
android:id="@+id/nav_me"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"/>

</LinearLayout>

java

初始化前清空所有碎片，防止出错

private void clearOldFragment() {
FragmentTransaction transaction = getFragmentManager().beginTransaction();
List<Fragment> fragments = getFragmentManager().getFragments();
if (transaction == null || fragments == null || fragments.size() == 0)
return;
boolean doCommit = false;
for (Fragment fragment : fragments) {
if (fragment != this && fragment != null) {
transaction.remove(fragment);
doCommit = true;
}
}
if (doCommit)
transaction.commitNow();
}

切换item的操作

//思路：把将选的item和当前的item作为新老碎片，mCurrent是当前维护的即选中的item
private void doSelect(NavButton newNav) {
NavButton oldNav = null;

//拦截点击当前选中的按钮
if (mCurrentNav != null) {
oldNav = mCurrentNav;
if (oldNav == newNav) {
return;
}
}

//这里进行的操作：1.item的切换2.主布局碎片的切换
doTabChanged(oldNav, newNav, mContainerId);
mCurrentNav = newNav;
}

doTabChanged

private void doTabChanged(NavButton oldNav, NavButton newNav, int mContainerId) {
FragmentTransaction transaction = getFragmentManager().beginTransaction();

//将设置选中和设置未选中分立开来
if (oldNav != null) {//这里判空主要防止异常情况和第一次显示设置默认item的选中
if (newNav.getFragment() != null) {//这里的newNav要修改为oldNav，我擦，被开源中国的代码坑了！这是bug啊。找了我老半天
transaction.detach(oldNav.getFragment());//切换主布局碎片显示
}
oldNav.setSelected(false);//切换item显示
}

if (newNav != null) {
if (newNav.getFragment() == null) {
Fragment fragment = Fragment.instantiate(getActivity(),
newNav.getClx().getName(), null);
transaction.add(mContainerId, fragment, newNav.getTag());//给tag加快取得速度
newNav.setFragment(fragment);//交给他去维护,这是一个缓存机制
} else {
transaction.attach(newNav.getFragment());//采用attach和detach比hide，show性能更高
}
newNav.setSelected(true);
}

transaction.commit();
}

全部代码

public class NavFragment extends BaseFragment implements View.OnClickListener {

private FragmentManager mFragmentManager;
private Context mContext;
private int mContainerId;

public NavFragment() {
}

@BindView(R.id.nav_chat)
protected NavButton mChat;
@BindView(R.id.nav_friends)
protected NavButton mFriends;
@BindView(R.id.nav_find)
protected NavButton mFind;
@BindView(R.id.nav_me)
protected NavButton mMe;

@Override
protected int getLayoutId() {
return R.layout.fragment_nav;
}

@Override
protected void initData() {
mContainerId = R.id.fl_main_container;

clearOldFragment(mFragmentManager);
}

@Override
protected void initWidget(View mRoot) {

        //这里就是传的参数：未选中图片，选中图片，0（初始文字，0为不设置）。。
mChat.init(R.drawable.nav_chat_unchecked, R.drawable.nav_chat_checked, 0, getResources().getColor(R.color.nav), "微信", ChatFragment.class, R.layout.nav_item);
mFriends.init(R.drawable.nav_friends_unchecked, R.drawable.nav_friends_checked, 0, getResources().getColor(R.color.nav), "通讯录", FriendsFragment.class, R.layout.nav_item);
mFind.init(R.drawable.nav_find_unchecked, R.drawable.nav_find_checked, 0, getResources().getColor(R.color.nav), "发现", FindFragment.class, R.layout.nav_item);
mMe.init(R.drawable.nav_me_unchecked, R.drawable.nav_me_checked, 0, getResources().getColor(R.color.nav), "我", MeFragment.class, R.layout.nav_item);

doSelect(mChat);
}

private NavButton mCurrentNav = null;

//思路：把将选的item和当前的item作为新老碎片，mCurrent是当前维护的即选中的item
private void doSelect(NavButton newNav) {
NavButton oldNav = null;

//拦截点击当前选中的按钮
if (mCurrentNav != null) {
oldNav = mCurrentNav;
if (oldNav == newNav) {
return;
}
}

//这里进行的操作：1.item的切换2.主布局碎片的切换
doTabChanged(oldNav, newNav, mContainerId);
mCurrentNav = newNav;
}

private void doTabChanged(NavButton oldNav, NavButton newNav, int mContainerId) {
FragmentTransaction transaction = getFragmentManager().beginTransaction();

//将设置选中和设置未选中分立开来
if (oldNav != null) {//这里判空主要防止异常情况和第一次显示设置默认item的选中
if (newNav.getFragment() != null) {
transaction.detach(oldNav.getFragment());//切换主布局碎片显示
}
oldNav.setSelected(false);//切换item显示
}

if (newNav != null) {
if (newNav.getFragment() == null) {
Fragment fragment = Fragment.instantiate(getActivity(),
newNav.getClx().getName(), null);
transaction.add(mContainerId, fragment, newNav.getTag());//给tag加快取得速度
newNav.setFragment(fragment);//交给他去维护,这是一个缓存机制
} else {
transaction.attach(newNav.getFragment());//采用attach和detach比hide，show性能更高
}
newNav.setSelected(true);
}

transaction.commit();
}

private void clearOldFragment(FragmentManager mFragmentManager) {
FragmentTransaction transaction = mFragmentManager.beginTransaction();
List<Fragment> fragments = mFragmentManager.getFragments();
if (transaction == null || fragments == null || fragments.size() == 0)
return;
boolean doCommit = false;
for (Fragment fragment : fragments) {
if (fragment != this && fragment != null) {
transaction.remove(fragment);
doCommit = true;
}
}
if (doCommit)
transaction.commitNow();
}

@OnClick({R.id.nav_chat, R.id.nav_friends, R.id.nav_find, R.id.nav_me})
@Override
public void onClick(View v) {
if (v instanceof NavButton) {
NavButton nav = (NavButton) v;
doSelect(nav);
}
}

// TODO: 2017/11/27 chat双击监听

}

效果图（素材找的不是很好）



看起来还没有第三方那些绚丽？但是微信支付宝都是这样的，简单素净，高端app必备。而且其代码的可维护性和重用性才是重中之中。