android 导航栏布局,Android底部导航栏实现（三）之TextView+LinearLayout

这里简单记录下通过TextView+LinearLayout+Fragment来实现Android底部导航栏。

这里写图片描述

布局

代码

mTHome.setOnClickListener(this);

mTLocation.setOnClickListener(this);

mTLike.setOnClickListener(this);

mTMe.setOnClickListener(this);

setDefaultFragment();//设置默认显示Fragment

@Override

public void onClick(View view) {

resetTabState();//reset the tab state

switch (view.getId()) {

case R.id.tv_home:

setTabState(mTHome, R.drawable.home_fill, getColor(R.color.colorPrimary));//设置Tab状态

switchFrgment(0);//切换Fragment

break;

case R.id.tv_location: setTabState(mTLocation, R.drawable.location_fill, getColor(R.color.colorPrimary));

switchFrgment(1);

break;

case R.id.tv_like:

setTabState(mTLike, R.drawable.like_fill, getColor(R.color.colorPrimary)); switchFrgment(2);

break;

case R.id.tv_person: setTabState(mTMe, R.drawable.person_fill, getColor(R.color.colorPrimary));

switchFrgment(3);

break;

}

}

Fragment的切换

/** * switch the fragment accordting to id

* @param i id

*/

private void switchFrgment(int i) {

FragmentTransaction transaction = getChildFragmentManager().beginTransaction();

switch (i) {

case 0:

if (mHomeFragment == null) { mHomeFragment = mHomeFragment.newInstance(getString(R.string.item_home));

}

transaction.replace(R.id.sub_content, mHomeFragment);

break;

case 1:

if (mLocationFragment == null) { mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location));

}

transaction.replace(R.id.sub_content, mLocationFragment);

break;

case 2:

if (mLikeFragment == null) { mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like));

}

transaction.replace(R.id.sub_content, mLikeFragment);

break;

case 3:

if (mPersonFragment == null) {

mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person));

}

transaction.replace(R.id.sub_content, mPersonFragment);

break;

}

transaction.commit();

}

这里面值得注意的地方就是要用getChildFragmentManager()，否则会出现切换Fragment内容不显示的情况。

设置Tab状态

/**

* set the tab state of bottom navigation bar

*

* @param textView the text to be shown

* @param image the image

* @param color the text color

*/

private void setTabState(TextView textView, int image, int color) { textView.setCompoundDrawablesRelativeWithIntrinsicBounds(0, image, 0, 0);//Call requires API level 17 textView.setTextColor(color); } /** * revert the image color and text color to black */ private void resetTabState() { setTabState(mTHome, R.drawable.home, getColor(R.color.black_1)); setTabState(mTLocation, R.drawable.location, getColor(R.color.black_1)); setTabState(mTLike, R.drawable.like, getColor(R.color.black_1)); setTabState(mTMe, R.drawable.person, getColor(R.color.black_1));

}

说明：这几篇文章没有过多的文字叙述，因为这些东西也不是很难，而且都是常用的，相信很多人都了如指掌了，多说亦是废话，直接上代码看的反而更清楚。