最简单的android底部导航

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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用自定义的底部导航栏来实现这个效果。具体的实现步骤如下: 1. 创建一个自定义的底部导航栏布局,在布局文件中添加一个中间突出的按钮,可以使用ImageView或者Button来实现。 2. 在Activity中设置底部导航栏,使用setContentView()方法将自定义的底部导航栏布局加载到Activity中。 3. 在代码中设置底部导航栏的选中项、未选中项的图标和文字等。 4. 对中间突出的按钮进行特殊处理,例如设置监听器、在选中状态下显示不同的图标等。 以下是一个简单的实现步骤示例: 1. 创建一个自定义的底部导航栏布局,例如bottom_navigation_layout.xml: ``` <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@color/white"> <ImageView android:id="@+id/bottom_nav_item1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item1_unselected" android:contentDescription="@string/nav_item1"/> <ImageView android:id="@+id/bottom_nav_item2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item2_unselected" android:contentDescription="@string/nav_item2"/> <ImageView android:id="@+id/bottom_nav_item3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item3_unselected" android:contentDescription="@string/nav_item3"/> <ImageView android:id="@+id/bottom_nav_item_center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_nav_item_center_unselected" android:contentDescription="@string/nav_item_center"/> <ImageView android:id="@+id/bottom_nav_item4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item4_unselected" android:contentDescription="@string/nav_item4"/> <ImageView android:id="@+id/bottom_nav_item5" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item5_unselected" android:contentDescription="@string/nav_item5"/> </LinearLayout> ``` 2. 在Activity中设置底部导航栏,例如MainActivity.java: ``` public class MainActivity extends AppCompatActivity { private ImageView navItem1, navItem2, navItem3, navItemCenter, navItem4, navItem5; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 初始化底部导航栏控件 initView(); // 设置底部导航栏默认选中项 setNavItemSelected(navItem1); } /** * 初始化底部导航栏控件 */ private void initView() { navItem1 = findViewById(R.id.bottom_nav_item1); navItem2 = findViewById(R.id.bottom_nav_item2); navItem3 = findViewById(R.id.bottom_nav_item3); navItemCenter = findViewById(R.id.bottom_nav_item_center); navItem4 = findViewById(R.id.bottom_nav_item4); navItem5 = findViewById(R.id.bottom_nav_item5); // 设置底部导航栏监听器 navItem1.setOnClickListener(navItemSelectedListener); navItem2.setOnClickListener(navItemSelectedListener); navItem3.setOnClickListener(navItemSelectedListener); navItemCenter.setOnClickListener(navItemSelectedListener); navItem4.setOnClickListener(navItemSelectedListener); navItem5.setOnClickListener(navItemSelectedListener); } /** * 底部导航栏监听器 */ private View.OnClickListener navItemSelectedListener = new View.OnClickListener() { @Override public void onClick(View view) { // 设置底部导航栏选中项 setNavItemSelected(view); } }; /** * 设置底部导航栏选中项 */ private void setNavItemSelected(View view) { // 设置底部导航栏选中项的图标和文字 navItem1.setImageResource(R.drawable.ic_nav_item1_unselected); navItem2.setImageResource(R.drawable.ic_nav_item2_unselected); navItem3.setImageResource(R.drawable.ic_nav_item3_unselected); navItem4.setImageResource(R.drawable.ic_nav_item4_unselected); navItem5.setImageResource(R.drawable.ic_nav_item5_unselected); switch (view.getId()) { case R.id.bottom_nav_item1: navItem1.setImageResource(R.drawable.ic_nav_item1_selected); // 处理底部导航栏选中项1的事件 break; case R.id.bottom_nav_item2: navItem2.setImageResource(R.drawable.ic_nav_item2_selected); // 处理底部导航栏选中项2的事件 break; case R.id.bottom_nav_item3: navItem3.setImageResource(R.drawable.ic_nav_item3_selected); // 处理底部导航栏选中项3的事件 break; case R.id.bottom_nav_item_center: // 处理底部导航栏中间按钮的事件 break; case R.id.bottom_nav_item4: navItem4.setImageResource(R.drawable.ic_nav_item4_selected); // 处理底部导航栏选中项4的事件 break; case R.id.bottom_nav_item5: navItem5.setImageResource(R.drawable.ic_nav_item5_selected); // 处理底部导航栏选中项5的事件 break; } } } ``` 3. 对中间突出的按钮进行特殊处理,例如在选中状态下显示不同的图标,例如ic_nav_item_center_selected.png: ``` navItemCenter.setImageResource(R.drawable.ic_nav_item_center_selected); ``` 4. 最后,你需要添加底部导航栏的点击事件处理,以及实现对应的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值