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