android底部导航(Bottom Navigation)实现--------------------------------------只需放到Xml里面就可以使用
1,利用技术点: 自定义控件 + Fragment 实现。
2,实现原理:
~1,利用Fragment特性进行流畅切换。
~2,自定义控件:
#,因为每一个底部导航选项都有一个ImageView和TextView,而每次选中都会更改ImageView和TextView的图片或颜色,所以直接抽取成自定义控件方便循环利用。
3,自定义控件代码:
public class BottomNavigation extends RelativeLayout implements OnClickListener {
private RelativeLayout rlF, rlS, rlT, rlFo;
private ImageView ivF, ivS, ivT, ivFo;
private TextView tvF, tvS, tvT, tvFo;
public BottomNavigation(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.bottom_navigation, this);
findView();
set();
changeStateClick(ivF, tvF);
changeStateNormal(ivS, tvS);
changeStateNormal(ivT, tvT);
changeStateNormal(ivFo, tvFo);
}
private void set() {
rlF.setOnClickListener(this);
rlS.setOnClickListener(this);
rlT.setOnClickListener(this);
rlFo.setOnClickListener(this);
}
private void findView() {
rlF = (RelativeLayout) findViewById(R.id.rl_first);
ivF = (ImageView) findViewById(R.id.iv_first);
tvF = (TextView) findViewById(R.id.tv_first);
tvF.setText(R.string.home_first);
rlS = (RelativeLayout) findViewById(R.id.rl_second);
ivS = (ImageView) findViewById(R.id.iv_second);
tvS = (TextView) findViewById(R.id.tv_second);
tvS.setText(R.string.home_second);
rlT = (RelativeLayout) findViewById(R.id.rl_third);
ivT = (ImageView) findViewById(R.id.iv_third);
tvT = (TextView) findViewById(R.id.tv_third);
tvT.setText(R.string.home_third);
rlFo = (RelativeLayout) findViewById(R.id.rl_forth);
ivFo = (ImageView) findViewById(R.id.iv_forth);
tvFo = (TextView) findViewById(R.id.tv_forth);
tvFo.setText(R.string.home_forth);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.rl_first:
HomePageFragment hf = new HomePageFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, hf).addToBackStack(null).commit();
changeStateClick(ivF, tvF);
changeStateNormal(ivS, tvS);
changeStateNormal(ivT, tvT);
changeStateNormal(ivFo, tvFo);
break;
case R.id.rl_second:
ApplicationFragment apf = new ApplicationFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, apf).addToBackStack(null).commit();
changeStateClick(ivS, tvS);
changeStateNormal(ivF, tvF);
changeStateNormal(ivT, tvT);
changeStateNormal(ivFo, tvFo);
break;
case R.id.rl_third:
ActionFragment af = new ActionFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, af).addToBackStack(null).commit();
changeStateClick(ivT, tvT);
changeStateNormal(ivF, tvF);
changeStateNormal(ivS, tvS);
changeStateNormal(ivFo, tvFo);
break;
case R.id.rl_forth:
MineFragment mf = new MineFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, mf).addToBackStack(null).commit();
changeStateClick(ivFo, tvFo);
changeStateNormal(ivF, tvF);
changeStateNormal(ivT, tvT);
changeStateNormal(ivS, tvS);
break;
}
}
private void changeStateNormal(ImageView iv, TextView tv) {
iv.setBackgroundResource(R.drawable.apple_black);
tv.setTextColor(getResources()
.getColor(android.R.color.background_dark));
}
private void changeStateClick(ImageView iv, TextView tv) {
iv.setBackgroundResource(R.drawable.apple_red);
tv.setTextColor(getResources().getColor(android.R.color.holo_blue_dark));
}
}
4,只需直接带入就可以正常使用:
<包名.BottomNavigation
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</包名.BottomNavigation>
1,利用技术点: 自定义控件 + Fragment 实现。
2,实现原理:
~1,利用Fragment特性进行流畅切换。
~2,自定义控件:
#,因为每一个底部导航选项都有一个ImageView和TextView,而每次选中都会更改ImageView和TextView的图片或颜色,所以直接抽取成自定义控件方便循环利用。
3,自定义控件代码:
public class BottomNavigation extends RelativeLayout implements OnClickListener {
private RelativeLayout rlF, rlS, rlT, rlFo;
private ImageView ivF, ivS, ivT, ivFo;
private TextView tvF, tvS, tvT, tvFo;
public BottomNavigation(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.bottom_navigation, this);
findView();
set();
changeStateClick(ivF, tvF);
changeStateNormal(ivS, tvS);
changeStateNormal(ivT, tvT);
changeStateNormal(ivFo, tvFo);
}
private void set() {
rlF.setOnClickListener(this);
rlS.setOnClickListener(this);
rlT.setOnClickListener(this);
rlFo.setOnClickListener(this);
}
private void findView() {
rlF = (RelativeLayout) findViewById(R.id.rl_first);
ivF = (ImageView) findViewById(R.id.iv_first);
tvF = (TextView) findViewById(R.id.tv_first);
tvF.setText(R.string.home_first);
rlS = (RelativeLayout) findViewById(R.id.rl_second);
ivS = (ImageView) findViewById(R.id.iv_second);
tvS = (TextView) findViewById(R.id.tv_second);
tvS.setText(R.string.home_second);
rlT = (RelativeLayout) findViewById(R.id.rl_third);
ivT = (ImageView) findViewById(R.id.iv_third);
tvT = (TextView) findViewById(R.id.tv_third);
tvT.setText(R.string.home_third);
rlFo = (RelativeLayout) findViewById(R.id.rl_forth);
ivFo = (ImageView) findViewById(R.id.iv_forth);
tvFo = (TextView) findViewById(R.id.tv_forth);
tvFo.setText(R.string.home_forth);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.rl_first:
HomePageFragment hf = new HomePageFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, hf).addToBackStack(null).commit();
changeStateClick(ivF, tvF);
changeStateNormal(ivS, tvS);
changeStateNormal(ivT, tvT);
changeStateNormal(ivFo, tvFo);
break;
case R.id.rl_second:
ApplicationFragment apf = new ApplicationFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, apf).addToBackStack(null).commit();
changeStateClick(ivS, tvS);
changeStateNormal(ivF, tvF);
changeStateNormal(ivT, tvT);
changeStateNormal(ivFo, tvFo);
break;
case R.id.rl_third:
ActionFragment af = new ActionFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, af).addToBackStack(null).commit();
changeStateClick(ivT, tvT);
changeStateNormal(ivF, tvF);
changeStateNormal(ivS, tvS);
changeStateNormal(ivFo, tvFo);
break;
case R.id.rl_forth:
MineFragment mf = new MineFragment();
((Activity) getContext()).getFragmentManager().beginTransaction()
.replace(R.id.fl, mf).addToBackStack(null).commit();
changeStateClick(ivFo, tvFo);
changeStateNormal(ivF, tvF);
changeStateNormal(ivT, tvT);
changeStateNormal(ivS, tvS);
break;
}
}
private void changeStateNormal(ImageView iv, TextView tv) {
iv.setBackgroundResource(R.drawable.apple_black);
tv.setTextColor(getResources()
.getColor(android.R.color.background_dark));
}
private void changeStateClick(ImageView iv, TextView tv) {
iv.setBackgroundResource(R.drawable.apple_red);
tv.setTextColor(getResources().getColor(android.R.color.holo_blue_dark));
}
}
4,只需直接带入就可以正常使用:
<包名.BottomNavigation
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</包名.BottomNavigation>