Android中导航栏的几种实现方式

ViewPager导航实现方式

伪代码，需要自己根据情况实现

• ViewPager + TabLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="100p"
        //导航栏背景颜色
        android:background="#ffff00"
        //指示器颜色
        app:tabIndicatorColor="#66ff33"
        //指示器高度
        app:tabIndicatorHeight="20p"
        //普通状态下文字的颜色
        app:tabTextColor="@color/colorPrimary"
        //选中时文字的颜色
        app:tabSelectedTextColor="#CC33FF"
        //是否可滑动：fixed：固定；scrollable：可滑动
        app:tabMode="fixed"
        //设置选项卡的背景：此处要写一个selector）
        app:tabBackground="@drawable/selected"
        //设置字体大小：此处要写一个style） 
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

package com.example.carson_ho.toptabbar;

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MyFragmentPagerAdapter myFragmentPagerAdapter;
    private TabLayout.Tab one;
    private TabLayout.Tab two;
    private TabLayout.Tab three;
    private TabLayout.Tab four;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();//隐藏掉整个ActionBar
        setContentView(R.layout.activity_main);
        //初始化视图
        initViews();
    }
    
    private void initViews() {
        //使用适配器将ViewPager与Fragment绑定在一起
        mViewPager= (ViewPager) findViewById(R.id.viewPager);
        //新的版本代码中PagerAdapter两子类的构造方法需要传入两个参数，涉及Viewpager懒加载优化，生命周期的控制等
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(myFragmentPagerAdapter);
        //将TabLayout与ViewPager绑定在一起
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.setupWithViewPager(mViewPager);
        //指定Tab的位置
        one = mTabLayout.getTabAt(0);
        two = mTabLayout.getTabAt(1);
        three = mTabLayout.getTabAt(2);
        four = mTabLayout.getTabAt(3);
        //设置Tab的图标，假如不需要则把下面的代码删去
        one.setIcon(R.mipmap.ic_launcher);
        two.setIcon(R.mipmap.ic_launcher);
        three.setIcon(R.mipmap.ic_launcher);
        four.setIcon(R.mipmap.ic_launcher);
    }
    
    class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private String[] mTitles = new String[]{"首页", "联系人", "消息","我的"};
        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            if (position == 1) {
                return new Fragment2();
            } else if (position == 2) {
                return new Fragment3();
            }else if (position==3){
                return new Fragment4();
            }
            return new Fragment1();
        }

        @Override
        public int getCount() {
            return mTitles.length;
        }

        //绑定后获取title位置
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }
	}

}

• ViewPager + RadioGroup

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="MainActivity">
    <RadioGroup
        android:id="@+id/rg_tabs"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="#dcdcdc"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/rb_tab_1"
            android:checked="true"
            android:text="首页" />
        <RadioButton
            android:id="@+id/rb_tab_2"
            android:text="联系人" />
        <RadioButton
            android:id="@+id/rb_tab_3"
            android:text="消息" />
        <RadioButton
            android:id="@+id/rb_tab_4"
            android:text="我的" />
    </RadioGroup>
     <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager_show"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Activity文件

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private RadioGroup mRadioGroupTabs;
    private List<Fragment> mFragments;
    private FragmentPagerAdapter mAdapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_style2);
        initView();
    }
 
    private void initView() {
        // find view
        mViewPager = findViewById(R.id.fragment_vp);
        mTabRadioGroup = findViewById(R.id.tabs_rg);
        // init fragment
        mFragments = new ArrayList<>(4);
        mFragments.add(BlankFragment.newInstance("首页"));
        mFragments.add(BlankFragment.newInstance("联系人"));
        mFragments.add(BlankFragment.newInstance("消息"));
        mFragments.add(BlankFragment.newInstance("我的"));
        // init view pager
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
        mViewPager.setAdapter(mAdapter);
        // register listener
        mViewPager.addOnPageChangeListener(mPageChangeListener);
        mTabRadioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
    }
 
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mViewPager.removeOnPageChangeListener(mPageChangeListener);
    }
 
    private ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
 
        @Override
        public void onPageSelected(int position) {
            RadioButton radioButton = (RadioButton) mTabRadioGroup.getChildAt(position);
            radioButton.setChecked(true);
        }
 
        @Override
        public void onPageScrollStateChanged(int state) {
 
        }
    };
 
    private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            for (int i = 0; i < group.getChildCount(); i++) {
                if (group.getChildAt(i).getId() == checkedId) {
                    mViewPager.setCurrentItem(i);
                    return;
                }
            }
        }
    };
 
    private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private List<Fragment> mList;
        public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
            super(fm);
            this.mList = list;
        }
 
        @Override
        public Fragment getItem(int position) {
            return this.mList == null ? null : this.mList.get(position);
        }
 
        @Override
        public int getCount() {
            return this.mList == null ? 0 : this.mList.size();
        }
    }
    
}

• BottomNavigationView

  谷歌提供的地步导航View，在新建Activity的时候选择Bottom NavigationActivity，IDE就可以自动生成代码

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />
<!-- app:menu="@menu/navigation"属性中的navigation文件 -->
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />
</menu>

在Activity中调用

    private TextView mTextMessage;
 
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
 
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    mTextMessage.setText(R.string.title_home);
                    return true;
                case R.id.navigation_dashboard:
                    mTextMessage.setText(R.string.title_dashboard);
                    return true;
                case R.id.navigation_notifications:
                    mTextMessage.setText(R.string.title_notifications);
                    return true;
            }
            return false;
        }
    };
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_style1);
 
        mTextMessage = findViewById(R.id.message);
        BottomNavigationView navigation = findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }

​

• ViewPager + FragmentTabHost

https://www.jianshu.com/p/a663803b2a44

感觉tabHost不好用，日后需要现查吧

• 总结

  第一种：ViewPager + TabLayout

  第二种：ViewPager + RadioGroup

  第三种：ViewPager + FragmentTabHost

  第四种：BottomNavigationView

  目前收集到这四种实现方式基本都与viewpager有关系，只有最后一种没有用到viewpager

  viewPager滑动接口使用