Android 最常用的四种底部导航栏实现 |
您所在的位置：网站首页 › 安卓系统导航栏已禁用 › Android 最常用的四种底部导航栏实现 |
Android 最常用的四种底部导航栏实现
|
Android 底部导航栏实现
底部导航栏的应用非常的广泛。今天就总结下几种实现的方式。 一、Fragment + TextView 实现前面一篇博客在介绍Fragment 的时候就使用了Fragment + ImageView 实现了一个底部导航栏点击的例子，只要把ImageView 替换为TextView 是一样的实现。这里就详细介绍了，可以看这篇博客Android之Fragment的概述和使用 这种方式每次点击我们都要重置 所有TextView的状态，然后选中点击的TextView 二、RadioGroup + ViewPager 实现我们只需重写RadioGroup的onCheckedChange，判断checkid即可知道点击的是哪个RadioButton，再给ViewPager 设置监听，让底部导航栏和viewpager同步就行了。 运行效果：
注意： android:button="@null" 属性可以将边上的圈圈去掉。 编写MainActivity代码 public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private RadioGroup mRadioGroup; private RadioButton tab1,tab2,tab3,tab4; //四个单选按钮 private List mViews; //存放视图 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView();//初始化数据 //对单选按钮进行监听，选中、未选中 mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup radioGroup, int i) { switch (i) { case R.id.rb_msg: mViewPager.setCurrentItem(0); break; case R.id.rb_people: mViewPager.setCurrentItem(1); break; case R.id.rb_find: mViewPager.setCurrentItem(2); break; case R.id.rb_me: mViewPager.setCurrentItem(3); break; } } }); } private void initView() { //初始化控件 mViewPager=findViewById(R.id.viewpager); mRadioGroup=findViewById(R.id.rg_tab); tab1=findViewById(R.id.rb_msg); tab2=findViewById(R.id.rb_people); tab3=findViewById(R.id.rb_find); tab4=findViewById(R.id.rb_me); mViews=new ArrayList();//加载，添加视图 mViews.add(LayoutInflater.from(this).inflate(R.layout.msg,null)); mViews.add(LayoutInflater.from(this).inflate(R.layout.people,null)); mViews.add(LayoutInflater.from(this).inflate(R.layout.find,null)); mViews.add(LayoutInflater.from(this).inflate(R.layou,null)); mViewPager.setAdapter(new MyViewPagerAdapter());//设置一个适配器 //对viewpager监听，让分页和底部图标保持一起滑动 mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override //让viewpager滑动的时候，下面的图标跟着变动 public void onPageSelected(int position) { switch (position) { case 0: tab1.setChecked(true); tab2.setChecked(false); tab3.setChecked(false); tab4.setChecked(false); break; case 1: tab1.setChecked(false); tab2.setChecked(true); tab3.setChecked(false); tab4.setChecked(false); break; case 2: tab1.setChecked(false); tab2.setChecked(false); tab3.setChecked(true); tab4.setChecked(false); break; case 3: tab1.setChecked(false); tab2.setChecked(false); tab3.setChecked(false); tab4.setChecked(true); break; } } @Override public void onPageScrollStateChanged(int state) { } }); } //ViewPager适配器 private class MyViewPagerAdapter extends PagerAdapter { @Override public int getCount() { return mViews.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view==object; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView(mViews.get(position)); } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { container.addView(mViews.get(position)); return mViews.get(position); } } } 三、BottomNavigationView+ViewPager+fragment 实现这是 Google 给我们提供的一个专门用于底部导航的 View，你只需要在新建 Activity 的时候选择 “Bottom Navigation Activity”就可以了。
实现底部导航栏我们很容易想到使用表格布局，下面就是一个个的tab切换viewpager就行。 这种实现方最为常用吧。 运行效果：
布局代码 编写MyAdapt继承FragmentPagerAdapter的适配器 public class MyAdapt extends FragmentPagerAdapter { private List mFragments; private List mtitle; public MyAdapt(@NonNull FragmentManager fm, List mFragments,List mtitle) { super(fm); this.mFragments=mFragments; this.mtitle=mtitle; } @NonNull @Override //返回指定fragment public Fragment getItem(int position) { return mFragments.get(position); } @Override //返回fragment数量 public int getCount() { return mFragments.size(); } @Nullable @Override //获取分页标题 public CharSequence getPageTitle(int position) { return mtitle.get(position); } } 编写MainActivity2 代码 public class MainActivity2 extends AppCompatActivity { private List mFragments; //存放视图 private ViewPager viewPager; private TabLayout mTabLayout; private List mtitle; //存放底部标题 @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity2_main); initView(); } private void initView() { mTabLayout = findViewById(R.id.tablayout); viewPager = findViewById(R.id.viewpager); mFragments=new ArrayList(); mFragments.add(new msg()); mFragments.add(new people()); mFragments.add(new find()); mFragments.add(new me()); mtitle=new ArrayList(); mtitle.add("信息"); mtitle.add("联系人"); mtitle.add("发现"); mtitle.add("我的"); //实例化适配器 MyAdapt adapt = new MyAdapt(getSupportFragmentManager(), mFragments, mtitle); viewPager.setAdapter(adapt); mTabLayout.setupWithViewPager(viewPager);//给tab设置一个viewpager //viewpager的监听 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override //选中 public void onPageSelected(int position) { switch (position){ case 0: Toast.makeText(MainActivity2.this, "这是信息", Toast.LENGTH_SHORT).show(); break; case 1: Toast.makeText(MainActivity2.this, "这是联系人", Toast.LENGTH_SHORT).show(); break; case 2: Toast.makeText(MainActivity2.this, "这是发现", Toast.LENGTH_SHORT).show(); break; case 3: Toast.makeText(MainActivity2.this, "这是我的", Toast.LENGTH_SHORT).show(); break; } } @Override // //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕 public void onPageScrollStateChanged(int state) { } }); } } 小结底部导航栏实现的方式实在是太多种了，主要就是考虑布局的分配。上面的主页面 内容展示你要用什么去实现，以及下面的底部导航你要用什么去实现，只要可以组合起来并建立监听的一致，就可以实现底部导航栏的功能。 同理底部导航栏的实现也可以做顶部导航栏 今日的分享就到此为止吧！
|
这里我放一个布局文件的代码，其他几个都是一样的。
分别设置选中和没有选中的图片
运行效果：
BottomNavigationView 的Tab是通过menu 的方式添加的。使用较为简单，不需要你自己定义控件，只需要自己修改他给你定义的menu文件和回调方法 这里不过多的介绍了，大家可以去看一下里面的代码。 
这里给出一个Fragment，其余几个都是一样的。
【本文地址】
今日新闻 |
推荐新闻 |