面对导航栏大家都不陌生
在布局中用<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>
我只是发博客来以此警戒自己,若各位有更好的见解请不吝赐教