导航栏与toolbar的优化

面对导航栏大家都不陌生

在布局中用<include layout="@layout/bottom"/>就可以实现，但面对导航栏的跳转，想必各位都有自己的理解。我使用的是fragment跳转，在activity中囊括所有导航栏的页面，结合viewpaper可以打造一个极好的效果，

代码是

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

//声明ViewPager
private ViewPager mViewPager;
//适配器
private FragmentPagerAdapter mAdapter;
//装载Fragment的集合
private List<Fragment> mFragments;
//三个Tab对应的布局
private LinearLayout mTab1,mTab2,mTab3,mTab4;
//三个Tab对应的ImageButton
private ImageButton mImg1,mImg2,mImg3,mImg4;
private TextView tv_sy1,tv_sc1,tv_me1,tv_fl1;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

 initViews();//初始化控件
    selectTab(0);//初始页面为主页面
    initEvents();//初始化事件
    initDatas();//初始化数据
}

//初始化控件
private void initViews(){
    mViewPager = (ViewPager) findViewById(R.id.ViewPager);

    mTab1 = (LinearLayout) findViewById(R.id.lin_1);
    mTab2 = (LinearLayout) findViewById(R.id.lin_2);
    mTab3 = (LinearLayout) findViewById(R.id.lin_3);
    mTab4 = (LinearLayout) findViewById(R.id.lin_4);

    mImg1 = (ImageButton) findViewById(R.id.im_sy);
    mImg2 = (ImageButton) findViewById(R.id.im_fl);
    mImg3 = (ImageButton) findViewById(R.id.im_sc);
    mImg4 = (ImageButton) findViewById(R.id.im_me);

    tv_sy1=(TextView) findViewById(R.id.tv_sy);
    tv_fl1=(TextView) findViewById(R.id.tv_fl);
    tv_sc1=(TextView) findViewById(R.id.tv_sc);
    tv_me1=(TextView) findViewById(R.id.tv_me);
}

private void initEvents(){
    //设置三个Tab的点击事件

    mTab1.setOnClickListener(this);
    mTab2.setOnClickListener(this);
    mTab3.setOnClickListener(this);
    mImg4.setOnClickListener(this);
    tv_sy1.setOnClickListener(this);
    tv_fl1.setOnClickListener(this);
    tv_sc1.setOnClickListener(this);
    tv_me1.setOnClickListener(this);
}

private void initDatas(){
    mFragments=new ArrayList<>();
    //将三个Fragment加入集合中

    mFragments.add(new SYFragment());
    mFragments.add(new FLFragment());
    mFragments.add(new SCFragment());
    mFragments.add(new MeFragment());

    //初始化适配器
    mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }
    };

    //设置ViewPager的适配器
    mViewPager.setAdapter(mAdapter);
    //将ViewPager的预加载个数设置为你的所有Fragment的数量,解决滑动时候轮播图出现空白的问题
    mViewPager.setOffscreenPageLimit(mFragments.size());
    //设置ViewPager的切换监听
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        //页面滚动事件
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }
        //页面选中事件
        @Override
        public void onPageSelected(int position) {
            //设置position对应的集合中的fragment
            mViewPager.setCurrentItem(position);
            resetImgs();
            selectTab(position);
        }
        //页面滚动状态改变事件
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

@Override
public void onClick(View view) {
    //先将三个ImageButton置为灰色
    resetImgs();
    switch (view.getId()){
        case R.id.im_sy:
            selectTab(0);
            break;
        case R.id.im_fl:
            selectTab(1);
            break;
        case R.id.im_sc:
            selectTab(2);
            break;
        case R.id.im_me:
            selectTab(3);
            break;
    }
}
//将三个ImageButton设置为灰色
private void resetImgs() {
    mImg1.setImageResource(R.drawable.shouye);
    mImg2.setImageResource(R.drawable.fl);
    mImg3.setImageResource(R.drawable.sc);
    mImg4.setImageResource(R.drawable.me);
    tv_fl1.setTextColor(getResources().getColor(R.color.black));
    tv_sy1.setTextColor(getResources().getColor(R.color.black));
    tv_sc1.setTextColor(getResources().getColor(R.color.black));
    tv_me1.setTextColor(getResources().getColor(R.color.black));
}

private void selectTab(int i) {
    //根据点击的Tab设置对应的ImageButton为选中的颜色
    switch (i) {
        case 0:
            mImg1.setImageResource(R.drawable.shouye1);
            tv_sy1.setTextColor(getResources().getColor(R.color.red));
            break;
        case 1:
            mImg2.setImageResource(R.drawable.fl1);
            tv_fl1.setTextColor(getResources().getColor(R.color.red));

            break;
        case 2:
            mImg3.setImageResource(R.drawable.sc1);
            tv_sc1.setTextColor(getResources().getColor(R.color.red));

            break;
        case 3:
            mImg4.setImageResource(R.drawable.me1);
            tv_me1.setTextColor(getResources().getColor(R.color.red));

            break;
    }
    //设置当前点击的Tab所对应的页面
    mViewPager.setCurrentItem(i);
}

}

由于之前多次修修改改，代码上显得有点呆，但无伤大雅。当时我心头一热，想在此基础上加一个抽屉，这涉及到toolbar的使用。一开始尝试了笨方法，在fragment里面创建toolbar，最终会发现setSupportActionBar报错，反复修改，最终误打误撞的在总activity布局中加入toolbar（之前就试过，但出现了各种报错），一番修改后能如愿运行

代码如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.viewpager.widget.ViewPager
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/ViewPager"
                />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#08ECD6"
                android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/Base.ThemeOverlay.AppCompat.Light"
                />

            <com.google.android.material.navigation.NavigationView
                android:id="@+id/nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                >

                <include layout="@layout/bottom"/>
            </com.google.android.material.navigation.NavigationView>

        </RelativeLayout>
        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/nav_menu" />

    </androidx.drawerlayout.widget.DrawerLayout>
</RelativeLayout>

我只是发博客来以此警戒自己，若各位有更好的见解请不吝赐教